Организация библиотек компонентов: Публикация и совместное использование

Вы уже умеете создавать и называть мастер-компоненты. Отлично! Теперь разберёмся, как делиться ими с командой и управлять ими в проекте. Публикация компонентов в библиотеку — это фундамент для единой и консистентной дизайн-системы.

Что такое библиотека компонентов в Figma?

Библиотека компонентов в Figma — это центральное хранилище ваших мастер-компонентов, стилей (цветов, шрифтов, эффектов, сеток) и переменных. Всё это доступно и используется в других файлах Figma. Зачем это нужно?

• Консистентность: Всегда используйте актуальные версии компонентов и стилей.
• Скорость: Не создавайте элементы заново. Просто перетаскивайте их из библиотеки.
• Простота обновлений: Измените мастер-компонент в библиотеке — и все его копии в других файлах обновятся.
• Командная работа: У каждого члена команды есть доступ к единому источнику правды.

Публикуем компоненты в библиотеку

Процесс публикации прост:

1. Откройте файл с компонентами. Убедитесь, что все нужные мастер-компоненты находятся здесь.
2. Перейдите в Assets Panel. Нажмите вкладку Assets на левой боковой панели.
3. Нажмите на иконку "Team Library". Это иконка в виде книги с плюсом (или просто книга, если библиотека уже подключена).
4. Выберите файл для публикации. В появившемся окне найдите текущий файл и включите переключатель рядом с ним. Если публикуете впервые, появится кнопка Publish.
5. Добавьте описание изменений (рекомендуется). В поле "Description" кратко опишите, что нового или изменено. Это помогает отслеживать историю. Например: "Добавили кнопки, обновили инпуты".
6. Нажмите "Publish". Figma опубликует все мастер-компоненты и стили из этого файла в командную библиотеку.

Совет: Публикуйте библиотеку, только когда уверены в стабильности компонентов. Частые публикации с мелкими изменениями могут сбить команду с толку.

Используем библиотеки в других файлах

После публикации компоненты доступны в любом другом файле вашей команды:

1. Откройте новый или существующий файл Figma.
2. Перейдите в Assets Panel (вкладка Assets).
3. Нажмите на иконку "Team Library" (книга).
4. Включите нужные библиотеки. В списке "Team Libraries" найдите опубликованную библиотеку и активируйте переключатель.
5. Используйте компоненты. Теперь вы можете перетаскивать компоненты из Assets Panel прямо на холст.

Обновляем компоненты из библиотеки

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

1. Уведомление: В правом нижнем углу Figma появится синяя точка на иконке "Team Library" и сообщение "Updates available".
2. Просмотр и применение: Нажмите на уведомление. Вы увидите список изменений. Можете выбрать, какие обновления применить, или применить все сразу.
3. Нажмите "Review" или "Update all". После просмотра нажмите "Update all" для применения изменений.

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

Лучшие практики организации библиотек

• Разделяйте библиотеки по функционалу:
  • Core Library: Базовые стили (цвета, шрифты, сетки), иконки, атомарные компоненты (кнопки, поля ввода).
  • Components Library: Более сложные компоненты (карточки, навигация, модальные окна).
  • Brand Assets: Логотипы, иллюстрации, фотографии.
• Используйте отдельные файлы для библиотек. Не смешивайте рабочие макеты с мастер-компонентами библиотеки. Создайте отдельный файл, например, Design System - Core или UI Kit - Components.
• Чёткое именование файлов. Называйте файлы библиотек понятно, чтобы команда легко их находила (например, [DS] Core Styles & Atoms, [DS] Molecules & Organisms).
• Документирование. Мы поговорим об этом подробнее позже, но уже сейчас начинайте думать, как описывать компоненты внутри файла библиотеки (например, на отдельной странице).

Организация библиотек компонентов — это фундамент для масштабируемой и эффективной дизайн-системы. В следующем разделе мы углубимся в создание сложных компонентов, используя Variants. Это позволит вам создавать невероятно гибкие и мощные элементы интерфейса.