Урок 1: Figma AI — что реально работает

Чему вы научитесь

• Различать четыре точки входа в экосистеме Figma AI (Figma Design + Check Designs, Figma Make, Make Kits и Figma MCP Server) и выбирать нужную под задачу
• Ориентироваться в кредитной системе Figma AI и считать расход на проект до старта работы
• Использовать AI-инструменты холста, которые реально экономят часы: First Draft, Check Designs, удаление фона, векторизацию и auto-rename
• Выбирать тарифный план с учётом лимитов и доступности из России

Матрица четырёх входов: куда идти в экосистеме Figma AI

Осенью 2026 года главная ошибка команд в Figma — пытаться решить любую задачу одной кнопкой генерации. В октябрьском разборе связки инструментов (modao.cc/ad/blog/figma-ai-agent-design-code.html, figma.com/blog/workflow-lab-moving-between-design-and-code-with-agents/) и официальной справке (help.figma.com/hc/en-us/articles/42495172049303-Make-resources-and-MCP) экосистема Figma разделена на четыре чётких входа. Прежде чем тратить кредиты, определите, где должен жить результат: на дизайн-холсте, в интерактивном превью или в репозитории кода.

Один и тот же экран может проходить через все четыре звена по цепочке, но это разные сущности: интерактивное превью в браузере, векторные слои на холсте и готовый к слиянию код в Git проверяются по разным правилам. В этом уроке мы разберём первый вход — работу непосредственно на холсте Figma Design, а в следующем перейдём к Figma Make, Make Kits и MCP.

Для практики используем arckep.ru — все основные модели, без VPN, оплата рублями. Вы можете использовать любые другие сервисы.

Новая реальность: кредиты вместо безлимита

С 18 марта 2026 года Figma перевела все AI-функции на кредитную систему. До этого генерации работали как бесплатный бонус к подписке. Теперь каждая операция списывает кредиты из месячного пула, а неиспользованный остаток сгорает в конце расчётного периода.

Модели под капотом Figma выбирает автоматически в зависимости от операции (линейки Google Gemini и OpenAI GPT Image). На обычном холсте пользователь не переключает движок вручную — выбор модели открыт только в Figma Make.

Докупка кредитов работает в двух форматах: пакеты для команды и оплата по мере расхода (pay-as-you-go). С 25 августа 2026 года объём кредитов в дополнительных пакетах увеличен за ту же цену (help.figma.com, AI credit updates).

Кредитная система Figma AI (август 2026, figma.com/pricing)
├── Starter (бесплатно): 150 кредитов/день, до 500/мес
├── Professional Full seat ($16/мес): 3 000 кредитов/мес
├── Organization Full seat ($55/мес): 3 500 кредитов/мес
└── Enterprise Full seat ($90/мес): 4 250 кредитов/мес

Обратите внимание: на бесплатном плане действует не только месячный потолок в 500 кредитов, но и дневной лимит — 150 кредитов в сутки. Вы не сможете сжечь весь месячный запас за один интенсивный вечер.

AI-инструменты на холсте: что реально экономит время

1. First Draft — черновой макет из текста

Вы описываете экран текстом, а Figma собирает первый вариант из редактируемых слоёв с настроенным Auto Layout, а не плоскую картинку. Это быстрая отправная точка для композиции, а не финальный макет.

1. Создайте фрейм: выберите инструмент Frame (клавиша F) и задайте размер целевого устройства (например, iPhone 16 Pro или Desktop 1440).
2. Откройте меню действий: нажмите Ctrl/Cmd + / или кликните правой кнопкой мыши и выберите Generate with AI → First Draft.
3. Задайте структурный промпт: перечислите тип экрана, платформу, конкретные блоки сверху вниз и визуальный характер.
4. Разберите результат по слоям: перетащите блоки, замените рыбу текста на реальные данные и привяжите локальные стили.

Типичный расход: 15–25 кредитов за одну генерацию. На бесплатном плане дневного лимита хватит на 6–10 стартовых экранов.

2. Check Designs — автоматический аудит макета перед передачей

