Как создать модульную дизайн систему в Figma. Часть 1

Основа создания любой дизайн системы

Модульную дизайн систему решил начать создавать со стилей. Это и будет та самая основа на которой будет строиться вся работа. Компоненты, будут состоять из элементов, к которым будут прикручиваться стили. Стили шрифтов = типографика, опять же можно считать, что готова. Хотя, стили шрифта — это как раз те стили, которые, скорее всего, пользователь будет строить под себя, Ведь все ситуации в проектах сложно предугадать. В общем, шрифты для базы есть. Все цвета, тени, сетки под разные разрешения. Все это есть в стилях и без них никуда. Вообще, считаю, что стили в фигма одна из самых крутейших и самых недооцененных фишек программы.

Давай подробнее о стилях, которые я применил

Начну со стилей шрифтов для системы

Давай, сразу оговоримся, что это не дизайн система, это будущий универсальный помощник для создания лендингов. UI kit, что ле… По крайней мере таким я его планирую сосздать.

Я решил остановиться на этих 7 шрифтах. Не спрашивай почему – просто так решил. 5 гротесков и 2 антиквы. Думаю, что достаточно для начала.

Каждый стиль логично назван. Есть иерархия от топового заголовка первого порядка с кеглем 72, до параграфа в 16 всего для каждого шрифта по 8 стилей. Это 4 заголовка, кнопка(наверное добавлю еще один стиль для кнопки но позже) Тайтл и 2 стиля для параграфа(легче и тяжелее) Все значения кегля кратны 8(кроме кнопки)

Кстати, по поводу цифры 8.

Решил использовать базовую сетку 8/8. Посмотрю,  как она себя проявит. О ней столько положительных отзывов, сам серьезно не использовал такой подход. Сейчас по ходу и проверю

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

Стили Layout

Не стал тут выделываться, а создал стили лайаута под бутстрап. Верный, надежный стиль.

Стили цвета

Тут было сложно. Разделил все цвета на несколько подгрупп:

Главные

7 главных цветов + их светлые версии.

Темные

4 темных цвета. Добавил их в последний момент. Без них, как-то не складывается полная картина цветов. Прямо чувствую, что не хватает темных цветов для текстов.

Серые

Плавный разброс от черного к белому . 6 цветов вполне будет достаточно. Тут ничего нового

Градиенты

Градиенты на основе главных цветов + черный. Всего 8 штук

Стандартные

  • Инфо
  • Ошибка
  • Удача
  • Внимание

Переход по насыщенности от максимума  к минимуму.

Стили эффектов

Создал 8 стилей для эффектов ниспадающей тени. От малого к большему. Думаю, этого достаточно

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

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

Напоминаю, что совсем скоро стартует марафон – присоединяйся и выучи фигма по максимуму. Там мы будем создавать уже твою подобную систему и используем ее на практике. Подробности тут
https://vk.com/figmacourse?w=wall-179890655_1133