Gridly: плагин для сеток в Figma, который я сделала из злости 😁

Каждый раз после работы в InDesign меня стабильно выбешивали сетки в Figma.

В Индизайне всё очень удобно: можно нормально настраивать поля, делать разные отступы справа и слева, сверху и снизу, быстро менять параметры, видеть превью сетки в реальном времени. А в Figma каждый раз было ощущение, что «ну… почти хорошо, но всё так неудобно». Особенно меня раздражали одинаковые поля по умолчанию, лишние действия ради простых вещей, отсутствие готовых пресетов под популярные форматы.

В какой-то момент я настолько устала ворчать на сетки в Фигме, что решила просто сделать свой плагин 😁 Так появился Gridly — InDesign-like grids.



Что умеет Gridly
Я старалась сделать не просто ещё один плагин с сеткой, а инструмент, который реально ускоряет работу. Сейчас в плагине есть:— колонки и строки— разные поля справа/слева и сверху/снизу— настройка средников— превью сетки в реальном времени— создание нового фрейма сразу с сеткой— применение сетки к выбранному фрейму— пресеты под десктоп, ноутбуки, планшеты, мобильные устройства, сторис и презентации— отдельный цвет и прозрачность для строк и колонок— русский и английский интерфейс.

И одна из удобных вещей для меня: после применения сетка становится обычной нативной Layout Grid Figma, и ее можно править, не заходя заново в плагин. То есть её можно дальше спокойно редактировать стандартными инструментами Фигмы — без каких-то сложных кастомных объектов.


Самое смешное

Я вообще дизайнер. Для меня код — это максимально «страшная магия», поэтому весь процесс разработки выглядел примерно так: «почему всё сломалось?», «что такое manifest.json», «почему Figma опять ругается?», «почему превью работает только иногда», «что значит networkAccess?» 😁 #божехраниChatGPT и фронтенд-разработчика, с которым я живу)) Сама бы не везде справилась.

Отдельным квестом была модерация Figma Community. Но в итоге плагин всё-таки одобрили 🎉


Зачем я вообще всё это рассказываю

Это был очень прикольный опыт. Иногда какая-то маленькая дизайнерская боль может превратиться в реальный инструмент, которым будут пользоваться другие люди. Так что если вам тоже не хватало более удобных сеток в Figma — можете попробовать Gridly 😊

Если найдёте баги, косяки, или у вас появятся предложения по улучшению и развитию плагина — обязательно пишите. Я сейчас активно собираю фидбек и думаю над следующими обновлениями.


Плагин: https://www.figma.com/communit...



#UI
#UX
#Продуктовый дизайн