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

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

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

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

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

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

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

Сетки для иконок 16, 24, 32 и 48 пикселей соответсвенно с отступами по 1, 2, 2, 4 пикселя

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

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

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

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

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

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

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

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

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

Для дизайна:

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

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

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

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

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

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

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