Как мы делали плагин для Figma по фану и что из этого вышло

Всем привет! Хочу поделиться историей, как мы создали свой первый плагин для Figma. На момент написания статьи (2.9k скачиваний, 77 лайков). Расскажу как пришла идея, про подход, продвижение, что получили от такой самодеятельности и что думаем делать дальше.

Скоро плагину будет 1 год – 31 декабря. Да-да, именно под Новый год, я созвонился со своим другом (Руслан, привет) , чтобы просто обсудить планы на 2021. И в процессе решили, что можно для начала сделать что-то небольшое и как дополнение к уже существующей системе – читай плагин для Figma.

Какой конкретно плагин делать, мы тоже быстро придумали. У меня давно была идея сделать тулзу, которая бы позволяла быстро сгенерировать текстовые и цветовые стили в Figma, так как меня уже подбешивало в каждом новом проекте создавать с нуля стили, прописывать в каждом названия через слэш, чтобы объединять в группу и т.д. Это порой отнимало очень много времени. Хотелось создать инструмент, который помогал бы оптимизировать этот процесс.

Так и появилась идея сделать плагин для Figma – Stylelist.

Хотели запуститься, как можно быстрее, поэтому решили сделать сначала ограниченную версию для генерации только текстовых стилей. Чтобы еще ускорить разработку взяли готовый Vue UI kit Element и собрали на готовых компонентах первую версию.
А для вкладки с цветами сделали такую заглушку)

Для работы с текстом за основу взяли такие сервисы, как Typescale, но расширили функционал.

Логика работы с текстовыми стилями

В настройках человек выбирает:

Плагин по умолчанию создает 7 размеров, но можно добавить больше.
В каждом размере есть следующие настройки:

После пользователь нажимает кнопку «Create styles». И бум!!! Все готово, все стили добавлены в файл и готовы к использованию.

Собрали мы это «коленочное» чудо где-то за неделю с учетом январских праздников и отправили на публикацию) Процесс публикации занимает 5-10 рабочих дней. Мы стали мучать поддержку на 5))) Потому что при публикации было непонятно правильно ли мы все загрузили, да и хотелось побыстрее уже.

Скажу сразу на продвижение мы не потратили ни рубля, да и глупо, наверное, было вкладываться деньгами в бесплатный open source проект.

Поэтому продвигали бесплатными способами:

С цветами, честно говоря, мы затянули, хотя многие после запуска сразу спрашивали, когда мы их добавим. Перебрали кучу статей и сервисов по генерации цветовой палитры, больше всего понравились – pallete, colorbox. Их и взяли за основу.
Логика работы похожая, как у типографики. Выставляя настройки в левом сайдбаре, автоматически генерируются оттенки на основе Base color. Можно создать бесконечное количество групп оттенков и быстро добавить их в стили в Figma.

Сейчас в планах сделать версию 2.0. В большей степени хотим глобально поработать над внешним видом (уйти от Element и сделать свой UI) и отдельно заняться вкладкой с цветами. Добавить возможность группировать цвета не только по оттенкам, но и по смыслу (например, объединить все цвета для текста в группу), проверку контрастности и в целом упростить все настройки, чтобы было удобнее работать.

Напрямую в финансовом плане – нет. Но такой цели и не было изначально) Тут скорее просто хотелось решить собственную боль и попробовать что-то новое. И помимо нового опыта получилось познакомиться с крутыми ребятами на product hunt, а нетворк лишним не бывает. + добавился еще один проект в портфолио.

В принципе считаю это хорошей практикой порой делать пускай и небольшие, но свои open source проекты. Всегда приятно делать что-то полезное для коммьюнити. + новый опыт – это всегда круто.