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




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

SkewDat (теперь платный)

Альтернатива: плагин Skew To Figma (спасибо Олегу из комментариев :) )

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 читайте в обзоре.

Warp it

Плагин Warp It позволяет искажать векторные фигуры по сетке.

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

Подробнее о возможностях читайте в обзоре. 

 

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

Помогла ли вам эта статья?

Вы уже голосовали
Комментариев: 4
  1. Денис

    Плагин SkewDat, к сожалению, уже платный(
    2$ Месячная подписка стоит. Спасибо за статью)

    1. SVGPNG.RU (автор)

      Желание разработчика заработать можно понять, но нельзя понять, кто будет платить 2 доллара за один плагин. Где-то в политике Фигмы по отношению к разработчикам есть дыра, которая не позволяет им получать отчисления, не забирая по два бакса в месяц с юзера напрямую.

      Спасибо за уточнение, добавлю в текст)

    2. Саша

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

  2. Олег

    Нашёл замену SkewDat, называется «Skew To Figma» сиреневый логотип (пока что)

Добавить комментарий

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