Как дизайнеру начать использовать ИИ в Figma: Codex, Claude, MCP и первые реальные задачи

Много вопросов у коллег, и не все понимают, как ИИ может помочь в работе — ну кроме генерации нейрослоповых картинок.

Хочу расписать личный опыт и выдать пошаговую инструкцию для тех, кто хочет использовать ИИ в своей работе не только для простых генераций изображений, но и для агентской разработки в Figma: для интерфейсов, прототипов, страниц, приложений и т.д.

По итогу вы сможете нормально переносить свои наработки из Figma в HTML и обратно из HTML в Figma. Или, например, выделить какой-то фрейм в Figma и попросить агента поработать с ним.

Статью написал сам! Ручками! Ну и, конечно, потом прогнал через ИИ, чтобы причесать текст — я не редактор от слова совсем.

У вас есть компьютер и доступ к одному из ИИ-инструментов: Claude, ChatGPT / Codex или аналогу.

Сначала нужно оформить подписку или получить доступ к выбранному сервису удобным для вас способом. Я не буду подробно расписывать этот момент, потому что у всех разные вводные: кто-то уже пользуется ChatGPT, кто-то хочет попробовать Claude, кто-то работает через корпоративный аккаунт.

Для старта рекомендую выбрать один инструмент и не прыгать между ними. Например, можно начать с Codex или Claude. Они разные по плюсам и минусам, но на первом этапе это не так важно. Важно просто пройти путь от «у меня есть макет в Figma» до «агент смог с ним что-то сделать».

Проверяем, что подписка или доступ активны.

Ищем

Claude Pro на 1 месяц или Chat GPT/Codex Pro

Оплачиваем. Следуем инструкции по активации от продавца.

Получаем новый аккаунт с подпиской или ваш текущий с активной подпиской. Логинемся на сайте выбранного сервиса и проверяем, что подписка активна

Теперь нам нужно поставить редактор для кода, куда мы с помощью плагина подключим нашего агента.

Рассказываю на примере VS Code, но тут может быть любой другой редактор. Устанавливаем в зависимости от вашей ОС. Тут должно быть все просто. Если нет — пишите в комментариях. Буду добавлять в статью подробности по каким-то сложным моментам, которые я пропустил.

Еще не забудьте поставить Git. Он тоже нам понадобится.

Откроется сложный интерфейс. Не пугайтесь :) В боковой панели ищем Extensions, а там — Codex.

Еще можете сразу установить плагин для локального сервера. Будет возможность посмотреть свою работу в браузере.

Теперь давайте сразу настроим второй вариант работы с агентом — через командную строку.

Это удобно для взаимодействия с агентом, когда вы что-то делаете в Figma. Его уровень — это джун :) Не просите его о многом, если не даете весь контекст, которым вы обладаете. Он легко сможет помочь с организацией слоев, текстом-рыбой и т.п. Для всего остального — сложнее и дольше. Не буду поднимать эту тему в этой статье.

Пока не буду писать здесь повтор этих инструкций. Для работы Codex нужен npm или Homebrew, а перед этим сразу ставьте Git. Все есть в документации и расписано по шагам.

Если вылезают ошибки или вопросы, не спешите в комментарии — ИИ ваш главный друг. Откройте его, скопируйте туда проблему, и он поможет с решением. Быстрее, чем вам помогут в комментариях.

Так, если с этим справились и все корректно запустилось — идем дальше.

В Figma вот тут включаем MCP-сервер.

Связь с Figma — он же figma-mcp. По сути, нам нужно запустить локальный сервер, через который наш установленный агент сможет работать: получать ваши макеты по указанной ссылке на фрейм. Еще он может сам создавать для вас макеты и взаимодействовать с Figma. Подробнее тут.

Запускаем cmd. Пишем claude. Пишем figma mcp. Следуем инструкции агента. В конце должна быть вот такая картина.

Теперь открываем нашу Figma и тестим. Выделяем фрейм или фреймы, с которыми хотим поработать, и копируем ссылку в боковой панели в режиме Dev Mode.

Вот пример такой работы. Был везде Иванов Иван Иванович.

Вариантов использования куча, но все это долго и дорого. Часто проще ручками или с помощью других подручных инструментов. Помним, что использование ИИ — это не самоцель. Это инструмент, и его нужно уметь использовать в тех случаях, где он действительно может пригодиться и хорошо справляется.

Так, с этим разобрались.

Теперь рассмотрим вариант взаимодействия через генерацию кода по вашему макету из Figma — а-ля Figma Make на максималках и с удобствами.

Рассмотрим на примере лендинга.

Перед всем этим делом наводим порядок в слоях, если там хаос. Понимаем, что HTML должен иметь структуру: заголовки, параграфы и т.д. Это язык разметки, и если у вас порядок в слоях, то ИИ лучше и точнее справится с разметкой.

Заходим в VS Code и сразу открываем вкладку Codex с правой стороны. Нажимаем на иконку нового чата — и понеслась.

Говорим создать папку с проектом и объясняем, что сейчас будете закидывать страницы из Figma для верстки лендинга. Он будет задавать вопросы — отвечайте. Следите за тем, что он делает. Если что — всегда можно его остановить и уточнить запрос.

Выделяем первый блок и закидываем его агенту в VS Code: копируем ссылку на конкретный фрейм.

Далее идем сверху вниз и по блокам. Декомпозируем работу. Уточняем место.

Лучше, чтобы у вас был опыт работы с HTML / CSS / JS. Так вы сможете мелочи править сами, пока агент работает над крупными или новыми кусками. Проще будет контролировать процесс и осознавать происходящее. Но навайбить можно и без этого.

Дальше вы уже сами сможете прикинуть, как и что можно использовать в своей работе.

Задача статьи — дать инструкцию для старта.

Удачи!