← Назад

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

design systems development

Дизайн-системы живут на стыке дизайна и кода. Компонент в Figma и компонент в React: это разные объекты с разной архитектурой. Дизайнер, который понимает обе стороны, проектирует системы, которые реально работают, не только в макете.

Разрыв, который дорого стоит

Дизайнер создаёт компонент в Figma: варианты, пропсы, стили. Разработчик получает его и переводит в код. Между этими двумя версиями есть разрыв. И чем больше он, тем дороже каждая итерация.

Дизайнер, который не понимает код, рискует проектировать компоненты, которые невозможно реализовать без костылей, требуют десятков вариантов вместо композиции, не масштабируются при добавлении новых случаев. Разработчик адаптирует, дизайнер не узнаёт результат, и доверие к системе падает.

Компоненты: пропсы и композиция

В коде компонент: это функция, которая принимает параметры и возвращает интерфейс. Кнопка с иконкой не отдельный вариант. Это кнопка, которая принимает иконку как параметр:

<Button icon={<IconPlus />}>
  Добавить
</Button>

Одна кнопка, бесконечное количество комбинаций. В Figma долгое время для каждой комбинации нужен был отдельный вариант или instance swap. Библиотека разрасталась, поддержка усложнялась.

Понимание этого принципа меняет то, как вы проектируете: вместо «какие варианты создать» вы думаете «какие параметры компонент принимает».

Слоты: дизайн догоняет код

В 2025 году Figma выпустила слоты, и это фундаментальное изменение. Слоты позволяют вставлять любой контент внутрь компонента без открепления. Модалка принимает любое содержимое. Карточка: любой набор элементов. Список: любое количество пунктов.

Это именно то, как компоненты работают в коде. React-компонент <Modal> принимает children, любой контент внутри. Слоты в Figma и есть children в дизайне.

Nathan Curtis описывает миграцию на слоты как архитектурное решение, а не просто замену одного элемента другим. Для каждого компонента нужно решить: где оставить пропсы, а где дать слот. Какой контент показывать по умолчанию. Как ограничить, что можно вставить. Это решения, которые требуют понимания и дизайна, и кода.

Токены: не просто цвета

CSS-переменные вроде --color-primary, --space-200 не просто синонимы HEX-кодов. Это слой абстракции, который позволяет менять тему одним переключением, поддерживать тёмный режим без правок в компонентах, обеспечивать консистентность автоматически.

:root {
  --color-text: #171717;
  --color-bg: #fafafa;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #ededed;
    --color-bg: #0a0a0a;
  }
}

Компоненты ссылаются на переменные, а не на конкретные значения. Тема меняется, компоненты подхватывают автоматически.

Дизайнер, который понимает, как это работает, проектирует токены, которые ложатся в код без трансляции. Не «Primary Blue 500», а --color-interactive, с понятным назначением и правильным уровнем абстракции.

Code Connect: мост становится короче

Figma Code Connect связывает компонент в Figma напрямую с его реализацией в коде. Разработчик открывает Dev Mode и видит не абстрактные пропсы из Figma, а реальный код компонента.

Слоты поддерживаются в Code Connect, и инженеры сразу видят, как компонент со слотами маппится на production. Хэндофф становится предсказуемым.

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

AI как мост

Отдельная тема: AI-инструменты. Cursor и Claude позволяют дизайнеру прототипировать в коде без глубокого знания фреймворков. Вы описываете компонент, AI пишет код. Но чтобы оценить результат, направить AI и поправить детали, нужно понимать основы.

Это не про «научиться писать production-код». Это про достаточное понимание, чтобы проверять идеи до передачи в разработку и говорить с инженерами на одном языке.

Практическая польза

С чего начать

Не нужно учить React или писать production-код. Достаточно четырёх шагов:

Дизайн-системы движутся к полному слиянию дизайна и кода. Слоты, Code Connect, AI-агенты: всё это сокращает разрыв. Дизайнер, который понимает обе стороны, не просто полезнее. Он проектирует системы, которые переживают смену инструментов.