Дизайн-система и библиотека компонентов команды

Из чего собирается дизайн-система

Дизайн-система в Morfa — это обычный файл, опубликованный как библиотека. Начать можно с шаблона «UI-кит»: в нём кнопки, поля, теги и другие компоненты со стилями. Что такое дизайн-система в целом, объясняет статья словаря о дизайн-системе.

Переменные: палитра, семантика и режимы

Удобная схема — два уровня. В коллекции «Палитра» лежат исходные значения, например все оттенки синего. В коллекции «Тема» — смысловые переменные вроде «Фон/Страница» и «Текст/Основной»: через «Сослаться на переменную» они берут значения из палитры, причём в режимах «Светлая» и «Тёмная» ссылаются на разные оттенки.

Режим выбирается на фрейме: у выделенного фрейма во вкладке «Дизайн» есть раздел «Переменные» со списком режимов для каждой коллекции, а вариант «Авто» берёт режим родителя. Поэтому тёмный экран не требует копии. В коллекции до 100 режимов, и их число от плана не зависит. Как собрать тему по шагам, показывает гайд тёмная тема в макете.

Стили: что не помещается в переменные

У переменных четыре типа: «Цвет», «Число», «Строка» и «Логическое», а к свойствам слоёв привязываются цвета и числа — размеры, отступы, скругление, непрозрачность. Составные значения поэтому хранят стили. «Стили текста» держат шрифт, размер, межстрочный и межбуквенный интервалы, «Стили эффектов» — тени и размытия, «Стили сетки» — сетки макета, а «Стили цвета» — сплошные цвета и градиенты.

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

Компоненты: свойства, варианты и состояния

Компонент создаётся командой «Создать компонент» (⌥⌘K), варианты — через «Объединить как варианты» или «Добавить вариант», вместе они образуют «Набор вариантов». Пошагово на примере — в гайде кнопка с вариантами.

• Типы свойств: «Вариант» переключает вид и состояние, «Логическое» показывает или прячет слой, «Текст» подставляет подпись, «Замена экземпляра» меняет вложенный компонент.
• Для замены экземпляра задайте «Предпочтительные значения» — список компонентов, которыми её стоит менять, например только иконки системы.
• «Свойства вложенных экземпляров» выводят свойства вложенной кнопки или иконки на уровень родительского экземпляра.
• Описание компонента хранит правило использования прямо в файле.
• Варианты состояния называйте «Наведение», «Нажата», «Фокус» и «Отключена»: в коде они станут :hover, :active, :focus-visible и :disabled.

Библиотека компонентов для команды: публикация и обновления

Библиотека — это опубликованный снимок файла: компоненты, наборы вариантов, стили и коллекции переменных. Правки в исходном файле доходят до команды только после новой публикации, и каждый участник сам решает, когда их принять. В подключённых файлах коллекции переменных из библиотеки только для чтения: их значения меняют в файле библиотеки.

1. 1

   Опубликуйте

   Выберите «Файл → Опубликовать библиотеку…» и опишите выпуск в поле «Что изменилось».

2. 2

   Подключите

   Участники открывают «Библиотеки» (кнопка-книга в «Ассетах») и включают библиотеку в своём файле.

3. 3

   Дождитесь сообщения

   После новой публикации в подключённых файлах появится сообщение «Доступны обновления библиотеки…».

4. 4

   Сравните и примените

   В окне «Обновления библиотек» видно, что было и что стало. Нажмите «Обновить» или «Обновить все».

Токены и компоненты в коде

Разработчик открывает файл системы в режиме «Код» (⇧D). Холст там только для просмотра, раздел «Стили и переменные» показывает предложенные токены, а в настройках есть «Подставлять токены» и единицы px или rem. Роль «Разработчик» бесплатна и не занимает место редактора. Что такое токены, объясняет словарь: дизайн-токены.

«Экспорт в React…» из меню «Файл» собирает проект на Vite, React 19 и TypeScript 5.9 с файлами src/tokens.css и src/tokens.ts, а при оформлении на Tailwind CSS 4 — ещё и src/theme.css. Режимы включаются атрибутом, например data-theme="dark", свойства компонентов становятся пропсами, а варианты — union-типами.

export const tokens = {
  /** Фон/Страница */
  colorBackgroundPage: 'var(--color-background-page)',
  /** Текст/Основной */
  colorTextPrimary: 'var(--color-text-primary)',
  /** Заголовки/H1 */
  fontHeadingH1: 'var(--font-heading-h1)',
} as const;

export type TokenName = keyof typeof tokens;

/** Режимы коллекции «Тема»: атрибут data-theme. */
export const themeModes = ['light', 'dark'] as const;

Кто ведёт систему: места редакторов и пределы

Из участников команды править её файлы — и саму систему, и экраны, где используются её компоненты, — могут только роли с местом редактора: Владелец, Администратор и Редактор. В бесплатной команде до 2 редакторов, владелец тоже считается.

Когда оба места заняты, третьего редактора не добавить: роль Редактора или Администратора больше никому не выдаётся, а по приглашению с такой ролью человек войдёт, только когда место освободится. Разработчик и Наблюдатель мест не занимают: они смотрят файлы, комментируют и экспортируют, а Разработчик ещё открывает «Код». Оплата мест в команде откроется позже.

Файлы системы считаются в лимите команды: на плане «Бесплатный» это 10 файлов и 1 ГБ под картинки. Роли целиком описаны на странице студии и команды.

Чего пока нет

Ограничения, которые стоит проверить до того, как система ляжет в основу проектов.

• Веток (branching): перед рискованной правкой сохраните версию (⌥⌘S) или создайте копию файла из меню версии.
• Публичных библиотек и сообщества, как Community в Figma.
• Переменных и условий в прототипах.
• Статуса «Ready for dev», своих категорий аннотаций и кода для iOS, Android и Vue.
• Плагинов, интеграций и API, чтобы синхронизировать токены с репозиторием.
• Переноса переменных из Figma: приходят только текущие значения, коллекцию с режимами собирают заново.