Figma + FlutterIcon = Иконочный шрифт

Когда-то в tada.team мы решили перейти на стороннюю библиотеку иконок, которая предполагала простую интеграцию в наши процессы и тонкую настройку. Что должно было ускорить проектирование и передачу макетов.

Все иконки мы храним figma в качестве компонентов (и экраном в приложении), так удобнее их редактировать и передавать разработчикам. При экспорте в svg и png никаких вопросов на начальном этапе не возникало, в вебе все отображалось хорошо, можно было еще оптимизировать иконку и уменьшить ее вес.

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

Мне хотелось сделать процесс экспорта иконок качественнее, так как я считаю, за конечный результат ответствен дизайнер а не разработчик. Разработчик должен максимально просто поместить иконку на экран и не запариваться с отображением.

До этого момента к иконочным шрифтам я относился никак, разве что использовал Symbol от Apple для дизайна iOS приложений. Свои шрифты я не делал и подошел к вопросу со стороны получения опыта.

Чтобы перевести svg в ttf можно воспользоваться одним из сервисов: https://fontello.com/ или https://fluttericon.com, меня интересовал последний, так как он больше подходил под мою задачу.

FlutterIcon имеет давольно простой интерфейс, достаточно перетянуть в него svg иконку, задать название шрифта и скачать архив, где будет лежать готовый иконочный шрифт. Проделав ранее описанное, я все же столкнулся с парой проблем, которые постарался подробнее описать ниже.

Проблема 1: Нельзя просто перенести иконку в сервис, он может ее полностью или частично не отобразить.

Решение: Кривые в figma обязательно надо объединить один в вектор, для этого я использовал плагин VKUI Toolkit + убрал фон с фрейма.

(Исходники можно сгруппировать и скрыть.)

Проблема 2: Теперь иконки хорошо отображаются в сервисе и менеджере шрифтов, но при подключении шрифта в приложении и в figma появлялась непонятная заливка.

(До этого я тестил отображение только в приложении, что увеличивало время, лучше это делать сразу в figma и только потом передавать разработчикам.)

Решение: Некоторые форматы экспорта (например: TrueType и Android VectorDrawable) поддерживают только правило ненулевой заливки. Которую стандартными средствами figma не изменить. Для решения проблемы я использовал плагин Fill Rule Editor,Fill Rule Editor, который позволяет редактировать правила заливки векторного объекта.

(Правила заливки определяют, какие части векторного контура заполняются. Правила заливки ведут себя по-разному при наложении векторного контура.)

Что ж, теперь у меня 300 иконок отображаются на всех устройствах просто великолепно, а у вас есть небольшой гайд.

p.s Не обязательно заново переносить все иконки во FlutterIcon что-бы обновить, можно воспользоваться config.json из папки со шрифтами и удалять/обновлять по одной иконке.

p.s p.s p.s Позже я наткнулся на эту статью 🙆‍♂️ ./