Урок 2. Figma и дизайн-система
Переходим из текста в Figma: структура продукта, вайрфреймы и дизайн-система на токенах.
Перед занятием
- Пройдена домашка первого урока: есть PRD продукта.
- Куплена Figma Pro.
- Подключён Figma MCP по директиве
level_02/directive_figma_mcp.md. Проверка: попросите агента «покажи, кто я в Figma». Если он назвал ваш аккаунт, всё работает.
Что будет на занятии
- Разбор PRD каждого.
- Что такое дизайн-токены и зачем они агенту.
- Практика: sitemap, вайрфреймы, дизайн-система.
Дизайн-токены за 5 минут
Токен — это именованное значение: цвет, размер, отступ, радиус. Вместо «синий #3B82F6» в макете стоит ссылка на токен.
Токены живут в двух слоях:
| Слой | Пример | Что значит |
|---|---|---|
| Primitive | blue/500 = #3B82F6 |
Палитра: какие вообще есть цвета и размеры |
| Semantic | color/action/primary → blue/500 |
Смысл: «основной цвет действия» |
Компоненты ссылаются только на смысловые токены. Захотели сменить основной цвет — меняете одну ссылку, и обновляется весь продукт.
В Figma токены хранятся как Variables, в двух коллекциях: Primitive и Semantic.
Зачем это агенту. Когда всё построено на токенах, агент не придумывает цвета «на глаз», а берёт их из системы. Поэтому экраны получаются консистентными, а перенос в код идёт один в один.
Своя дизайн-система или готовая
ds_baseline |
ds_scan |
|
|---|---|---|
| Когда | Пустой проект, хотите свою ДС | Есть готовая ДС: корпоративная или из Figma Community |
| Что делает | Задаёт 5 вопросов → токены → Variables → 5–7 базовых компонентов | Читает Variables и компоненты и делает из них индекс для агента |
| Результат | ds/foundation.md, ds/components.md + ДС в Figma |
ds/foundation.md, ds/components.md |
Для учебного проекта хорошо подходит ds_scan на готовой библиотеке из Community (Shadcn, Material, Gravity UI): так быстрее получить много компонентов.
Главное правило level_02
Сначала текст и ваше «да», потом Figma. Агент сначала показывает структуру в Markdown и ждёт подтверждения, а в Figma идёт только после этого. Так вызовы MCP не тратятся на черновики.
Практика на занятии
directive_prd_to_sitemap: из PRD получаем карту экранов и user flow.directive_wireframes: low-fi вайрфреймы 3–5 ключевых экранов.directive_ds_baselineилиdirective_ds_scan: дизайн-система.
Домашнее задание
| Директива | Что получится |
|---|---|
directive_grow_ui_kit |
Недостающие компоненты на тех же токенах |
directive_component_variants |
Все состояния и размеры компонентов |
directive_final_screens |
Финальные экраны из компонентов ДС, включая пустые состояния и загрузку |
directive_screens_audit |
Проверка экранов на консистентность |
Экраны можно собирать по одному: final_screens <ИмяЭкрана>. Так проще контролировать результат.