피그마 for UI 프로토타입, and Unity
피그마 툴은 디자이너나 퍼블리셔 분들이 주로 사용하는 UI 디자인 툴입니다. 포토샵의 역할을 대신한다고 합니다. 저는 유니티의 UGUI와 UI-Toolkit을 모두 접해보고 강의로도 배워도 보았지만 생각만큼 자유롭게 프로토타입을 만들 만큼 익숙해지기는 어려웠습니다. 그래서 피그마 툴을 개발 파이프라인 안에 넣으면 좋겠다는 생각을 가지게 되었었습니다. 그러고보니 8개월 전에 결제해 놓고 따라 하다가 지쳐서 조금밖에 못 들었던, 강의시간이 24시간이 넘는 피그마 강의가 있었는데요, 이번에는 5시간 분량의 피그마 디자인 시스템 유료 강의를 전부 들었습니다.
[영상]
위 영상의 결과물은 인프런 강의를 들으며 따라 만들었습니다. (https://www.inflearn.com/course/%EB%94%94%EC%9E%90%EC%9D%B8-%EC%8B%9C%EC%8A%A4%ED%85%9C-with-%ED%94%BC%EA%B7%B8%EB%A7%88/dashboard) 영상처럼, 피그마로는 체계적인 디자인 시스템 관리가 가능하고, 템플릿을 만들어서 재사용이 가능하며, 피그마 토큰을 사용해서 가장 작은 단위의 디자인 시스템인 color, font, font-size 등을 변수처럼 지정해서 재사용할 수 있습니다. 또한 필요하다면 white/black mode를 쉽게 스위칭하고 Desktop/Tablet/Mobile mode도 쉽게 스위칭 하도록 만들 수 있습니다. 그리고 피그마를 사용해 UI 프로토타입을 만든 다음에는 프론트엔드/클라이언트 개발자에게 디자인 토큰(색상, 폰트, 폰트사이즈 등)을 넘겨주는 것도 json 파일로 쉽게 가능하게 됩니다.
유니티의 UGUI나 UI-Toolkit을 사용해서 UI를 만드시는 분들은 이런 피그마를 사용해서 UI프로토타입을 만들고, 디자인 시스템도 관리하면 편리하실 것 같습니다. 제가 사용해본 소감은, 프로토타이핑 툴이 체계적인 것 같다는 느낌을 받은 순서를 꼽자면 Figma > UI-Toolkit > UGUI 입니다.
흥미로운 내용이 하나 더 있는데요, 피그마에서 만든 프레임을 유니티의 UGUI로 그대로 옮겨올 수 있다고 합니다. 우연히 발견했습니다.ㅎㅎ 이렇게 되면 UI-Toolkit의 입지가 애매해지네요.
아래 포스팅이 가장 잘 설명해주고 있었습니다. (크롬 번역기 사용)
https://zenn.dev/happy_elements/articles/66c199160b017d
FigmaからUnityの画面を作りたい Figma Unity # convert tech はじめに デザイナーさんに「FigmaからUnityに画面取り込めないの？」と相談されたのがきっかけで調査しました。 いくつかアセットなどあったのですが「Figma Converter for Unity」と「UnityFigmaBridge」の2つを使ってみました。 検証したUnityのバージョンは「Unity2022.2.1f1」の「3D(URP)」です。 Microsoftの「MRTK Figma ツールキット」も調べてみようと思ったのですが、MicrosoftがHoloLensの開発を中止したり開発チームを 解散 させたりしていたの… Figma Unity # convert tech はじめに デザイナーさんに「FigmaからUnityに画面取り込めないの？」と相談されたのがきっかけで調査しました。 いくつかアセットなどあったのですが「Figma Converter for Unity」と「UnityFigmaBridge」の2つを使ってみました。 検証したUnityのバージョンは「Unity2022.2.1f1」の「3D(URP)」です。 Microsoftの「MRTK Figma ツールキット」も調べてみようと思ったのですが、MicrosoftがHoloLensの開発を中止したり開発チームを 解散 させたりしていたの…
유니티에서 피그마 작업물을 그대로 가져오려면 세 가지 에셋 중 하나를 사용할 수 있습니다.
- 유니티 에셋 스토어의 'Figma Converter for Unity'
- 깃헙의 'ManakhovN / FigmaToUnityImporter'
- 깃헙의 'simonoliver / UnityFigmaBridge'
당연히 판매자에 의해 관리되고 있는 에셋 스토어의 유료 에셋이 제일 좋을 거라고 생각했는데, 모두 사용해본 후 작성된 위의 포스팅을 보니 꼭 그렇지만은 않을 수도 있더군요.
각각의 링크는 다음과 같습니다. 사용하신다면 참조하실 수 있습니다. https://assetstore.unity.com/packages/tools/utilities/figma-converter-for-unity-198134?locale=ko-KR
Figma Converter for Unity | 유틸리티 도구 | Unity Asset Store Use the Figma Converter for Unity from D.A. Assets Publisher on your next project. Find this utility tool & more on the Unity Asset Store. Use the Figma Converter for Unity from D.A. Assets Publisher on your next project. Find this utility tool & more on the Unity Asset Store.
https://github.com/ManakhovN/FigmaToUnityImporter
GitHub - ManakhovN/FigmaToUnityImporter: The project that imports nodes from Figma into unity. The project that imports nodes from Figma into unity. - GitHub - ManakhovN/FigmaToUnityImporter: The project that imports nodes from Figma into unity. The project that imports nodes from Figma into unity. - GitHub - ManakhovN/FigmaToUnityImporter: The project that imports nodes from Figma into unity.
https://github.com/simonoliver/UnityFigmaBridge
GitHub - simonoliver/UnityFigmaBridge: Easily bring your Figma Documents, Components, Assets and Prototypes to Unity Easily bring your Figma Documents, Components, Assets and Prototypes to Unity - GitHub - simonoliver/UnityFigmaBridge: Easily bring your Figma Documents, Components, Assets and Prototypes to Unity Easily bring your Figma Documents, Components, Assets and Prototypes to Unity - GitHub - simonoliver/UnityFigmaBridge: Easily bring your Figma Documents, Components, Assets and Prototypes to Unity
감사합니다.
