Figma Make: как править код через панель свойств и аннотации
Main chat
A chat for vibe coders: news, guides, live cases, marketplace, and finding executors.
Figma Make: как править код через панель свойств и аннотации
Figma добавила в Make два новых способа работать с AI-сгенерированным интерфейсом: панель свойств для точных визуальных изменений и аннотации на холсте для задач, которые удобнее объяснить, чем накрутить ручками. Это не очередной режим промптинга. Идея в том, чтобы дизайнер мог указать агенту на конкретный объект, изменить параметры знакомыми контролами и проверить набор правок до применения к коду.
Обновление развивает более практичный сценарий design-to-code: не просить модель «сделать карточки чуть компактнее», а выбрать карточки, поменять отступ, радиус или типографику и увидеть, какие изменения готовятся.
Панель свойств: привычные контролы поверх работающего интерфейса
В режиме редактирования Figma Make теперь выводит панель свойств для выбранного элемента. Через неё можно менять spacing, типографику, layout, opacity, z-index и border style, перетаскивать элементы и переупорядочивать их. Для кода это выглядит как визуальный слой управления: дизайнер меняет параметр на холсте, а Make готовит соответствующую правку исходников.
Важная деталь: Make показывает DOM-дерево. Это помогает не гадать, какой именно слой отвечает за элемент в интерфейсе, и выбрать сразу все одинаковые экземпляры для массового обновления. В работе с длинной страницей или повторяющимися карточками это заметно полезнее, чем серия однотипных запросов к модели.
Изменения не применяются в код мгновенно. Они сначала собираются в панели чата, где их можно просмотреть, оставить или удалить. Пока правки не применены, они не расходуют кредиты. После подтверждения Make обновляет файл и создаёт новую версию. Такой staging важен: визуальный эксперимент не превращается в необратимое изменение реализации.
Аннотации: когда нужно описать поведение, а не значение свойства
Не все задачи укладываются в поля панели. Для взаимодействий, анимации и нескольких связанных элементов Figma добавила аннотации. В режиме «Annotate for agent» можно отметить на холсте область, написать контекст и отправить его агенту.
Например, вместо общего запроса «сделай интерфейс живее» можно пометить миниатюру и указать: при наведении она слегка увеличивается. Или выделить кнопку и попросить добавить короткий press effect. Агент получает не только текст, но и точный адрес изменения в интерфейсе.
Это небольшая, но принципиальная смена интерфейса для AI. Чем меньше модели приходится искать нужный элемент и угадывать границы задачи, тем короче итерация и тем проще проверить результат. Аннотация здесь работает как дизайн-комментарий, который сразу становится техническим заданием для кода.
Почему это важно для handoff
Обычный разрыв между дизайном и кодом начинается после первого прототипа. Макет уже выглядит правильно, но дальше появляется цепочка: комментарий, задача, уточнение, правка, проверка. Figma Make пытается сократить эту петлю: дизайнер редактирует работающий интерфейс теми же категориями, которыми привык мыслить в Figma, а изменения доходят до кода в контролируемом виде.
Это не отменяет дизайн-систему и код-ревью. Наоборот, новый способ особенно полезен там, где уже есть правила. Сейчас панель использует цветовые и типографические токены, определённые в кодовой базе. Figma отдельно отмечает, что связь с компонентами Figma Design через Code Connect ещё только готовится. Значит, команде по-прежнему нужно проверять, что быстрые визуальные правки не обходят компонентные контракты.
Как попробовать в реальном проекте
Начать стоит не с целого продукта, а с одного сценария: экран настройки, каталог, форма или лендинг с повторяющимися блоками. Сначала выберите визуальную правку с ясным критерием качества, например единый вертикальный ритм или компактный вариант карточки. Затем проверьте, что Make изменил именно те элементы, которые были выбраны, и только после этого применяйте набор правок.
Аннотации лучше оставлять для задач, где важны поведение и контекст: hover-состояния, порядок появления, переходы между экранами, правило для нескольких связанных блоков. Формулировка должна описывать наблюдаемый результат, а не предполагаемую реализацию: «покажи фильтр после выбора категории» полезнее, чем «добавь обработчик события».
Ограничения на старте
Панель свойств работает только в новых дизайнах Make; созданные раньше файлы остаются на прежнем инструменте редактирования. Обе функции расходуют кредиты после применения изменений. Поэтому обновление не делает генерацию бесплатной, но даёт больше контроля над тем, на что именно тратится бюджет.
Главный вывод для дизайнеров простой: точность в AI-воркфлоу всё чаще достигается не длинным промптом, а хорошим интерфейсом указания. Панель свойств задаёт параметры напрямую, аннотация фиксирует намерение в нужном месте, а staged-правки оставляют за человеком последнее слово перед изменением кода.
