Share This
Связаться со мной
Крути в низ
Categories
//Создание дизайн-системы в Figma: практическое руководство

Создание дизайн-системы в Figma: практическое руководство

Сегодня мы разберемся с оптимизацией рабочего процесса дизайнера интерфейсов, позволяющей начинать работу над проектами гораздо быстрее. Создание собственной дизайн-системы – процесс долгий и трудоемкий, но со временем затраты окупаются. Обсудить

sozdanie dizajn sistemy v figma prakticheskoe rukovodstvo fe96d53 - Создание дизайн-системы в Figma: практическое руководство

Перевод публикуется с сокращениями, автор оригинальной статьи Marc Andrew.

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

Давайте разбираться, как там все устроено.

Почему сначала необходимо создать цветовую палитру?

sozdanie dizajn sistemy v figma prakticheskoe rukovodstvo f6f1b34 - Создание дизайн-системы в Figma: практическое руководство

Когда вы приступите к созданию своей дизайн-системы в Figma, начните с цветовой палитры и постарайтесь свести базовые цвета к минимуму, где это возможно. В целях гибкости имеет смысл расширить базовые цвета, используя различные оттенки (более светлые варианты) и полутона (более темные варианты).

Теперь вы можете создать различные вариации базового цвета, настроив значения насыщенности и яркости с помощью опции HSL внутри Colour Panel в Figma.

sozdanie dizajn sistemy v figma prakticheskoe rukovodstvo a5ca9a5 - Создание дизайн-системы в Figma: практическое руководство

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

Прежде чем двигаться далее, полезно рассмотреть простые условности именования цветовой палитры. Рекомендуется использовать что-то простое и понятное:

  • Primary / Base
  • Secondary / Base

Использование слэша позволит классифицировать цвета и поможет быстро найти соответствующий на панели инспектора.

sozdanie dizajn sistemy v figma prakticheskoe rukovodstvo b19e568 - Создание дизайн-системы в Figma: практическое руководство

Вам также необходимо реализовать стандартные базовые цвета: красный (error), зеленый (success) и желтый (warning) для использования, например, в уведомлениях, инпутах и т. д.

sozdanie dizajn sistemy v figma prakticheskoe rukovodstvo 9ea4f52 - Создание дизайн-системы в Figma: практическое руководство

Черный и оттенки серого тоже необходимы. Помимо обязательного белого применяйте различные уровни его прозрачности. Такие варианты идеально подходят, например, когда вы хотите вставить иконку поверх изображения.

sozdanie dizajn sistemy v figma prakticheskoe rukovodstvo 223b17d - Создание дизайн-системы в Figma: практическое руководство

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

sozdanie dizajn sistemy v figma prakticheskoe rukovodstvo c1425ac - Создание дизайн-системы в Figma: практическое руководство

И, наконец, здоровый выбор градиентов всегда пригодится.

sozdanie dizajn sistemy v figma prakticheskoe rukovodstvo b57bb6b - Создание дизайн-системы в Figma: практическое руководство

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

sozdanie dizajn sistemy v figma prakticheskoe rukovodstvo 9149e28 - Создание дизайн-системы в Figma: практическое руководство

Нужно больше типографики!

sozdanie dizajn sistemy v figma prakticheskoe rukovodstvo 6d04e5d - Создание дизайн-системы в Figma: практическое руководство

В отличие от Sketch, Figma объединяет Alignment и Colour в стилях и разбивает их на части, позволяя вам иметь гораздо меньше текстовых стилей для управления. Это делает файл намного чище и легче.

sozdanie dizajn sistemy v figma prakticheskoe rukovodstvo f7d8eb5 - Создание дизайн-системы в Figma: практическое руководство

При построении собственной системы рекомендуется использовать несколько семейств шрифтов (если это возможно), чтобы они гармонично дополняли друг друга и не были слишком декоративны. Помимо этого кастомизируйте стили для обычных H1 – H5, используя модульное масштабирование, танцы с «pt» и соотношением.

