[유니티] UnityFigmaBridge : 유니티와 피그마 연동

 

공부용으로 작성되는 페이지입니다. 틀린 부분이나 환경에 따라 오류가 발생할 수 있습니다. 

---

 

나는 피그마에서 주로 UI를 작업하게 되는 편인데, 작업한 UI를 Unity에서 바로 사용할 수 있도록 해주는 연동해주는 기능이 필요했다. 실제로 몇 달 전쯔음 진행했던 VR 프로젝트에서 이러한 작업을 할 일이 있었는데 당시에는 해본 적이 없어 그냥 ' 될껄요?' 라는 대답밖에 할 수 없었다ㅋㅋ 다음에 사용할 일이 있으면 바로 진행할 수 있도록 실습해보려고한다! 

 

---

 

 

0. Fimga Setting

 

연동 테스트 용도이므로 단순 클릭으로 구성된 Figma Prototype을 제작하였다. 

1. Set Up : UnityFigmaBridge 

오늘 사용할 플러그인은 UnityFigmaBridge 로, Figma의 문서와 구성요소를 Unity에 쉽게 import할 수 있도록 도와준다. 

 

GitHub - simonoliver/UnityFigmaBridge: Easily bring your Figma Documents, Components, Assets and Prototypes to Unity

• Unity의 Package Manager에서 Add Package from git URL에 링크를 입력한다.  (입력할 링크는 .git으로 끝나야한다!) 
• Project Setting - UnityFimgaBridge- Create - 새로운 setting을 만든다. 
• Figma Document URL 입력 (=연결시킬 Figma 페이지) 
• (Figma) Setting - Security - Personal Access Token 확인 / (Unity) Figma Bridge Personal Acess Token에 작성
  • 토큰 생성시 Write 권한을 부여해야 정상적으로 사용할 수 있다. 

 

이 과정을 거치면 1차적으로 피그마와 유니티가 연동된다. 

 

2. Setting In Unity

 

유니티 내에서 FigmaUnityBridge의 디테일한 세팅을 조절할 수 있다. 

• Build Prototype Flow : Figma Prototype 기능이 포함된 상태로 가져올지 여부  
• Run Time Assets Scene Path : Figma 파일 Import 시 생성된 Asset을 포함할 Scene의 경로 
• Enable Auto Layout : Unity 내의 가로-세로 레이아웃을 자동 적용할지 여부 
• Screen Binding Namespace 
• Server Render Image Scale 
• Enable Gogle Fonts Downloads : 누락된 폰트가 있을 경우 구글 폰트에서 자동 다운 여부 (구글폰트에도 없으면 다운x)
• Create Screen Name C Sharap File 
• Generate Nodes Marked For Export : Figma에서 Export 설정된 파일을 Import 받는 여부
• Only Import Seleted Page : 선택된 페이지만 Import 받음 

사용할 세팅에만 체크해줬다 참고로 prototype Flow도 체크해줘야 잘 작동된다.

 

3. Sync Document

2번에서 진행한 세팅을 토대로 unity 내부에 figma 파일을 import 할 수 있다.

 

잘 옮겨지면 game view에서 바로 확인이 가능하다.

 

 

 

프르토타입까지 잘 옮겨진 걸 확인할 수 있다.

 

 

---

 

참고영상 ::