Variantor

У готовой иконки один размер и одна толщина обводки. А чтобы вставить её в кнопку или поле ввода, да ещё в нескольких размерах, я под каждый вручную копировал её и подгонял размер, обводку и цвет. На своей системе компонентов это превратилось в рутину, которую я и решил убрать в одну кнопку.

В блоке Sizes задаются размеры и толщина линий, а кнопка «Create Icons» генерирует из них иконку сразу в нескольких вариантах-компонентах. Настройки не сбрасываются: закрыл окно, открыл снова, и всё на месте.

За раз плагин делает до семи вариантов иконок, а ещё позволяет поменять цвет и обводку под конкретный компонент.

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

Больше всего времени ушло на интерфейс: я собирал его на React и продумывал, как уместить все настройки, чтобы плагином было приятно пользоваться. Весь Variantor я написал за три дня.

Плагин поддерживает светлую и тёмную темы интерфейса, а установить его можно на странице Figma Community.

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