Когда черновик собран через First Draft или вручную, в нём часто остаются «сырые» значения: цвета в HEX вместо токенов, случайные отступы 13px вместо сетки 8px и непривязанные текстовые стили. Функция Check Designs проходит по выделенному фрейму и сверяет его с подключённой дизайн-системой команды:

• подсвечивает жёстко заданные цвета и предлагает заменить их на семантические переменные (surface-primary, text-muted);
• находит отступы и радиусы скругления, выбивающиеся из шкалы токенов;
• указывает на группы слоёв, которые дублируют уже существующий компонент из библиотеки.

Это превращает ИИ на холсте из «генератора картинок» в строгого технического редактора перед передачей макета в разработку или отправкой через Figma MCP.

3. Удаление фона и векторизация

• Remove background (около 5 кредитов): работает на базе GPT Image 1. Выделите растровое фото на холсте и нажмите Remove background в правой панели. Аккуратно вырезает сложные контуры с волосами и полупрозрачными деталями без перехода во внешние редакторы.
• Image to Vector (около 10 кредитов): превращает растровый набросок, иконку или логотип в редактируемые SVG-контуры. Кликните правой кнопкой по изображению → Vectorize и доработайте узлы пером.

4. Auto-rename слоёв

Вместо десятков безымянных Frame 47 и Rectangle 12 слои за секунду получают осмысленные семантические имена: hero-banner, primary-cta-button, price-badge. Расход минимальный — 2–3 кредита за выделенный фрейм.

На макете из 200+ слоёв эта операция экономит до получаса рутинной уборки. Но главное преимущество проявляется в связке с Figma MCP Server: когда ИИ-агент разработчика в Cursor или Claude Code читает ваш фрейм, осмысленные имена слоёв напрямую превращаются в чистые названия React-компонентов и CSS-классов.

5. Контекстные подсказки (Contextual Suggestions)

Во время ручной вёрстки Figma предлагает быстрые действия: обернуть элементы в Auto Layout, выровнять отступы или подтянуть подходящий компонент из библиотеки (1–3 кредита за срабатывание). Полезно при сборке типовых форм, но если всплывающие подсказки сбивают ритм, отключите их в Settings → AI → Suggestions.

Как считать бюджет кредитов на проект

Разберём реальную экономику на примере одного экрана мобильного приложения:

1. Стартовая генерация через First Draft: 15–25 кредитов.
2. Две уточняющие итерации текстом: 30–50 кредитов.
3. Удаление фона у двух фотографий: 10 кредитов.
4. Чистка и переименование дерева слоёв (Auto-rename): 2–3 кредита.

Итого: 60–90 кредитов на один насыщенный экран, если просить ИИ переделывать детали в чате. На бесплатном плане Starter (150 кредитов в день) это 1–2 экрана в сутки. На тарифе Professional (3 000 кредитов в месяц) пула хватает на 35–50 экранов — полноценное мобильное приложение средней сложности.

Для лендинга из 7 секций генерация каждого блока через First Draft с парой правок обойдётся в 200–350 кредитов (полтора-два дня работы на бесплатном тарифе).

Что работает хуже, чем в рекламных демо

• Абстрактные запросы в First Draft. Если написать «сделай дашборд аналитики», модель выдаст шаблонную витрину из графиков, не имеющую отношения к вашим метрикам и бизнес-логике. ИИ не знает вашего продукта — давайте ему точный состав блоков.
• Сжигание кредитов на мелкие визуальные правки. Каждый запрос «сделай кнопку чуть крупнее» или «поменяй синий на индиго» стоит как новая генерация (15–25 кредитов). Три такие фразы съедят половину дневного лимита Starter. Правильная тактика: получите грубый каркас с первой попытки, а размеры, цвета и шрифты докрутите руками — перемещение мышкой и привязка переменных бесплатны.
• Генерация сложных иллюстраций и фотореализма. Встроенный генератор Figma подходит только для временных заглушек. Для коммерческих иллюстраций, 3D-рендеров и ключевых визуалов используйте специализированные модели — Midjourney v8.2, Recraft V4.1 или gemini-3-pro-image и flux-2-pro через arckep.ru (модули D.2 и D.3).

Главное из урока