Figma учит агента работать по дизайн-системе: Guidelines, примеры и навыки
23 октября Figma опубликовала практическое руководство о том, как подключить дизайн-систему к своему ИИ-агенту. Главная мысль: агент собирает макеты в стиле продукта ровно настолько, насколько хорошо описана библиотека. Разбираем, что именно предлагает Figma и что это меняет для продуктовых команд.
Руководство написал продакт-менеджер Figma Уэйн Лин, оно вышло в блоге компании. Это продолжение анонсов конференции Config в Индии 14 октября: тогда Figma представила редактор Specs на Markdown, открыла бету Guidelines для опубликованных библиотек и вывела в открытую бету code layers — слои с кодом прямо на холсте, которые агент умеет превращать в рабочий интерфейс. Об этом подробно писал TechCrunch.
Новость важна не столько функциями, сколько сдвигом роли дизайн-системы. Раньше библиотеку читали люди: дизайнеры и фронтендеры. Теперь её читает ещё и агент, и всё, что в ней не записано явно, он додумывает сам. Директор по дизайну Figma Лоредана Крисан на Config привела показательную пропорцию: кода сейчас пишется в 17 раз больше, а релизов выходит только в 1,3 раза больше. Узкое место сместилось от скорости генерации к согласованности решений.
Для компаний, которые доводят такие макеты до продакшена, это та же задача, что и раньше, только острее: агент ускоряет сборку экранов, но без строгой системы компонентов и токенов разработка получает разнобой. Поэтому команды студии разработки веб-приложений YuSMP Group и другие подрядчики полного цикла начинают проект с ревизии библиотеки, а не с первых макетов.
Что такое Guidelines и куда их класть?
Guidelines — это текстовые файлы с инструкциями, прикреплённые к опубликованной библиотеке. Они остаются с библиотекой, и агент автоматически учитывает их в любом запросе, где библиотека подключена. Загружаются они через меню Library → Manage guidelines.
Figma советует записывать в Guidelines четыре вида знаний:
- правила, которым агент должен следовать всегда;
- исключения из этих правил;
- типичные ошибки и способы их исправить;
- как выбирать между похожими компонентами, вариантами и паттернами.
Есть оговорка: лучше всего Guidelines работают, когда агент собирает дизайн с нуля. Согласованность при правке уже существующих макетов Figma, по её словам, ещё улучшает.
Почему библиотека стала источником правды для агента?
Агент берёт компоненты из опубликованных библиотек, поэтому качество результата напрямую зависит от их устройства. Figma перечисляет, что делает библиотеку полезной для агента: осмысленные имена компонентов, заданные свойства и варианты, применённые переменные и переиспользуемые паттерны, которые показывают, как мелкие части складываются в целое. В запросе можно через @ упомянуть конкретный компонент или токен.
По сути это те же требования, которые Nielsen Norman Group давно предъявляет к зрелой дизайн-системе. Разница в цене ошибки: человек догадается, что «Button 2 copy» — это вторичная кнопка, агент — нет. Если цвета зашиты в компоненты вместо дизайн-токенов, агент воспроизведёт хаос в каждом новом экране.
Как работают примеры и навыки?
Кроме правил, агенту нужны образцы. Figma предлагает публиковать в библиотеке страницу Examples или помечать фреймы суффиксом _example (регистр важен). Пример готовой формы адреса доставки показывает агенту, как команда группирует поля и расставляет отступы, лучше любого текстового описания.
Навыки (skills) — переиспользуемые наборы инструкций, которые вызываются через «/» в чате. Figma приводит два примера:
/design-system-audit— проверяет экраны на отвязанные инстансы, захардкоженные значения, неверно применённые компоненты и пробелы в доступности;/analyze-components— ищет дубли компонентов, ошибки именования и разрывы связи с библиотекой.
Навыки можно публиковать для команды или всей организации. Агент доступен владельцам Full-мест на тарифах Professional, Organization, Enterprise и части образовательных; на Starter — ограниченно.
Что это значит для продуктовых команд?
Дизайн-система превращается из справочника в исполняемую спецификацию. Пробелы, которые раньше закрывались устной договорённостью на ревью, теперь всплывают в каждом сгенерированном экране. Особенно это касается состояний: если в библиотеке нет ошибки, загрузки и пустого состояния, агент их не нарисует — об этом наш чек-лист состояний компонента.
Второй эффект — доступность. Навык аудита ловит пробелы в доступности, но опирается на то, что заложено в библиотеку. Контраст, фокус и размеры целей по WCAG нужно зашить в токены и компоненты заранее, иначе агент масштабирует ошибку.
Что сделать уже сейчас?
- Переименуйте компоненты так, чтобы имя объясняло назначение, и уберите дубли.
- Переведите цвета, отступы и типографику на переменные.
- Запишите в Guidelines правила выбора между похожими компонентами и частые ошибки.
- Соберите 5–10 эталонных экранов и опубликуйте их как примеры.
- Заведите навык аудита и прогоняйте им каждый новый экран перед передачей в разработку.
Подробнее о том, где агенты реально ускоряют работу, а где мешают, — в нашем разборе ИИ в работе дизайнера.
Пишем об UX/UI-дизайне: исследования, интерфейсы, дизайн-системы и доступность.
