Как мы в red_mad_robot автоматизировали экспорт ресурсов из Figma и у разработчиков стало больше времени на свою настоящую работу.

Цифровой кокошник: показывает картинки или настроение владелицы.

Если вспомнить, что на свете есть авангардистские картины, то вопрос «чего бы затридешить» отпадает.

У меня простое правило: ютуб советует — я смотрю. Вдруг там знания, а я не узнаю. Какое-то время ютуб считал, что в моей жизни не хватает именно токарного ремесла. А я и не спорил.

16K20 — распространённый в СССР токарный станок. В тех видосах меня заинтересовало, как мастера подстраивают станок под конкретную работу. А если сейчас инструмент не способен выполнить задачу, ребята на этом же станке вытачивают для него новую деталь.

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

Мой станок — это Фигма и мне интересно совершенствовать этот инструмент под свои задачи.

Дисклеймер: автор понимает, что где-то здесь шкалит задротометр. Надо ловить себя в тот момент, когда обслуживание инструмента из разумной оптимизации превращается в прокрастинацию.

Дано: полноразмерная клавиатура. У неё не заняты F5, F6 и всё с F13 по F19. Девять кнопок ждут того, чтобы их соединили с какими-то частями станка.

Часто надо создавать новые компоненты. Дефолтное сочетание клавиш — opt+cmd+K — не нравится. В целом не фанат комбинаций шифта, контрола, опшна и команда. Есть сочетания, которые уже в ногти вросли, но приучаться к новым бесяво.

Да и создание компонента более востребованное действие, чтобы прятаться за аж двумя модификаторами. Короче, отныне новый компонент создаётся по F5. Здесь и далее, для перенаправления клавиш использую Keyboard Maestro (см. предупреждение про задротометр). Знаю, что на операции, выведенные в нативное меню приложения, можно и системными настройками клавиши навешивать. Но Keyboard Maestro просто приятнее и пригодится далее для автоматизаций посложнее.

Например, для множественного создания компонентов. Эта штука в меню не выведена и горячей клавиши для неё нет. Вот и работка для F6. В Keyboard Maestro забиваю такой скрипт:

При F6 вызывается строка Quick actions, в неё загоняется фраза «Create multiple components» и нажимается Enter.

Прошу обратить внимание на флекс: всё делается со свёрнутым интерфейсом Фигмы.

Иногда надо быстро выставить объект по центру холста. Допустим, это можно и дефолтными клавишами — opt+H+V. Но ведь мне надо, чтобы заодно выставлялись центральные констрейты. Кстати, в этом посте я позволю себе не уточнять «зачем». Это отдельный рассказ :)

Есть затык: у констрейтов не то что горячих клавиш нет, это действие даже в Quick actions не выведено. Надо как-то обнажить ендпоинты. Есть хороший плагин — Automater. Он выводит много полезного в нативное меню Фигмы, а значит у нас появляется апи для связи с Keyboard Maestro. Например, в Automater есть такое:

Это мне и надо. На клавишу F13 вешаю такой скрипт:

Ловкость, грация, изящество:

Таким же образом повесил на F14 центральное выравнивание и установку scale-констрейтов. Полезно, когда иконки рисуешь.

Поговорим о равенстве. Если выбран один объект, Фигма равняет его относительно фрейма. Это классно: хочешь быстро отправить объект в левый верхний угол — opt+A+W. Если же выбрано несколько объектов, то они равняются относительно друг друга. Чаще всего это ожидаемое поведение, но иногда надо выбрать несколько объектов и выровнять их все по левой границе фрейма. Тут Фигма ничего не поделает: упорно будет равнять по левой границе самого левого объекта. Группировку не предлагать, ведь она вмешивается в иерархию слоёв. Кстати, если бы группы не вычленяли слои из своих родителей, в них ещё был бы какой-то смысл супротив фреймам. Fix please.

У Automater есть функция Align Left и она безжалостно равняет объекты по левой границе фрейма, сколько бы их не было выбрано. То что нужно. Делаю так:

Здесь я все же изменил своей нелюбви к комбинациям модификаторов. Я привык, что обычное выравнивание слева — это opt+A. Выходит, что новое супер-выравнивание это модификация обычного, что укладывается в сдабривание этой комбы шифтом. Аналогично сделал для низа, права и верха. Вот так теперь могу:

Или совсем разнос — хоба:

