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, они необходимы для текста.

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

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

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

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

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

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

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

Шрифты

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

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

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

Например:

  • Body large / left
  • Body large / center
  • Body large / right
Figma Starter Kit: как дизайнеру работать быстрее (часть 1)

Тени

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

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

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

3030
реклама
разместить
10 комментариев

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

2

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

1

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

1

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

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

1

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

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