В этой статье
Создать библиотеку
Стили и компоненты готовы, адаптивность настроена, предусмотрены все варианты. Как теперь сделать из этого всего библиотеку и раздать всем нуждающимся?
Опубликовать стили
Для начала из стилей надо создать библиотеку и опубликовать ее. Это можно сделать двумя способами:
1. Рядом с названием проекта есть выпадающий список, в котором нужно выбрать пункт Publish stiles & components.
2. В левой панели находится вкладка Asses, а в ней иконка в виде книжки. Это и есть работа с библиотеками.
Можно выбрать стили которые хочется опубликовать, а также добавить описание библиотеки. По окончании настроек большая синяя кнопка Publish Stiles закончит начатое.
Библиотека опубликована. В общем списке библиотек она будет называться по названию самого проекта.
Подключить библиотеку
Окей, библиотека опубликована, что дальше?
Теперь она будет доступна для любого другого проекта, но для этого ее надо подключить.
В этом самом любом другом проекте, нужно найти в левой панели вкладку Assets, иконку книжки и в списке опубликованных библиотек найти ту, которая нам нужна. При желании можно перейти и посмотреть какие стили в нее входят, а добавить саму библиотеку в проект можно просто нажав на тоггл.
После подключения библиотеки, все ее стили отображаются в правой панели и можно спокойно начать их использовать. Ничто не мешает создавать и новые. Но следует остерегаться большой мешанины, новые стили не добавятся к используемой библиотеке, они локальны конкретно для этого проекта.
Если использование стиля нужно в одном-двух местах и библиотека не нужна, стиль (стили) можно и просто скопировать. Для этого выбираем объект, нажимаем Ctrl + Alt + C, все стили данного объекта скопированы. Переходим на другой объект и просто нажимаем Ctrl + Alt + V, стили применены. Кстати, подобное копирование стиля работает не только в Figma, но и во многих других редакторах.
Редактирование и переиспользование библиотек
Стиль безусловно можно менять. При попытке это сделать в проекте, в котором применена готовая библиотека, будет предложен выбор — отредактировать первоисточник или же отредактировать текущий стиль. В первом случае все довольно очевидно, а на втором можно задержаться.
При редактировании стиля локально, он пропадет из библиотеки к которой первоначально относился и создастся в библиотеке текущего проекта.
После внесения изменений в стиле, все проекты, в которых он используется предложат обновить библиотеки. При обновлении все цвета приобретут новый оттенок, а к проекту подключится новая библиотека с измененным стилем, в случае, если вы настраивали новый стиль не в первоначальном проекте.
Удаление библиотек
Может случится и так, что библиотека больше не понадобится, а в списке доступных она всегда есть и мозолит глаза. Чтобы этого не происходило, ее можно удалить — “разопубликовать”, так сказать.
Для этого необходимо перейти в проект, в котором библиотека была создана. Затем открыть список библиотек. Точно так же, как когда хотели их подключить. И в списке библиотек нажать на стрелочку, провалившись в подробности. Тут и будет находиться заветная кнопка Unpublish. После подтверждения своих действий, настроенные в проекте стили и компоненты никуда не денутся, но самой библиотеки уже не будет среди доступных.
Коротко о главном
Приведем примеры нескольких интересных и хороших библиотек от крупных компаний
Не всегда бывает понятно что имел в виду автор и как должен работать тот или иной элемент. Чтобы снизить путаницу и избежать недопониманий,
VK оформил комментарии, которые удобно читать и сложно пропустить.
Помимо создания большого количества компонентов со всеми состояниями, добавлены внешние ссылки на документацию. Данной библиотекой удобно пользоваться как дизайнерам, так и разработчикам.
Почти все элементы не проcто зозданы в рамках библиотеки, но и, в качестве примеров, применены к реальным кейсам. Становится понятно как и
в каком случае их применять.
Удобное описание каждого раздела. Какие элементы представлены на странице, зачем это нужно и как использовать.
Еще больше библиотек, а также другой полезной информации, можно найти в клубе отечественных дизайн-систем. Более 10 компаний подготовили удобную документацию для разработчиков и дизайнеров.
Библиотеки сэкономят кучу времени, нервов и сил. С помощью стилей, компонентов, вариантов и auto layout можно свести к минимуму время, необходимое для подготовки и сконцентрироваться на анализе и более детальной проработке макетов. Теперь вы сможете самостоятельно создать все необходимое для работы.
