🌈Дизайн система в 🎨FIgma очень быстро.
Дизайн-система — набор компонентов, правил, предписаний и инструментов для повышения качества и скорости разработки продуктов, а также эффективной поддержки существующих.
Рассмотрим идеальную ситуацию когда мы строим систему с нуля. Для начала нам нужно минимум: стили текста, цвета, базовая мера.
Запустим плагин для генерации страниц и разделов дизайн системы
Первым запускаем Create Pages System
Плагин создал страницы для дизайн системы.
📜 Стили текста
Откроем страницу 0 - Typography
Запустим плагин Design System Basics с опцией Add Draft Frame сгенирируется фрейм в который мы вложим следующий результат генератора шрифтового скейла.
https://www.figma.com/community/plugin/739825414752646970
В качестве основы выбираем 14 или 16 это золотой стандарт подходящий в большинстве случаев.
14 или 16 – это размер основного текста. Чаще всего это <body>.
Соответственно все что выше <body> будут размеры для элементов стоящих выше по информационной иерархии, например надписи кнопок, заголовков.
Стили ниже <body> можно использовать для подписей, пояснений и т.д.
Конечно легче работать с целыми значениями. Хотя разработчики могут и выстроить этот же скейл в приложении путем умножения базы (16) на фактор (1.250) Решать вам.
📝 Названия для стилей
Начнем создавать стили из набора который нам предоставил генератор база будет BodyText все что выше будут стилями для важных элементов типа кнопок и заголовков. Все что ниже будут подписями и другими элементами которые не должны привлекать больше внимания.
Чтобы видеть панель со всеми стилями надо чтобы ни один обьект не был выделен. Для этого кликните на любое пустое место в рабочей области.
🩸Стили цвета
Воспользуемся генератором https://www.figma.com/community/plugin/1068919813159975006
- Включаете генератор
- Жмите побрел и на цвете который нравится жмёте на замок. Другие цвета будут генерироваться с учётом выбора.
Минимальный набор этого 2 акцентных цвета, почти белый, почти черный и серый.
Если выбрать Add Colors to Document квадраты с цветами вставляются в 0 по X и Y на пространстве. Бывает что эти координаты заняты и палитра не вставляется. Обходным путем будет открытие палитры онлайн и экспорта в SVG.
В SVG вшиваются точные значения цветов. Если использовать картинку и забирать цвета пипеткой, то значения цвета могут отличаться.
Также выделив весь фрейм удобно создавать стили из найденных цветов.
Теперь сделаем свой шаблон для Design System Basics > Add Draft Frame т.к новая генерация создаст нам еще один мастер компонент с дефолтными названиями которые нам придется заполнять вручную.
Вернемся на страницу где мы впервые запустили генератор, у меня это 0 - Typography
- Весь фрейм оборачиваем в автолейаут
- Из фрейма
Headerделаем компонент (компонентыTitle CompиType Nameвыпрыгнут изHeaderи заменятся инстансами) - Теперь весь фрейм делаем компонентом (компонент
Headerвыпрыгнет) - Делаем инстанс главного компонента
Design System Page / Typography - Выделяем его и отсоединяем от компонента вообще
Теперь у нас есть свой компонент страницы дизайн системы в которой мы можем зашить и настроить варианты как нам нравится.
Созданные мастера можем перенести в станицу 1 - Other Раздела Components На этой странице я буду собирать всех "помощников" для этой дизайн системы.
Теперь на странице 0 - Colors добавим наш компонент страницы дизайн системы через меню Assets после добавления "разобьем" его (отсоединяем от компонента) чтобы можно было вкинуть внутрь него нашу палитру.
Стили цвета лучше всего называть так как поймете его вы и разработчик.
Перед отправкой макета разработчикам зайдите на собственную ссылку в режиме инкогнито и убедитесь что названия стилей и прочее понятны с первого взгляда.
Лучше потратить время на нейминг и структуризацию слоев чем объяснять каждому что ты имел в виду.
Основа
Для этой базы создаем новую страницу 0 - Base & Grids в разделе Foundations эта страница источником для разработчиков, как и на какой платформе должны верстаться элементы.
Сделаем черновой макет тут же или на странице 3 - Draft Допустим у нас мобильное приложение независимого СМИ.
Основными элементами там будут лента новостей, карточка новости, и страница с новостью.
Я начинаю сразу с экрана где могут быть собраны максимально все необходимые элементы
У меня база 8. Это некий стандарт которому придерживаются. Этот размер хорошо скалируется на различные Apple дисплеи и Андройд устройства. (Статья на тему ENG)
Постойте-ка, а если я выбрал базу в 14 для текста?
Размер шрифта необязательно должен быть кратен базы в 8, работа со шрифтом более сложный процесс на мобильных платформах. Например, пользователь может сам контролировать размер шрифта, ставить кастомные начертания. Поэтому лучше использовать нативные для платформы шрифты (SF Pro, Roboto), но есть и другие подводные камни. (Статья на тему ENG)
В конкретно вашем случае у разработки могут быть свои спецефические ограничения, поэтому важно привлекать разработку на ранних стадиях дизайна.
Я определился с базовой сеткой в экранах. Я добавлю компонент страницы дизайн системы настрою её по своему вкусу и начну описывать правило отступов.
Для людей которые откроют вашу систему по ссылке нет возможности видеть настроенную сетку. Её вы используете только для себя.
Настройки сетки тоже можно сохранять в пресеты
Для разработчиков придется готовить схему, сетку они не увидят.
Основа положена. Теперь наполняйте страницы элементами, и по мере дополнения добавляйте в систему описание и другую справочную информацию которую считаете нужной. Не откладывайте на потом, иначе этот момент не настанет никогда, поверьте.