Плагины трансформации


Разбираемся с плагинами, выполняющими трансформацию изометрии (скосов и поворотов) — аналоги skew в CSS. Если вам нужно добавить объема в дизайн и создать псевдо-3D-объекты, эта подборка для вас. 

SkewDat

SkewDat - интерфейс
SkewDat — интерфейс

Очень удобный плагин, позволяющий настроить скос по горизонтали и вертикали. 

Результат работы отображается в CSS (вкладка Code) —  как transform: matrix . 

SkewDat - результат работы
SkewDat — результат работы

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

Из недочетов стоит отметить только отсутствие предустановленных «круглых» значений, позволяющих собирать объемные фигуры. 

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

Ссылка на плагин: https://www.figma.com/community/plugin/741472919529947576/SkewDat  

Isometric

Isometric - интерфейс
Isometric — интерфейс

Плагин наклоняет элемент на заданное количество градусов в одну из двух сторон. При этом изменяется каждый элемент в группе, из-за чего часть контента вываливается за пределы фрейма. 

Isometric - результат работы
Isometric — результат работы

В CSS можно посмотреть значение трансформации transform: matrix . 

По какой-то причине у нас также возникли проблемы с откатом изменений — фрейм частично не показывал свое содержимое. 

Ссылка на плагин: https://www.figma.com/community/plugin/741184519069077841/Isometric

Easometriс

Esometric - интерфейс
Esometric — интерфейс

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

Esometric - выбор стороны
Esometric — выбор стороны

Мы уже делали обзор на Easometriс, ознакомиться с ним можно здесь. 

Easometric - результат работы
Easometric — результат работы

Ссылка на плагин: https://www.figma.com/community/plugin/750743440401413268/Easometric

Ease Isometric

Плагин Ease Isometric позволяет выполнять трансформацию слоёв в Figma.

Доступны быстрые пресеты — один из четырех вариантов расположения на кубе. 

Изометрия в Figma
Изометрия в Figma

Кроме того, плагин (на 5 октября 2020) предлагает создать два вида готовых фигур: куб и трубку. 

Подробнее о работе с Ease Isometric читайте в обзоре.

Какой плагин для изометрии лучший?
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:


👋 Курс дизайнера за полцены: сформируйте портфолио и найдите высокооплачиваемую работу. Помощь с трудоустройством!

По теме:


<