Figma cube, skew plugin

2022.01.08
3 minutes read
942 views
thumbnail

Figma Plugin!

피그마는 협업 기능이 상당히 뛰어난 디자인 툴입니다.

리액트로 만들어져있고, 강력한 플러그인 시스템을 가지고 있습니다.

figma.png

플러그인을 만들기 위한 api와 문서도 잘 정리되어 있습니다.

https://github.com/figma/plugin-samples
create-figma-plugin/quick-start

플러그인 API를 위한 타입스크립트 타입 repo도 있어서 개발할 때 좀 더 편할 것 같아요.

어쨌든 피그마를 저는 아주 단순한 기능들 만 사용 했었기에 매 번 사용할 때마다 알아가고 있는 중입니다.

이번에는 입체적으로 보이기 위한 무언가를 만들다가 몇 가지 플러그인을 사용하였고 괜찮아 보여 남겨보려 합니다.

Easometric

https://www.figma.com/community/plugin/750743440401413268/Easometric

easometric

큐브 형태로 모든 엘리먼트를 조작할 수 있습니다.

그냥 큐브 형태로 어떤 걸 만들려고 할 때 이걸 사용하면 됩니다.

귀찮은 작업이 될 수 있는데 이 플러그인으로 간단하게 만들 수 있어서 좋았습니다.

순수하게 면으로 그린다면 다음과 같이도 그릴 순 있습니다.

직접 그리는 법

Isometric: 등축 투영법

  1. 폴리곤 선택
    cube1
  2. 6각형 만들기
    cube2
  3. edit object click(or double click)
    cube3
  4. 펜으로 선 긋기
    cube4

    cube5
  5. 각 면 복제: 복제할 면의 선들을 shift로 4개 선택하여 복제해줍니다. 벡터 모드를 벗어나 프레임으로 만들어야 합니다. 틈이 있으면 미세조정하도록 합시다.
    cube6

    cube7

    cube8

  6. cube9

Isometric

https://www.figma.com/community/plugin/741184519069077841/Isometric

isometric

Easometric 플러그인을 몰랐을 때 사용했던 플러그인입니다.

큐브 윗 면에 글자를 넣거나 도형을 같이 넣어야 할 때 유용했던 플러그인 입니다.

마찬가지로 github에 플러그인 코드가 있으니 참고하면 도움될 것 같습니다.

https://github.com/SuspectOnTheLam/Isometric

isometric-example

SkewDat

https://www.figma.com/community/plugin/741472919529947576/SkewDat

skewDat

위 2개 툴은 cube에 최적화 되어 있어 각도가 정해져 있습니다.

SkewDat 플러그인을 이용하여 다양한 각도로 skew 할 때 사용하면 좋을 것 같습니다.

skewDat

마무리하며

파그마를 자주 사용하는 편인데 플러그인 도움받을 때가 꽤 많은 것 같습니다.

SkewDat 경우 2년이 된 플러그인임에도 아직 많이 사용되는 플러그인 중에 하나입니다.

좀 더 기능이 있으면 좋을 것 같은 느낌이 드는게 있기도 합니다.

이런 것들을 모아 플러그인을 만들어보는 것도 좋을 것 같습니다.