10 заметок с тегом

Дизайн

Фигма — это 16К20

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

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. Выходит, что новое супер-выравнивание это модификация обычного, что укладывается в сдабривание этой комбы шифтом. Аналогично сделал для низа, права и верха. Вот так теперь могу:

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

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

3 мес   Дизайн

Недоиспользованные кнопки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4 мес   Дизайн

Колесо

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

9 мес   Дизайн
9 мес   Дизайн

Нескучная письменность

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

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

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

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

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

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

10 мес   Дизайн

Йодалайк

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

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

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

11 мес   Дизайн

Картинка

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

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

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

1 год   Дизайн

Avif

Мне удивительно, что в мире форматов картинок что-то происходит. То есть я не против, конечно. Просто правая бровь поднимается.

Не успели мы не перейти на webp, как пора не переходить на avif. У него ещё, представляете, можно выбрать, сколько надо бит на канал: можно 8, можно 10, а можно и 12.

А ещё в параллельной вкладке Фигмы можно одной кнопкой эскпортнуть пнг-шку. И всегда показывается.

1 год   Дизайн

Солидно

Абсурдный с точки зрения русского языка, но удобный профессионализм: «солидная» заливка.

Бывает заливка градиентом. А когда заливка одним цветом, это в редакторах называется «solid». Вот фон этого бложека сейчас солидный чёрный.

Кстати, если не знали, советую бюрошную «опасность». Это opacity. Очень сподручно: «Понизь опасность, пожалуйста».

1 год   Дизайн

Це ніжка

Тут Рома Ромашов заметил, что в шрифте заголовка была несуразная «ц». Действительно, ножка буквы много о себе думала и больно далеко толкала следующую букву.

Заголовки написаны шрифтом Inter. Он сделан одним из дизайнеров Figma и используется в самом редакторе. А ещё он вариативный.

Когда Рома указал на «ц», я вспомнил, что именно в Inter недавно меняли эту букву. Скачал версию шрифта с гитхаба автора и действительно — «ц» исправлена. Бложек же тянул шрифт с Google Fonts. Подтвердилась моя давняя фобия: нельзя быть уверенным, что используешь новейшую версию шрифта, если импортируешь её из сервиса.

Проверил отличия кроме «ц». Взял панграмму со всеми буквами алфавита. Сверху гугловая версия, снизу новейшая.

До точки буквы идут одинаково. Новая версия знает, что под крышу «т» можно залезть. Ну и новая «ц» экономит место.

Наложил одну версию на другую. Гугловая — красная. Видно, насколько смещается точка.

Чтобы добить тему, сверил русский алфавит и цифры. Кроме «ц» всё то же, разве что лапку «К» подрихтовали.

1 год   Дизайн