Когда Claude Code впервые что-то нарисовал в моём файле Figma, я подумала: это даст мне столько возможностей. Так и вышло. Теперь большая часть работы моего агента происходит именно в Figma: за два месяца на его Figma-скилл пришлось 480 из 528 вызовов скиллов. Подробнее о моём сетапе я рассказываю в статье Claude Code — не для кода.
Почему Figma, а не генерация картинок
Потому что мне нужен вектор. Сгенерированная картинка — это плоское изображение. А файл Figma — то, с чем я могу продолжать работать:
- Слои и настоящий текст. Я могу исправить опечатку, поменять цифру или перевести слайд, ничего не перерисовывая.
- Моя дизайн-система. Цвета, шрифты и компоненты берутся из моих токенов, поэтому каждая новая работа сочетается с прежними.
- Печать и веб из одного источника. Одни и те же фреймы экспортируются и в файлы для печати выставочных стендов, и в SVG для моего сайта.
- Всё остаётся в моих руках. Я могу открыть файл и сама изменить что угодно.
Что живёт в моей Figma
- Мой магазин Notion-шаблонов. В его дизайн-системе 55 переменных, 13 текстовых стилей и 6 наборов компонентов, а ещё обложки и схемы для первой волны блога из 28 статей, у каждой есть мобильная версия.
- Презентации компании на трёх языках. Одна презентация о контейнерных дата-центрах — это 15 слайдов на английском, русском и турецком, синхронизированных между собой.
- Выставочные стенды и печать. Панели стендов, баннеры, буклет-трифолд, ваучеры и сертификаты, экспортированные для печати.
- Этот сайт. Иконки разделов на главной странице zoyak.tech появились в Figma.
Магазин шаблонов — работа, которой я горжусь больше всего. Он очень хорош не только с точки зрения дизайна, но и по содержанию, и я планирую использовать его контент для собственной учёбы.
Цикл: агент делает черновик, я правлю, на сайт попадает моя версия
Агент никогда не отправляет дизайн прямо на сайт. Он рисует в моём файле, я смотрю, правлю руками, и только после этого результат экспортируется.
Иконки главной страницы — хороший пример. Агент нарисовал несколько вариантов рядом, я выбрала один и сама доработала детали, вплоть до того, что сделала тоньше блок страниц у книги на иконке Studies. SVG на сайте экспортированы из моих отредактированных фреймов, поэтому каждое изменение, которое я внесла руками, попало на сайт ровно таким, каким я его оставила.
Чему агенту пришлось научиться в Figma
Работать через Figma API — совсем не то же самое, что работать в Figma руками. Сейчас в памяти моего агента 17 заметок только про Figma. Несколько уроков:
- Ширину текста нужно измерять. Её нельзя угадать по количеству букв.
- Фреймы обрезают содержимое. Элемент, который «есть», может быть невидим.
- Прозрачность живёт в двух местах. Прозрачность заливки и прозрачность слоя — разные вещи.
- ID узлов устаревают. Ссылка, которая работала вчера, сегодня может указывать в пустоту.
- Логотипы не переносятся между файлами через API, поэтому их перерисовывают или копируют руками.
- У экспорта SVG есть свои причуды, поэтому экспорт проверяется до публикации.
- Анимации через API не сделать.
Мои правила для дизайна
Для всего визуального агент также следует правилам, которые я ему дала:
- Сначала показать в Figma, а не на живом сайте.
- Настоящие наборы иконок, никаких эмодзи, во всём, что уходит в публикацию.
- Если речь о конкретном инструменте, брать его настоящий логотип, перерисованный в моём стиле, а не метафору.
- Инфографика остаётся светлой и воздушной: бледные фоны, мягкие градиенты, один акцентный цвет.
Почему это важно
Вектор значит, что работа остаётся моей. Агент доводит меня до первой версии за минуты, а всё, что дальше, по-прежнему можно редактировать, ему или мне. Для человека, который мыслит визуально, но никогда не имел под рукой дизайн-команды, это и есть та возможность, которую я увидела в первый же день.