Figma Starter Kit: как дизайнеру работать быстрее (часть 1)

 

Привет мой друг!
Сегодня хотел бы немного поговорить о том, сколько дизайнер тратит времени на выполнение задач, и как сократить это самое время. Так же разберем создание твоего первого стартового UI-Kitа в фигме. Именно он станет главным инструментом при работе с новыми проектами.
Figma-исходник лежит тут.

Зачем тебе это нужно

Давай вспомним начало твоей работы с документом в фигме:
ты создаешь файл, кидаешь туда скрины с ТЗ и какими-то прототипами. Далее постепенно начинаешь набрасывать элементы интерфейса и опять рисуешь кнопки, которые рисовал миллион раз. Потом добавляешь текст, применяешь к нему стили шрифта. Прям вижу, как ты снова ищешь свой любимый Montserrat или Roboto, потом заходишь в палитру, выбираешь нужный цвет, а некоторые так вообще используют пипетку. Потом настраиваешь тени для кнопок, закругления, блюры… Фу, аж представить страшно!
В итоге ты тратишь несколько часов своего времени на 1-2 простейших экрана. При этом у тебя целая куча стилей и цветов, хотя на экране несколько простейших элементов. Потом разраб начинает проклинать тебя за эту неразбериху со слоями, цветами и другими параметрами.
Именно для этого тебе и нужно создать свой starter-kit.

Что такое Starter-Kit?

Starter-Kit это базовый набор элементов и стилей, который призван сокращать время на создание типовых элементов. От полноценной дизайн-системы он отличается более простым набором элементов и не привязан к определенной стилистике. Если говорить проще, то это asset кнопок, шрифтов, цветов и всего того, что ты обычно рисуешь на своих артбордах.

Ближе к делу!

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

  • Цветовая палитра
  • Тени
  • Набор стилей текста

Цветовая палитра

Любой элемент дизайна имеет свой цвет, поэтому первым делом мы создадим грамотную цветовую палитру. Чаще всего в дизайне интерфейсов каждый цвет соответствует определенному состоянию элемента, например:
красный — (ошибка), зеленый — (успех) и желтый — (предупреждение), голубой — (кликабельная ссылка). Отсюда следует, что нам необходимо создать следующий набор цветов:

  • Primary (основной цвет элементов)
  • Success (успех)
  • Info (ссылки и пр.)
  • Warning (предупреждение)
  • Danger (ошибка)

Так же я создам еще несколько цветов
Например Black и Gray, они необходимы для текста.

Далее нам необходимо создать набор оттенков для каждого цвета.
Для этого я использую онлайн-инструмент Eva Colors Generator Он сам генерирует нужные оттенки и их количество. В итоге мы получаем вот что:

Я создал немного больше цветов исключительно ради примера.

Чтобы сгруппировать все оттенки по категориям нужно каждому из них присвоить свое имя в следующем виде: Название категории / Номер оттенка.
Например:

  • Primary / 100
    Primary / 200
    Primary / 300
  • Warning / 100
    Warning / 200
    Warning / 300

Тогда наша палитра будет иметь такую структуру:

Шрифты

Здесь все максимально просто!
Тебе нужно создать набор всех необходимых шрифтов во всех нужных размерах, которые ты используешь в своих работах. Обычно нужны стили заголовков, основной боди-шрифт, шрифты для кнопок и ссылок, но всё зависит конкретно от твоих нужд.
В качестве базового семейства лично я использую — Roboto. Не знаю, просто люблю его! Создаю для каждого нужного размера 3 подстиля: равнение по левой стороне, центрированный шрифт и по правой.
Выглядит это примерно так:

Далее каждому из шрифтов присваиваем свое имя, здесь действуют те же правила, что и при создании цветов: Название категории / тип равнения

Например:

  • Body large / left
  • Body large / center
  • Body large / right

Тени

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

Это была первая часть цикла статей по созданию Figma Starter Kit.
В будущем мы вместе спроектируем мощный инструмент, который будет включать в себя огромное количество компонентов и символов!

  • Figma-исходник данного урока лежит в телеге, обязательно скачай его и посмотри: -)
  • Мои статьи о дизайне
  • Можешь смело обращаться ко мне по всем вопросам
  • Если тебе лень ждать следующих уроков и ты хочешь уже сейчас иметь доступ к полной дизайн системе, то тебе сюда

0
10 комментариев
Написать комментарий...
Макс О дизайне
Автор

я просто дублирую файл starter-kit и там начинаю делать новый проект, но можно и вот так:

Ответить
Развернуть ветку
Алиса Дмитриенко

А зачем создавать стили для left, right, center? Figma не сохраняет их, это работает для sketch 

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Макс О дизайне
Автор

Полностью согласен!

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Макс О дизайне
Автор

я просто дублирую файл starter-kit и там начинаю делать новый проект

Ответить
Развернуть ветку
Дмитрий Кузнецов

А у меня в фигме центрирование редактируется даже при выбранном стиле текста

Ответить
Развернуть ветку
Иван Белов

Макс, ты с темой статьи не опоздал на пару лет? Или может ещё руководство по твиттер бутстрап напишешь?

Ответить
Развернуть ветку
Макс О дизайне
Автор

Иван, в статьях я обычно упоминаю, что материал написан в помощь начинающим дизайнерам, а тут почему-то забыл(

Ответить
Развернуть ветку
Ivan Lao

Всем привет!)
Кто может пожалуйста, поделиться ссылкой на макет "Starter UI Kit" в Фигме, у меня почему-то по ссылке выдает ошибку, а очень хочется с ним поработать.
Буду признателен!

Ответить
Развернуть ветку
Читать все 10 комментариев
null