Figma продолжает стирать границы между дизайном, разработкой и управлением системами. Два новых инструмента — компоненты со слотами и сервер MCP — кардинально меняют подход к созданию и поддержке дизайн-систем, превращая их из статичных библиотек в динамичные и умные экосистемы.
1. Компоненты со слотами: гибкость без хаоса
Слоты — это прорыв в создании по-настоящему адаптивных компонентов. Представьте кнопку, в которую можно «вставить» иконку, аватар или любой другой элемент, разрешённый дизайн-системой. Это даёт дизайнерам творческую свободу, но в строгих рамках, заданных командой.
Что это меняет на практике:
• Дизайн становится ближе к коду: принцип работы идентичен слотам во Vue, React и других фреймворках. Это общий язык для дизайнеров и разработчиков, который ускоряет реализацию.
• Конец бесконечным вариациям: вместо десятков версий карточки (с аватаркой, без, с кнопкой, с иконкой) создаётся один универсальный компонент. Контент в слотах меняется, а структура и логика остаются.
• Контроль на уровне системы: вы определяете, какие именно компоненты можно вставлять в каждый слот. Дизайнер не сможет добавить неконтролируемый элемент, что гарантирует визуальную целостность.
Важно: слоты требуют продуманной архитектуры. Плохо спланированная система может усложнить, а не упростить работу. Инструмент идеален для сложных составных компонентов (карточки, шапки, модальные окна), но не подходит для простых атомарных элементов вроде иконок.
2. Сервер Figma MCP: ваш дизайн-ассистент на основе ИИ
Сервер MCP — это мост, который позволяет ИИ-помощникам (Claude, Cursor и др.) «видеть» и понимать вашу дизайн-систему напрямую из Figma. Больше не нужно вручную копировать токены или объяснять структуру — ИИ работает с актуальными данными.
Как это работает и что даёт:
• Автоматическая генерация кода: попросите ИИ создать React-компонент на основе макета — он использует реальные токены (цвета, шрифты, отступы) и соблюдает правила именования.
• Работа с дизайн-токенами: легко экспортируйте токены в CSS-переменные или конфиг для Style Dictionary, минуя ручное копирование.
• Умная документация: ИИ помогает создавать и обновлять описание компонентов, используя актуальные названия слоёв, свойства и связи.
Главные ограничения:
• ИИ работает с фрагментами (один компонент, а не целая страница).
• Он не «видит» интерактивность и логику, если они не описаны явно.
• Результаты всегда требуют проверки специалистом — ИИ ассистент, а не волшебник.
Практический совет: Начните с малого — подключите MCP к простому атомарному компоненту. Используйте токены вместо жёстко заданных значений, и ИИ сможет работать с вашим дизайном максимально эффективно.
Что проверять в компоненте Figma, созданном ИИ:
• Соответствие дизайн-системе: правильно ли использованы токены (переменные) для цветов, типографики, отступов?
• Все состояния: есть ли состояния hover, active, disabled, loading? ИИ часто генерирует только базовое состояние.
• Доступность: контрастность текста, размеры тап-зоны (минимум 44×44 px).
• Логика компонента: правильно ли работают варианты (properties) и вложенные компоненты?
• Авто-лейаут: настроены ли отступы и расстояния на Auto Layout корректно? Часто ИИ создаёт статичные фреймы.
Всегда рассматривайте результат ИИ как черновой набросок, требующий экспертной проверки и полировки.
Это самый продвинутый метод. Если компонент ведёт себя странно или вы не можете найти причину ошибки, ИИ может помочь с диагностикой.
Вместе эти инструменты представляют новую философию: дизайн-система должна быть умной, гибкой и самостоятельной. Слоты дают командам свободу в рамках системы, а сервер MCP автоматизирует рутину и минимизирует ошибки при передаче макетов в разработку.
Хотите сотрудничать с NetLabCS? Подписывайтесь на наш Telegram-канал и оставляйте заявку.