Автор установил в Body размер 18pt, чтобы улучшить разборчивость: это актуально при создании длинного контента. Кроме заголовков и стилей body, он создал стили для Lead, Small, Caption и X-Small, причем последний идеально подходит для создания дизайна под мобильные устройстве, а первый – для десктопов.

Соглашение об именах полностью зависит от того, что вам ближе. Многие выбирают структуру именования, вроде Heading 1 – Heading 6, а также Body, Body L, Body S и т. д.

Для лучшей систематизации следуйте аналогичному шаблону цветовой палитры:

  • Lead 24 / Family #1 / Regular
  • Lead 24 / Family #2 / Regular

sozdanie dizajn sistemy v figma prakticheskoe rukovodstvo 774276a - Создание дизайн-системы в Figma: практическое руководство

С этими двумя семействами шрифтов и их стилями (Hero, H₁, Body и т. д.) автор предлагает создать варианты Regular и Bold. Вы можете добавить к этому набору в соответствии с вашими предпочтениями любой из Light, Semi-Bold и т. д.

В настоящее время в Figma приходится производить переход на другое семейство шрифтов вручную по одному стилю зараз. Это неудобно! Но не отчаивайтесь, есть плагин Batch Styler, который облегчит вашу участь и изменит несколько стилей сразу.

sozdanie dizajn sistemy v figma prakticheskoe rukovodstvo 138f658 - Создание дизайн-системы в Figma: практическое руководство

Не забывайте об Elevations и Shadows

sozdanie dizajn sistemy v figma prakticheskoe rukovodstvo 0adce56 - Создание дизайн-системы в Figma: практическое руководство

Последнее дополнение к основным стилям любой хорошей дизайн-системы наряду с цветовой палитрой и типографикой – это elevations и shadows.

Создадим shadows, подходящие как для светлого, так и для темного дизайна, а также в пару к ним elevations (20%, 40%, 60%, 80% и т. д.).

sozdanie dizajn sistemy v figma prakticheskoe rukovodstvo 68ab3c3 - Создание дизайн-системы в Figma: практическое руководство

Иконки – хорошей системе нужны иконки

sozdanie dizajn sistemy v figma prakticheskoe rukovodstvo 94c51d6 - Создание дизайн-системы в Figma: практическое руководство

Найдите легковесный и разнообразный набор значков для вашей первоначальной сборки. Нынче в моде векторные значки и иконки с заливкой, например, свободно распространяемый вариант Eva.

sozdanie dizajn sistemy v figma prakticheskoe rukovodstvo 73c2419 - Создание дизайн-системы в Figma: практическое руководство

Вот еще один набор иконок – beautiful Feather.

sozdanie dizajn sistemy v figma prakticheskoe rukovodstvo 16ab5a5 - Создание дизайн-системы в Figma: практическое руководство

Используйте органайзер для иконок

sozdanie dizajn sistemy v figma prakticheskoe rukovodstvo 7b7e773 - Создание дизайн-системы в Figma: практическое руководство

Для владельцев яблочных девайсов отличный вариант – IconJar, а для Windows существует Nucleo.

sozdanie dizajn sistemy v figma prakticheskoe rukovodstvo fc62941 - Создание дизайн-системы в Figma: практическое руководство

Вернемся на созданную ранее главную страницу с компонентами и набросаем туда иконки из набора Eva.

sozdanie dizajn sistemy v figma prakticheskoe rukovodstvo 6921667 - Создание дизайн-системы в Figma: практическое руководство

IconJar вставляет иконки с рамкой в 24pt, что способствует выравниванию и визуальной согласованности.

sozdanie dizajn sistemy v figma prakticheskoe rukovodstvo 07e91f3 - Создание дизайн-системы в Figma: практическое руководство

Дадим имя согласно правилам именования, чтобы помочь с категоризацией:

  • Icon / Alert Circle / Fill
  • Icon / Alert Circle / Line

