Как я пытаюсь выстроить связку Figma + Claude (часть 1)
Мечта любой команды разработки сейчас — автоматизировать сборку дизайна с помощью LLM, чтобы ускорить delivery-процесс. Я видел несколько разных подходов, но в итоге пришёл к чему-то, что, как мне кажется, должно сработать удобно
Рассказываю на примере проекта, где я на фрилансе (oversecured.com)
Дано:
- legacy-архитектура фронта, которую сложно масштабировать с LLM-кой
- отсутствие части макетов в Figma + неактуальность макетов
Что хотим:
- заиметь макеты в Figma, которые выступают как источник правды
- можно дать ссылку на макет, и LLM (Codex/Claude) его соберёт
- UI-kit/дизайн-система, которая полностью совпадает в Figma/code
Как мы решили это сделать:
1. Подключаем для кода open-source библиотеку компонентов shadcn (https://ui.shadcn.com/create). Компонентов там достаточно много + они гибкие (можно внутрь прокидывать много свойств). Это наша база, из которой мы будем собирать весь фронт
2. Берём для этой же библиотеки какой-то из Figma-файлов (вот здесь (https://ui.shadcn.com/docs/figma) есть несколько ссылок на файлы community, на них ссылается сам shadcn). Это наша вторая база, из которой мы будем собирать все макеты в Figma
Мы пока не придумываем дизайн и не собираем компоненты с нуля, чтобы ускориться на старте, — просто берём готовое решение.
3. Начинаем собирать макеты в Figma из компонентов, которые мы взяли в community. На скрине — дизайн
4. Дальше через Figma MCP мы можем отдавать нашему AI-агенту ссылку на макет и просить собрать дизайн с помощью компонентов shadcn (можно также использовать shadcn MCP (https://ui.shadcn.com/docs/mcp))
Для тех, кто еще не знает: MCP — это протокол, через который LLM общается с внешними тулами вроде Figma. Важно здесь отловить одну вещь: AI-агент должен вытаскивать из Figma не скриншот макета, а структуру страницы (для этого используются разные методы).
И всё — это работает. Простые страницы уже собираются верно на 95–100%, страницы посложнее пока тестируем
Первая задача — актуализировать весь фронт на новых гибких компонентах. Во второй части (когда я к ней подойду) я хочу иметь возможность стилизовать компонент в Figma и стащить дизайн на фронт, чтобы в коде он тоже стилизовался
В теории, проблемы тут быть не должно, потому что мы взяли в коде и в Figma одинаковую семантику токенов (и там и там shadcn) — то есть цвет в коде и цвет в Figma называются одинаково, например surface-default-100
Я уже предвижу некоторую сложность со стилизацией и со сборкой сложных экранов, так как в Figma компонент не всегда соответствует по пропсам тому, что есть на фронте в библиотеке shadcn (часть свойств может отсутствовать, часть — называться иначе). Тут потребуется немного ручной настройки и тюнинга компонентов в Figma
Часть 2 напишу, когда подойду к ней!
Macbook Pro Mockup by graphicsauce
Минималистичный мокап макбука для создания стильных презентаций вашего дизайна.
💻Скачать мокап💻
#мокапы
напоминаем чем будем заниматься 15-го числа ❤️
ностальгируем и приходим на воркшоп разбираться, как сделать такую стилизацию в блендере через композитинг и геоноды
15 мая в 19:00
регистрация
📱 Рисуем свет на шаре в иллюстраторе
В чём проблема создавать уникальные шрифтовые решения с помощью ИИ?
Можно же просто кинуть ему референс и вауля! У меня самой уже таких решений в портфолио хватает. Нормальный вариант.
В принципе, если вас не увлекают процессы в работе дизайнером, то это прям рабочий вариант. Дёшево и сердито.
У меня даже курс об этом есть за 3900
Прям да.
И всё же. Мда. Это хороший такой крепенький середнячковый вариант. Когда мы вообще не берём во внимание призвание и чисто выполняем функцию.
И готовы сражаться с усреднённым-однообразием ИИ решений и нелюбовью ИИ к кириллице
В придачу к лёгкости тут придёт страх, что любой может так же как и я. И это будет правдой. Ну, не прям – любой. Но почти любой.
Мне важно иметь выбор и опору на свои навыки. Я могу то, что многие не могут. Это не только отличает меня, но наполняет меня уверенностью, ощущением собственной аутентичности.
Я могу сделать шрифтовой лого в ИИ за 30 секунд.
Я могу создать вручную каждый штрих, каждый изгиб, каждую, простите, клюшку у буквы Л.
Я могу комбинировать ИИ и свои навыки.
Это даёт мне творческую свободу и профессиональную значимость.
В этом я вижу единственную перспективу для дизайнеров в 21 веке.
😎 Го в клуб тех, кто тоже может этим выпендриваться и наслаждаться?
Присоединиться к интенсиву “Это ЗНАК”
Задать Ксюше вопросик
Минутка UX:
Как пересматривают традицию и опыт дизайна курсора, дополняя его голосовыми командами и поддержкой ИИ. Часть внутренней разработки новых UX моделей в Coogle.
Полвека как был внедрен привычный нам дизайн курсора на экране и его базовые UX-сценарии.
Вышла публикация о проекте Центрального дома кино на e-architect — международном архитектурном ресурсе, основанном в Великобритании.
Запускаем новый конкурс Befree Co:Create HUB ТЕКСТ:ДРОП для всех, кто хочет увидеть свои принты в магазинах Befree по всей России ❤️
Для участия нужно:
придумать текст и сделать из него принт для футболки/лонга/худи и загрузить его на платформу Co:Create HUB. Это может быть мемная фраза или философская мысль, а может — просто послание креатора миру. Покажи дизайн этой фразы, каким его видишь именно ты!
Мы выберем 3 победителей, которые получат гонорары по 15 000 рублей и шанс воплотить свою мысль в коллекции Befree.
Дедлайн для подачи заявок на платформе cocreate.befree.ru — 25 мая;
А итоги подведем 10 июня.
💗 Напоминаем, что уже сегодня стартует наш бесплатный интенсив по нейросетям для дизайнеров
На интенсиве разберем, как использовать ИИ для реальных продуктовых задач: интерфейсов, структуры экранов и работы с UX.
Будем тестировать новый инструмент Stitch от Google, смотреть на качество генераций и учиться выстраивать работу с нейросетями как полноценный дизайн-процесс.
💙 Присоединяйтесь в боте
На эфире подарим токены для дополнительных генераций в Utopy.ai, а также вы получите практику и домашние задания