Рисуем сет иконок в Figma. Эскиз, сетка, пиксели, форма.

Ещё один мой пост для TenChat, опубликованный в 2022. Считаю полезный!)

Первым делом нужно определиться с темой иконок, которые вы будете рисовать, у меня для кафе.

Эскиз.
Далее можно сделать небольшой набросок на бумаге (у меня на специальной бумаге, она называется миллиметровка), чтобы примерно определиться со стилем, в котором вы будете рисовать. Очень важно, чтобы все иконки несмотря на разный рисунок были выполнены в одном стиле, например: Outline (контур), острые углы, толщина линии 1,5 px.

Сетка.
Следующий шаг открываем Figma и в Community находим шаблон специальной сетки (icon grid), по которой рисуются иконки, можно придумать свою сетку, но эта готовая сетка идеально выполняет свою функцию и экономит ваше время. В любом случае она должна отвечать параметрам системной иконки. Обычно рисуют в размере 24х24px и далее уже адаптируют под другие размеры.

Пиксели.
Обращаем внимание на пиксели они не должны быть с «висящими» цифровыми значениями, например 1px, 1,5px, 2px — ок, 2,34px не ок (сколько пикселей обводки под какой размер применяют я писала тут). У меня иконки 1,5px. Обязательно ставим обводку Inside при отрисовки иконок это поможет контролировать толщину.

Форма.
Форму иконки делаем из геометрических предметов — круг, овал, квадрат и т.п. Можем закруглять углы и располагать под наклоном нужные нам грани. С помощью операции Boolean, которая имеет в себе разные функции для работы с объектами: объединение, вычитание, пересечение и исключение, можно корректировать форму иконок.

Таким же способом рисуем остальные иконки из сета. Называем правильно: размер, имя иконки и ее вид, например: 24х24_Plaсe_Outline.
Готово!

🔥 — полезно
🤚 — буду пробовать
❤️ — часто, тоже сам(а) рисую