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

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

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

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

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

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

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

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

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

1. Базовый размер шрифта. От него будут строится все остальные размеры в зависимости от шага (scale)
2. Значение scale (во сколько раз будет увеличиваться/уменьшаться каждый следующий размер от предыдущего).
3. Возможность округлять до целых размер кегля, если при умножении/деление на scale получается дробное значение.
4. Шрифт.

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

1. Выбрать чекбоском добавлять или нет его в стили.
2. Название стиля. Есть поддержка объединения в группы через слэш, как и в Figma
3. Выбрать одно или несколько начертаний. Если у одного размера выбрано несколько начертаний, плагин автоматически создаст стиль под каждый вариант и добавит к названию приставку со значением font-weight
4. Настройка Line-height

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

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

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

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

1. Друзья, коллеги. Просто попросили всех скачать и поставить лайк для навара. Первые 50 скачиваний и лайков это принесло.
2. Публикация в телеграм канале «Figma Design». Тут можно сказать нам повезло. После нескольких дней запуска плагина, мы заметили, что как-то подозрительно быстро начало расти число скачиваний. Не скажу что мы были против:) но стало интересно почему так. Оказалось, что нас опубликовали в телеграм канале «Figma Design»)
   
3. Дизайнерские чатики в телеграм. Не дало сильный прирост скачиваний, но зато собрали обратную связь.
   
4. Product Hunt. Тоже неплохо получилось продвинуть плагин + это поспособствовало интересному нетворку. В целом мы собрали 131 апвоут (аналоги лайков в product hunt), что для нас было неплохо, так как до этого публикации других продуктов у нас не набирали и 50. Stylelist - Figma plugin for quick creation text and color styles | Product Hunt
   

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

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

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

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