Система готова, всё красиво. Но через месяц ты откроешь проект и подумаешь: «А какой у меня был основной цвет? А отступы какие?» И начнёшь вспоминать. Или просить ИИ вспомнить.
Figma решает это одним движением. Открыл файл - вот все твои цвета, шрифты, кнопки, карточки. Всё перед глазами. Не надо ничего вспоминать, искать, переспрашивать.
Если не знаешь что такое Figma - это бесплатный онлайн-редактор для дизайна. Регистрация через Google-аккаунт, три минуты.
Как перенести цвета и шрифты:
1. Ставишь в Figma бесплатный плагин Tokens Studio for Figma (найдёшь в разделе плагинов, просто вбей название).
2. Просишь ИИ: «Сгенерируй мне JSON-файл с моими цветами, шрифтами и отступами для Tokens Studio». Он знает формат, справится.
3. Открываешь плагин в Figma, импортируешь этот файл.
4. Готово - все цвета и шрифты на месте.
Если какой-то из пунктов вызывает сложность - не беда, это нормально! Проси ИИ по шагам расписать:"Что делать". А если не можешь объяснить загвостку - просто шли скриншоты.
JSON - это просто текстовый файл со структурой. Тебе не нужно в нём разбираться, просто передай от ИИ в плагин.
ИИ может предложить вариант через HTML. Не трать время - я пробовал кучу раз, нормально не работает. Всегда были проблемы с отступами и позиционированием.
Путь, который реально сработал - это SVG-картинки. SVG - это формат изображений, который Figma отлично понимает.
Но есть важный момент. Если попросить ИИ нарисовать все элементы разом - он захлебнётся. Контекст может кончиться, начнёт путаться, что-то потеряет...
Поэтому делаем по кусочкам:
1. Проси ИИ разбить все элементы интерфейса на группы. Например, 10 групп: кнопки отдельно, поля ввода отдельно, карточки отдельно и так далее.
2. Генерируешь SVG-картинку для одной группы за раз.
3. Важно! В запросе сразу напиши: «Расставь правильные отступы и расстояния между элементами». Без этого есть большой шанс, что ИИ налепит всё друг на друга - это его слабое место.
4. Сохраняешь SVG-файл. Открывать его не нужно.
5. Перетаскиваешь файл прямо на страницу Figma. Или копируешь и вставляешь - Ctrl+V (Cmd+V на маке).
6. Повторяешь для остальных групп.
Да, это не «нажал кнопку - всё появилось». Но за один вечер ты соберёшь полноценный файл, в котором лежит весь твой визуал.
И самое главное, почему именно SVG, чтобы вставить блоками, а не картинкой.
Как я сделал у себя:
1. Обложка
2. Цвета
3. Типография
4. Отступы
5. Фича "Система лиг" (в процессе миграции в фигму)
Я ещё планирую улучшать стилистику и всё остальное и пересобирать дизайн, но для начала - это более чем достаточно.
Если есть вопросы или хочется поделиться мнением - буду рад почитать в комментариях! 😎