У разработчиков есть шутка: «Никогда не тратьте 10 минут на дело, которое вы можете сделать руками. Ведь вы можете потратить 10 часов на автоматизацию этого дела».

Шутка кажется смешной, но только на первый взгляд.

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

Однажды мой коллега показал мне Automator на MacOS. Встроенный инструмент, с помощью которого можно автоматизировать рутину.

Нужно переименовать 500 файлов с определенным именем и расставить порядковые номера? Нужно отрезайзить 100 изображения по большей стороне? Не проблема!

Во времена, когда работали в Photoshop, я активно использовал Actions, и потом обрабатывал изображения по 1 клику.

С той поры я стараюсь автоматизировать всё, что можно автоматизировать и это супер облегчило мою жизнь.

Как-то раз мы собирали пак иконок для дизайн-системы. Там было порядка 200 иконок размером 24x24. Нужно было создать из них удобные компоненты, чтобы изменение размеров и стиля делалось переключателями в инстансе, а цвет иконки наследовался при переключении инстанса.

Итак задача В каждый компонент положить 3 варианта (16, 24, 32) в 2 видах (филл и строук). В обводке каждого размера поставить нужную толщину линий, без дробных значений.

Векторный слой внутри компонента должен иметь одинаковое имя, чтобы при смене иконки в инстансе не сбрасывался цвет. В мастер-компоненте добавить соответствующие проперти.

В итоге получается 1200 состояний.

Как подступить к этой задаче? Можно дать 4 дизайнерам по 50 иконок и ждать пока каждый сделает 300. А можно сделать так, чтобы не долго ждать.

Я пошел искать возможности автоматизации. Нашел Figma плагин, который также называется Automator. Он позволяет собрать последовательность действий и применять их в один клик.

Это не единственный путь, но у меня он был такой.

Я проанализировал последовательность ручных действий и перенес их в ряд действий внутри плагина: • Копирование фрейма в компоненте • Переименование (мы же знаем, что для чтения проперти компонента Figma использует имя слоя) • Выбор векторного слоя • Переименование шейпа • Выставление размера • Проверка строук/фил и выставление нужной толщины линии … КОРОЧЕ ВЫ ПОНЯЛИ

Дальше эта последовательность выгружается в JSON и отправляется коллегам. Мы потратили буквально несколько часов, чтобы у нас появился удобный пак иконок в дизайн системе.

Плюсы: сэкономили кучу времени, люди не заебались.

Минусы: Я стал ещё ленивее и хочу автоматизировать вообще всё.

Сейчас же, во времена AI, только идиот не станет автоматизировать рутину. Это же так интересно!

Как-нибудь напишу, как я делал локализацию интерфейсов через JSON i18n в Figma.