Как разделить компоненты и стили на две отдельные (но связанные) командные библиотеки?

Question

[rivrkat]

Здравствуйте.

В данный момент есть библиотека в которой есть стили и компоненты. Следовательно к проектам подключается эта библиотека и из нее берутся компоненты и стили.

Сейчас задумка такова... Будет одна библиотека компонентов (кнопки, инпуты и тд.) и много разных библиотек стилей (цвета, тени, фрифты и тд) под разные проекты. Мы делаем все проекты на нашей библиотеке компонентов, но у клиентов есть свои фирменные цвета, шрифты и тд., по этому и под каждый проект создается отдельная библиотека стилей.

Как это лучше всего реализовать и использовать в Figma? Может кто-то уже работает по похожей схеме? Подскажите как это лучше реализовать.

Answer 1

[Михаил Проскурин]

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

- Главный файл "Desing-system" - состоит из базовых элементов, которые будут иметь один вид во всех проектах
- - Главный файл фирменного стиля - цвета, шрифты, тени и т.д..
- - - Главный UI-kit конкретного проекта 1
- - - Главный UI-kit конкретного проекта 2
- - - Главный UI-kit конкретного проекта 3
- - - И т.д...

Можно разбивать все на более сложные структуры, но главная мысль в том, что библиотеки можно разбивать на разные файлы, и они могут унаследовать стили друг-друга.

Чтобы было более понятно, почитайте о том, как это сделали в Dropbox:
https://ux.pub/istoriya-o-tom-kak-dropbox-pereshel...

Comments

[rivrkat]

Можно разбивать все на более сложные структуры, но главная мысль в том, что библиотеки можно разбивать на разные файлы, и они могут унаследовать стили друг-друга.

Это как? Если опубликовать библиотеку, она же не наследует библиотеку которая подключена к ней. Не совсем понятно.

[Михаил Проскурин]

rivrkat, почему не может? Вы создаете один файл с дизайн-системой, публикуете компоненты, из другого файла достаете эти компоненты и вставляете во вторую категорию UI-кита, и потом с этого UI-кита тоже публикуете компоненты.

[rivrkat]

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

[Михаил Проскурин]

С недавних пор, в фигме можно делать компонент в компоненте



Вы создаете мелкие элементы (атомы), в одном файле, а более целостные элементы (организмы) - в другом.

Организмы состоят из компонентов атомов, и тоже становятся компонентами.

Почитайте про атомарную дизайн-систему.