Просто и быстро — рисуем иконки в Figma

Привет, ты попал в лабораторию Product-дизайнера. Меня зовут Даня Фетисов, я занимаюсь дизайном цифровых продуктов и делюсь своим опытом в блоге.

У иконок ряд преимуществ:

• бросаются в глаза;
• передают информацию быстро;
• запоминаются и экономят место;
• понятны на любом языке;
• создают визуальную индивидуальность приложению/сайту;
• приятнее, чем тонна текста.

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

Настраиваю Frame для иконки

Это самое простое — просто создаю Frame нужного размера и создаю сетку с помощью Layout Grid:

В бой — рисую иконку

Скелет иконки

Сначала я намечаю форму будущей иконки:

Важно: координаты точки — целые числа, без дробных значений (19.34 недопустимо)

Дорабатываю форму иконки

Занимаюсь стилизацией контуров:

• Скругляю углы, где нужно;
• Добавляю окончания (Cap, на гифке — Round);
• На свой вкус и под требования задачи.

Подготавливаем иконку к бою: с дизайном и разработчиками

Это простой, но очень важный в будущем шаг, который сэкономит кучу времени, сил и нервов.

Для дизайна:

• создаю компонент иконки;
• называю компонент по шаблону size/icon-name (например, 24/bag);
• пользуюсь.

Для разработчиков:

1. Создаю Instance компонента иконки.
2. Создаю группу только с Instance иконки, группу превращаю во Frame.
3. Применяю Union на Instance иконки (чтобы экспортировался не контур, а заливка)*

* если иконку планируется настраивать кодом, лучше оставить Stroke, чтобы можно было менять заливку иконки, кончики и другие параметры контура. Но заливка обязательно нужна для иконочного шрифта.

Пользуемся иконкой

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

Подписывайся на YouTube-канал