{"id":10776,"title":"\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u043c\u0443 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0443 \u0432 \u043e\u043a\u0435\u0430\u043d \u043f\u043e\u043f\u0430\u0434\u0451\u0442 \u043c\u0435\u043d\u044c\u0448\u0435 \u043f\u043b\u0430\u0441\u0442\u0438\u043a\u0430","url":"\/redirect?component=advertising&id=10776&url=https:\/\/vc.ru\/acer_russia\/347915-acer-vypustila-pervyy-noutbuk-iz-pererabotannogo-plastika&placeBit=1&hash=368c351f012741e124bb4bc6c0b9b05d5e0f9033fab83ea5e301424877f73936","isPaidAndBannersEnabled":false}

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 и там начинаю делать новый проект, но можно и вот так:

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

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

Ответить
1
Развернуть ветку
Маленький микроскоп

Комментарий удален по просьбе пользователя

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

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

Ответить
0
Развернуть ветку
Маленький микроскоп

Комментарий удален по просьбе пользователя

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

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

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

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

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

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

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

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

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

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

Ответить
0
Развернуть ветку
Читать все 10 комментариев
«Холакратия, любимые мемчики и прозрачность»: программист о работе в Точке, моделинге и запуске треков на Spotify

Точка — это про людей. Про сотрудников, которые создают удобный банк для бизнеса. Мы запускаем серию интервью с нашей командой, чтобы рассказать, как у нас всё устроено.

Умереть в каршеринге: «Делимобиль» заставил ждать выездную службу в –20°

В Свердловской области сломалась машина «Делимобиля». Поддержка заставила пользователей ждать пять часов на морозе.

Российскую операционную систему «Фантом» довели до тестирования после 12 лет разработки с нуля Статьи редакции

Система использует необычную архитектуру, не похожую на Windows и Linux.

Система «Фантом» в виртуальной машине QEMU
В Москве появился фонд, инвестирующий в перспективные транспортные проекты

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

Как пандемия изменила рынок онлайн-страхования

Выяснили и рассказываем, как изменился онлайн-спрос на услуги страхования с начала пандемии.

Извините, но нам просто нужен был не таргетолог, а суетолог

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

Хоть кто-то был в курсе?

«Инновации — это поле для сражений»

Как фуд-ритейл внедряет новые технологии.

Tor обжаловал решение суда о блокировке сайта в России Статьи редакции

Представители сервиса считают, что законы страны не запрещают распространение информации о VPN и анонимайзерах.

ИКЕА смогла предоставить самый худший клиентский сервис в моей жизни
Как мы сделали корпоративную культуру инструментом роста. Опыт региональной IT-компании
null