День только начинался, ничего не предвещало беды, как вдруг в чате с дизайнерами появился вопрос: «Есть ли плагин в фигме, который при наведении на страницу показывает все используемые текстовые стили?..» Гугл такой плагин не нашел, поэтому я вызвалась его написать, предварительно поизучав, как вообще это делается.
В статье рассказываю, как написать плагин, и что это проще, чем звучит на первый взгляд. +1 идея для тех, кому не хватает идей для пет-проектов.
MVP
Выделяем требования
Разбираемся, как устроены плагины в Фигме
Получаем список нод у выделенного фрагмента
Отправляем ноды в UI-часть
Выводим ноды в интерфейсе плагина
Проверяем корнер-кейсы
Промежуточные итоги и выводы
Улучшаем MVP на основе обратной связи
Добавляем визуальные различия стилей
Добавляем выбор элемента
Добавляем скролл к элементу
Настраиваем сборку
Последние штрихи перед публикацией
Смешанные шрифты
Выбор нескольких нод
Закрываем оставшиеся кейсы
Итоговый вариант
Результаты
Что дальше
MVP
Театр начинается с вешалки, а разработка приложения с определения минимальных требований.
Выделяем требования
При выборе фрейма плагин должен выводить список привязанных текстовых стилей. Если стиль есть, то выводится его название, если стиля нет, то выводится название шрифта;
Должно выглядеть, как у привязанных стилей цвета.
Этих требований пока достаточно, чтобы двигаться дальше и делать жизнеспособную версию, которую потом можно улучшать.
Разбираемся, как устроены плагины в Фигме
Я не буду расписывать процесс запуска плагина, т. к. есть очень подробная пошаговая документация с примером.
Переходим к самой сути, плагин — это просто веб-страница, вставленная в редактор через фрейм
Интересные статьи
Интересные статьи
