FigMoji — конструктор эмодзи на Figma

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

Да, он бесплатный, весь векторный, и это первая его версия Сергей Иванов
Да, он бесплатный, весь векторный, и это первая его версия Сергей Иванов

Component и автоматизация

За счёт сущности «компонент» мы можем придумать не только универсальные кнопки, меню и так далее, но и автоматизированные решения для направления иконографики или иллюстрации.

Спойлер моего айконпака показывает как можно упростить себе задачу за счёт компонентов и/или автолейаутов Сергей Иванов
Спойлер моего айконпака показывает как можно упростить себе задачу за счёт компонентов и/или автолейаутов Сергей Иванов

Идея

Пришла ко мне незамедлительно — я хотел всегда иметь под рукой эмодзи для различных оформительских целей. Конечно, векторные. Конечно, как в iOS. Можно реплику, но хорошего качества, а не как в Гугл картинках.

Но пошёл дальше и придумал как реализовать вариативность значков — за счёт компонентов и условий, на которых они реализуются.

Благодаря делению иллюстрации на части, можно отдельно менять всё вплоть до отдельного глаза или брови Сергей Иванов
Благодаря делению иллюстрации на части, можно отдельно менять всё вплоть до отдельного глаза или брови Сергей Иванов

Брови, глаза, рты…

Смысл системы заключается в разработке каталога компонентов отдельных элементов (брови, глаза, основа, рот, детали) с именованием по правилам Фигмы.

Брови/глаза/детали собраны по две в компонент, являясь сами по себе отдельными компонентами Сергей Иванов
Брови/глаза/детали собраны по две в компонент, являясь сами по себе отдельными компонентами Сергей Иванов

На практике

Показываю как можно менять элементы «на лету»

Продвинутым пользователям Figma не составит особого труда наворотить буквально что угодно с таким конструктором. Пока это первая версия, впереди ещё дробные обновления с новыми вариантами.

All vector

По мере векторных возможностей, все эмодзи остаются векторными, включая отдельные детали по типу сердечек/звёзд/рук…

Базовый набор не отличить от оригинала Сергей Иванов
Базовый набор не отличить от оригинала Сергей Иванов

Проблемы

На данный момент FigMoji прекрасно экспортируются в форматы PNG и JPG. С SVG пока не всё так просто, могут слетать стили или отдельные элементы. Это недоделки со стороны разработчиков Figma. Я работаю над этим. Тем не менее часть эмодзи также можно вывести в SVG.

Сергей Иванов
Сергей Иванов

Бесплатно для чего угодно

Проект доступен для всех по общей лицензии с возможностью менять и производить новое на его основе. Вы качаете файл Фигмы и используете на своё усмотрение.

Если вам интересно, как создавалась первая версия, напишите в комментариях об этом.

6262
19 комментариев

Спасибо большое, мне очень не хватало svg эмодзи. Теперь я могу генерировать придурошные смайлы

19

Именно ))) кас то ми за ци я

2

Но, в примере смайл не сбалансированный. Для целостности картинки, а следовательно, и уровня придурошности это важно

Погодите-ка, очень важный вопрос!

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

Если я пропусти ответ в статье, то поправьте меня, ради Бога.
Спасибо!

1

Нет-нет, это графика, а не программная разработка. Можно использовать в маркетинговых активностях, проектах и так далее.

2

Хм, а за использование эмоджи сделанных так в фигма - не смогут прийти правообладели эмоджи?

1

Насколько я знаю, многие пользуются ими в рекламных целях. И пока ни к кому не пришли. Моё произведение официально распространяется без цели финансовой выгоды 🤷‍♂️

1