sozdanie dizajn sistemy v figma prakticheskoe rukovodstvo d3c4ed5 - Создание дизайн-системы в Figma: практическое руководство

Затем преобразуем в компонент (Alt + Cmd + K) и повторим необходимое количество раз.

Выбирайте основные компоненты с умом

sozdanie dizajn sistemy v figma prakticheskoe rukovodstvo 20319d0 - Создание дизайн-системы в Figma: практическое руководство

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

Всегда начинайте с мелких компонентов

sozdanie dizajn sistemy v figma prakticheskoe rukovodstvo f229f9e - Создание дизайн-системы в Figma: практическое руководство

Компоненты вроде Кнопок – одни из наиболее часто используемых элементов любого проекта, поэтому имеет смысл сначала создать их, а потом переходить к созданию более крупных, вроде Modals, Cards, Calendars и т. д.

Можно создать кнопки Primary:

sozdanie dizajn sistemy v figma prakticheskoe rukovodstvo 6dbb7c3 - Создание дизайн-системы в Figma: практическое руководство

и Secondary:

sozdanie dizajn sistemy v figma prakticheskoe rukovodstvo 350e5ca - Создание дизайн-системы в Figma: практическое руководство

со следующими вариантами:

  • Button / Primary / Extra Large / Default
  • Button / Primary / Extra Large / Left Icon
  • Button / Primary / Extra Large / Right Icon

Помимо «Extra Large» оправдано будет создать «Large», «Medium» и «Small» для настольного и мобильного использования.

Мелкие компоненты станут частью большего

sozdanie dizajn sistemy v figma prakticheskoe rukovodstvo 4642e92 - Создание дизайн-системы в Figma: практическое руководство

Теперь можно создать аватары:

sozdanie dizajn sistemy v figma prakticheskoe rukovodstvo 37bba12 - Создание дизайн-системы в Figma: практическое руководство

выпадающие пункты меню:

sozdanie dizajn sistemy v figma prakticheskoe rukovodstvo dee7d67 - Создание дизайн-системы в Figma: практическое руководство

плейсхолдеры:

sozdanie dizajn sistemy v figma prakticheskoe rukovodstvo f8b64c5 - Создание дизайн-системы в Figma: практическое руководство

прогресс-бары:

sozdanie dizajn sistemy v figma prakticheskoe rukovodstvo 862334e - Создание дизайн-системы в Figma: практическое руководство

Это лишь некоторые из необходимых компонентов. Перечисли самые полезные и распространенные:

  • Avatars
  • Button Groups
  • Calendars
  • Cards
  • Charts
  • Comments
  • Maps
  • Media Controls (Video & Audio)
  • Notifications
  • Pagination
  • Placeholders
  • Tooltips

Заключение

Не забывайте о часто используемых элементах UI, чтобы охватить максимальное количество вариантов применения собственной системы. Ее создание потребует уйму времени, а также колоссальной выдержки и терпения, но удовлетворение от проделанной работы не сравнить ни с чем. Больше не придется начинать проект с чистого листа, если у вас есть собственная дизайн-система, где все готово.

Не останавливайтесь на достигнутом, развивайте свои разработки и навыки. Удачи в обучении!

Дополнительные материалы:

  • Один компонент Figma – 3360 вариантов
  • Подборка статей, переводов, докладов и ресурсов для Frontend-разработчика
  • Лучшие Youtube-каналы для Frontend-разработчика
  • Backend для Frontend-разработчика и наоборот: осваиваем новое
  • Прощай, плохой код: вот как не лажать в JavaScript

  • 1 views
  • 0 Comment

Leave a Reply

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Свежие комментарии

    Рубрики

    About Author 01.

    Roman Spiridonov
    Roman Spiridonov

    Привет ! Мне 38 лет, я работаю в области информационных технологий более 4 лет. Тут собрано самое интересное.

    Our Instagram 04.

    Categories 05.

    © Speccy 2020 / All rights reserved

    Связаться со мной
    Close