> Figma Plugin!

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

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

![figma.png](https://files.seonest.net/images/qnfqnfqnf/post/134/figma.png)

플러그인을 만들기 위한 api와 문서도 잘 정리되어 있습니다.
> https://github.com/figma/plugin-samples
> [create-figma-plugin/quick-start](https://yuanqing.github.io/create-figma-plugin/quick-start/)

플러그인 API를 위한 타입스크립트 [타입 repo](https://github.com/figma/plugin-typings)도 있어서 개발할 때 좀 더 편할 것 같아요.

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

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

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

![easometric](https://camo.githubusercontent.com/f1848146750421adf6690efe2818744f8c2f26abe26e1f0abcc9b323c601ea0f/68747470733a2f2f6161726f6e696b65722e6d652f6561736f6d65747269632e676966)

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

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

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

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

### 직접 그리는 법
> Isometric: 등축 투영법

1. 폴리곤 선택
![cube1](https://files.seonest.net/images/qnfqnfqnf/post/135/image.png)
2. 6각형 만들기
![cube2](https://files.seonest.net/images/qnfqnfqnf/post/136/image.png)
3. edit object click(or double click)
![cube3](https://files.seonest.net/images/qnfqnfqnf/post/137/image.png)
4. 펜으로 선 긋기
![cube4](https://files.seonest.net/images/qnfqnfqnf/post/139/image.png)
![cube5](https://files.seonest.net/images/qnfqnfqnf/post/138/image.png)
5. 각 면 복제: 복제할 면의 선들을 shift로 4개 선택하여 복제해줍니다. 벡터 모드를 벗어나 프레임으로 만들어야 합니다. 틈이 있으면 미세조정하도록 합시다.
![cube6](https://files.seonest.net/images/qnfqnfqnf/post/140/image.png)
![cube7](https://files.seonest.net/images/qnfqnfqnf/post/141/image.png)
![cube8](https://files.seonest.net/images/qnfqnfqnf/post/142/image.png)
6. 끝
![cube9](https://files.seonest.net/images/qnfqnfqnf/post/143/image.png)

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

![isometric](https://raw.githubusercontent.com/SuspectOnTheLam/Isometric/master/misc/iso-demo-3.gif)

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

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

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

![isometric-example](https://files.seonest.net/images/qnfqnfqnf/post/144/image.png)

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

![skewDat](https://files.seonest.net/images/qnfqnfqnf/post/145/image.png)

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

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

![skewDat](https://files.seonest.net/images/qnfqnfqnf/post/146/image.png)

## 마무리하며

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

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

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

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

Figma

Figma cube, skew plugin