Tutorial

От боли к коду: Как я создала свой первый плагин для Figma

🚀 От боли к коду: Как я создала свой первый плагин для Figma

Каждый дизайнер знает это чувство, когда перед сдачей проекта нужно «причесать» десятки макетов. Дробные пиксели в отступах, обычные кавычки вместо «ёлочек» и висячие предлоги — мелочи, которые съедают часы времени.
Я решила, что пора автоматизировать эту рутину, и разработала Grid & Text Fixer.

Что умеет плагин в один клик:

Pixel Perfect: Округляет координаты и размеры всех объектов до целых чисел.

Auto Layout Fixer: Находит и исправляет дробные значения в Padding и Gap.

Smart Typography: Расставляет неразрывные пробелы у предлогов и меняет кавычки на правильные «ёлочки».

Line Width Control: Устанавливает ширину текстового блока по количеству символов для идеальной читаемости.
Техническая сторона вопроса: Это был вызов моему внутреннему разработчику. Плагин написан на TypeScript с использованием Figma API, а интерфейс собран на чистом HTML/CSS. Весь код я выложила в Open Source на GitHub — верю, что прозрачность делает сообщество сильнее.
Где пощупать?

Теперь мои макеты всегда в порядке, а я могу тратить время на творчество, а не на исправление отступа в 12.43px.

Как вы боретесь с «грязью» в макетах? Делаете всё руками или тоже используете плагины? 👇

#figma #uxui #automation #designsystems #typescript #figmaplugin
2026-01-26 23:14 Figma Plugins