Для связи:

andrew.antoshkin@gmail.com
Статьи

Зачем дизайнеру дизайн‑систем разбираться в разработке в 2026 году

design systems Figma Slots Code Connect

Актуально на 21 августа 2026 года. Дизайнеру дизайн-систем не обязательно становиться frontend-разработчиком. Но без понимания layout, component API, tokens, accessibility и проверки изменений трудно проектировать систему, которая одинаково работает в Figma и production.

Разрыв между Figma и кодом никуда не исчез

Компонент в Figma и компонент в React, SwiftUI или Compose — разные объекты. Они могут описывать один интерфейс, но имеют разные ограничения, lifecycle и способы композиции.

Макет не показывает автоматически:

  • семантику HTML и accessibility tree;
  • keyboard interaction и focus management;
  • loading, empty, error и permission states;
  • локализацию, длинный контент и форматирование данных;
  • границы API и ответственность компонентов;
  • производительность и стоимость зависимости.

Поэтому «пиксель в пиксель» недостаточно. Дизайнер системы должен уметь обсуждать поведение, а не только внешний вид.

Props, state и composition

В React компонент получает props и возвращает UI. Вложенный JSX передаётся через prop children:

function Card({ children }) {
  return <div className="card">{children}</div>
}

<Card>
  <Avatar />
  <p>Профиль пользователя</p>
</Card>

Это не означает, что любой component API должен быть максимально свободным. Иногда нужен children, иногда именованные content props, иногда строгое подмножество дочерних компонентов. Понимание кода помогает выбрать осознанный уровень гибкости вместо бесконечного component set.

Figma Slots: что это на самом деле

Native Slots вышли в general availability в июне 2026 года, а не в 2025-м. Slot — один из пяти типов component properties в Figma наряду с boolean, instance swap, text и variant properties.

Slot создаёт гибкую область внутри component instance. В неё можно добавлять, редактировать и переставлять контент без detach. Можно задать default content, preferred instances, minimum и maximum layer count и другие slot settings. Slots доступны в Figma Design на всех планах; создавать их может пользователь с правом редактирования файла.

Это похоже на children или content slot в коде, но не полный эквивалент:

  • Figma Slot управляет редактированием слоёв внутри instance;
  • кодовый API управляет типами, данными, состоянием и runtime-поведением;
  • визуально допустимая композиция может быть семантически неправильной;
  • ограничения slot не заменяют type system и тесты.

Когда Slot, instance swap или variant

  • Variant — для ограниченного набора состояний или типов: size, tone, state.
  • Instance swap — когда нужно заменить конкретный вложенный компонент из контролируемого набора.
  • Slot — когда область должна принимать разный порядок и состав контента: body модалки, список действий, содержимое карточки.

Не мигрируйте всё на Slots. Чем свободнее область, тем больше ответственности у пользователя библиотеки. Для status icon или leading action instance swap часто безопаснее.

Code Connect и Slots

Code Connect умеет маппить native Slot на композицию в коде. С 17 августа 2026 единственный активно поддерживаемый формат — framework-agnostic template files .figma.ts. В них Slot читается через getSlot(); старый figma.slot() относится к legacy React/HTML parsers.

// url=https://figma.com/design/...?node-id=123
// source=src/components/Card.tsx
// component=Card

import figma from 'figma'

const content = figma.selectedInstance.getSlot('Content')

export default {
  example: figma.code`<Card>${content}</Card>`,
  imports: ['import { Card } from "@company/ui"'],
  id: 'card',
}

Есть важное ограничение: по умолчанию Dev Mode показывает slot как кликабельную ссылку, а не разворачивает весь вложенный код. connectedInstances может вывести непосредственно вложенные code-connected components, но lookup поверхностный: текст, обычные слои, неподключённые и глубоко вложенные instances опускаются. Remote Figma MCP при этом может пройти внутрь slot и получить layout и nested content.

Tokens: стабильный формат появился