Скептичной настроенный афро-американец из лайфхачных тиктоков спросит: и что, много времени экономит? Наверняка нет: речь о секундах. Не думаю, что дело именно во времени. Есть операции, которые не занимают время. Они просто неловкие. Жаль не время. Жаль, что между тобой и реализацией задуманного всё ещё стоят движения руками. Я хочу, чтобы объект всегда был строго по центру. А сначала выравнять по вертикали, потом по горизонтали, затем вертикальный констрейт, горизонтальный констрейт — не хочу.

Фигма (и прочие профессиональные инструменты) плотно набита функционалом.

Сложно предугадать опции в контекстном меню по правому клику на объекте. Например, иногда надо растрировать форму. Жму правую кнопку, в надежде найти Rasterize selection, а оно не там. Полагаю, для этой функции уже жаль места в меню — и так много всего.

Встречаются горячие клавиши с полным пакетом модификаторов: cmd+shift+option+кнопка — это ж 4 пальца одной руки, а то и вовсе этюд для двух рук.

Опций много, но такая глубина не всегда нужна и желание сохранить простоту фасада понятно. Панельки Афтер Эффектса или Блендера отталкивают новичка, а Фигма чистенькая и нестрашная.

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

Например, двойной клик по кнопке. Если в Афтер Эффектсе дважды кликнуть по кнопке создания прямоугольника, он заполнит собой всю композицию.

Хочу такое же в Фигме: двойной клик по кнопке создания формы, фрейма или текста, создаёт соответствующий слой, полностью заполняющий выделенный фрейм.

Кстати, я сделал плагин, который мгновенно заполняет фрейм тонировкой со scale-констрейтами. Удобно, чтобы делать модалки.

Оператор Фигмы, конечно, не кликает на кнопку, чтобы нарисовать прямоугольник. Он жмёт R. Блендер подсказывает: двойное нажатие на кнопку клавиатуры тоже существует. Если нажать просто G, Блендер, как обычно, свободно перемещает выбранные точки. Но если дважды клацнуть G, точки двигаются вдоль граней.

Такое бы в Фигму. Как и двойной клик по кнопке, двойное R заполняет фрейм прямоугольником.

Или ещё из Блендера: пока скашиваешь грань, можно крутить колёсико и наращивать полигоны для более плавного скоса.

Вот бы и в Фигме: жмёшь R, растягиваешь новый прямоугольник и заодно колёсиком меняешь скругление углов.

Наполнение функциями заставляет Блендер и прочие сложные инструменты глубже использовать средства ввода. Вдохновляться и вдохновляться.

Внезапный пример из Корела. Тут без видео, по памяти. Если зажать мышь и перетаскивать объект, можно кликнуть ещё и правой кнопкой. Тогда в текущем месте создаётся копия. Просто тащишь объект и быстро напуливаешь копии — всего-то надо правой кнопкой в нужных местах тыкать. Эту штуку хочу в Фигму как есть.

Вот такие примеры, как богаче использовать клавиатуру и мышь. Предлагайте свои.

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

Какое-то неведомо что из книги под названием Codex Seraphinianus. Пусть лежит здесь, как пример нескучной письменности.

Ну вы знаете, покрасизмы-лампанизмы. Когда пишут не в линеечку или столбик, а, например, как раса номаи из игры Outer Wilds:

Участник беседы ответвляет свою фразу от исходного сообщения. Если кто-то хочет ответить на эту фразу, он делает ответвление уже от неё. Как если бы в Слаке можно было делать треды неограниченной глубины вложенности.

Или вот ещё круто, из твиттера Лингвопанк:

Оказывается, вязь может быть геометричной. Ещё похоже на человекопонятные куар-коды.

И ещё из закромов — схемы вальсов:

Если встретите ещё что-нибудь типа «как те штуки в Прибытии», скиньте, пожалуйста, мне.

В твиторе потешная анимашка для лайка под постами с тегом Мандалорца. Вот она в слоумо:

Заинтересовало меня то, как красный покебол Бэйби Йоды превращается в сердечко. А именно никак: просто смена формы за один кадр.

Я бы оверзапарился и таки уделил бы кадра 3-4 на морфинг между формами. На деле же анимашка мелкая, проигрывается за треть секунды и можно делать проще.

Это рендер какого-то из новых айфонов. Индикатор в углу показывает, в какую сторону заваливается свет. Клипует белый — уйдёт вправо. Клипует чёрный — влево.

Но рассказать хотел не это. Просто картинка красивая :)

Edit: Рома Ромашов подсказал, что это экспонометр. Он подскажет, если в объективе недостаточно света (завалится влево) или наоборот — всё засвечено.