Design token — не просто имя для HEX. Он задаёт устойчивую ссылку между намерением и платформенным значением. Semantic token вроде color.text.muted позволяет менять theme или contrast mode без переписывания компонентов.

В октябре 2025 года DTCG опубликовала первую стабильную спецификацию 2025.10. Это важный шаг к обмену токенами между инструментами, но не W3C Standard и не гарантия, что Figma, ваш transformer и все платформы одинаково поддерживают каждый тип.

Практический вывод для дизайнера:

  • разделяйте primitive, semantic и component tokens только там, где это оправдано;
  • не дублируйте values вручную между Figma и репозиторием;
  • фиксируйте modes, aliases и fallback-поведение;
  • проверяйте generated outputs на каждой целевой платформе;
  • не называйте произвольный JSON «DTCG-compatible» без валидации.

Code Connect: не магическая синхронизация

Code Connect связывает library component в Figma с компонентом в репозитории. Template files не привязаны к фреймворку: один TypeScript-шаблон может формировать snippet для React, Web Components, SwiftUI, Compose или другого языка. Framework-specific parsers остаются доступными в старых версиях CLI, но больше не поддерживаются.

Code Connect UI проще: он работает внутри Figma и подключается к GitHub, чтобы сопоставить дизайн и код для MCP. Но UI-mapping не показывает кастомный snippet в Inspect — для этого нужен CLI.

Ни UI, ни CLI не обеспечивают двустороннюю синхронизацию API автоматически. Если prop переименован, вариант удалён или поведение изменилось, mapping и документацию нужно обновить и проверить.

AI ускоряет исполнение, но не принимает продуктовые решения

Cursor, Claude Code и другие агенты могут изучить репозиторий, получить Figma-контекст через MCP, изменить файлы и запустить проверки. Это позволяет дизайнеру быстрее собрать working prototype или проверить решение в реальном layout.

Но агент не знает автоматически:

  • какое поведение продукта считается правильным;
  • какой компонент canonical;
  • допустима ли новая зависимость;
  • соответствует ли интерфейс требованиям accessibility;
  • какие компромиссы важны для команды.

Чтобы оценивать результат, дизайнеру нужны основы браузера и кода. Иначе AI превращает непроверенное предположение в убедительно выглядящий diff.

Что дизайнеру действительно стоит изучить

  1. HTML и семантику. Элементы, формы, headings, landmarks, accessible names.
  2. CSS layout. Box model, flex, grid, intrinsic sizing, overflow, container и media queries.
  3. Accessibility. Keyboard, focus, contrast, reduced motion, screen-reader basics.
  4. Component API. Props, state, composition, controlled и uncontrolled patterns.
  5. Tokens. Aliases, modes, semantic naming, transformation и platform outputs.
  6. Git и review. Branch, diff, commit, pull request, conflicts.
  7. DevTools и tests. Inspect, computed styles, responsive mode, console, network, visual и interaction tests.

React не обязателен, если ваша команда использует другую платформу. Важно понимать модель целевой среды, а не заучивать один фреймворк.

Практика на одном компоненте

Возьмите компонент со средней сложностью — например, Dialog или Card — и пройдите полный цикл:

  1. опишите назначение и неподходящие сценарии;
  2. выберите variants, swaps и slots в Figma;
  3. сопоставьте их с кодовым API;
  4. задайте tokens и responsive behavior;
  5. добавьте focus, keyboard и error states;
  6. свяжите через Code Connect;
  7. проверьте реализацию в Storybook или приложении;
  8. обновите документацию в том же pull request.

Вывод

Разбираться в разработке — не значит самостоятельно писать весь production-код. Это значит проектировать component API, видеть ограничения платформы, проверять реализацию и обсуждать решения с инженерами без потери смысла.

Slots, Code Connect, MCP и AI сокращают механический разрыв между Figma и кодом. Архитектурный разрыв они не закрывают. Его закрывает команда, которая договорилась об источниках правды, контрактах и проверках.

Источники