유니티(Unity) 프로젝트에 피그마(figma) 디자인 문서를 가져오기 및 통합하기 (UnityFigmaBridge)

유니티(Unity) 프로젝트에 피그마(figma) 디자인 문서를 가져오기 및 통합하기 (UnityFigmaBridge)

UnityFigmaBridge는 피그마(Figma)의 문서, 구성 요소, 자산,  프로토타입을 유니티 프로젝트에 가져오기하고 네이티브 유니티 UI에 쉽게 통합 및 연결할수있는 플러그인입니다.

https://github.com/simonoliver/UnityFigmaBridge

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

 

UnityFigmaBridge 패키지 설치

1)유니티 패키지 관리자(package manager)에서 좌측 상단의 + 버튼을 클릭하고 add package from git URL을 선택합니다.

 

2)아래 git URL를 입력하여 UnityFigmaBridge 패키지를 설치합니다.

https://github.com/simonoliver/UnityFigmaBridge.git

 

 

TextMeshPro 패키지 설치 및 TMP 필수 리소스 가져오기

3)피그마에서 가져오기한 텍스트(Text) 에셋은 네이티브 유니티 UI의 TextMeshPro를 사용합니다.  TextMeshPro 패키지를 설치하고  TextMeshPro 메뉴에서 import TMP Esseintial Resources를 선택하여 TMP 필수 리소스를 가져오기합니다.

 

 

Unity Figma Bridge 설정 에셋 생성

4)프로젝트 설정의 Unity Figma Bridge에서 create를 클릭하여 Unity Figma Bridge 설정 에셋을 생성합니다

 

5)프로젝트에 Unity Figma Bridge 설정 에셋이 생성된것을 확인할수있습니다.

 

6)Document URL에 프로젝트에 가져오기할 피그마(figma) 문서의 URL를 입력합니다. 해당 URL이 유효하면 하단에 Valid Figma Document URL - FileID라고 표시합니다.

Figma 샘플 문서 URL
https://www.figma.com/design/DIhmjD8NcAF2UHf69y53fn/Figma-Unity-Bridge-Example

 

7)상단 Figma Bridge 메뉴에서 Set Personal Access Token을 선택합니다.

 

 

피그마 사이트에서 Personal Access Token 생성하기

8)피그마(figma) 사이트에서 계정 설정으로 이동합니다.

 

 

9)Security 탭의 Personal Access Token에서 Generate new token을 클릭하면 새로운 액세스 토큰을 생성합니다.

 

 

10)유니티에서 Personal Access Token을 입력하고 확인합니다.

 

 

피그마 문서 가져오기 및 통합(Sync Document)

11)상단의 Figma Bridge 메뉴에서 Sync Document를 클릭하면 피그마(figma) 문서 파일 및 에셋을 다운로드하고 가져오기(import) 시작합니다

 

 

12)문서를 정상적으로 다운로드 및 가져오기하면 유니티 프로젝트에서 FigmaOutput 파일과 Figma 폴더가 생성된것을 확인할수있습니다.

FigmaOutput 파일

 

Figma 폴더

13)Figma 폴더에는 피그마 오브젝트로부터 생성한 프리팹(Components, Pages, Screens), 폰트(fonts),  PNG로 다운로드되어 스프라이트(Sprite)로 가져오기한 에셋(ImageFills),  서버에서 PNG로 렌더링된 벡터(ServerRenderedImages)등이 포함됩니다.

 

폰트(Fonts)

14)프로젝트(TMP의 필수 리소스)에 해당 글꼴이 없는 경우 구글폰트(Google Fonts, Jonathan Neal의 google-fonts-complete 프로젝트)에서 일치하는 TTF 글꼴을 다운로드하고 새로운 TextMesh Pro 글꼴을 생성합니다. 구글 폰트에 일치하는 글꼴이 없는 경우 가져오기(import) 과정에서 콘솔에 폰트 누락을 표시합니다.

 

15)Sync document를 수행하기 이전에 필요한 모든 폰트를 TextMesh Pro 폴더의 Resources/Fonts & Materials 폴더에 준비할것을 권장합니다.

 

 

유니티 런타임에서 피그마 프로토타입 플로우(prototype flow) 확인

16)피그마 문서를 정상적으로 가져오기 완료하면 씬의 캔버스 하위에서 기본 설정된 게임 오브젝트를 확인할수있습니다(ScreenParentTransform, TransitionFadeToBlack)

또는 두 게임 오브젝트(ScreenParentTransform, TransitionFadeToBlack)를 수동으로 추가하고 시작 스크린을 추가합니다.

17)런타임에서 프로토타입 플로우(prototype flow)가 정상적으로 작동하는것을 확인할수있습니다.

 

 

 

PrototypeFlowController

캔버스 오브젝트에서 PrototypeFlowController 컴포넌트를 확인합니다.  현재 활성화된 스크린 인스턴스(Current Screen Instance) 를 확인할수있으며 스크린 목록(Screens)에서 스크린의 피그마 노드 id(Figma Node Id), 스크린 이름, 참조 프리팹을 확인할수있습니다.
피그마(figma) 문서에서 동일한 이름의 스크린이 존재하지않도록 작업합니다.

 

 

FigmaPrototypeFlowButton

UnityFigmaBridge가 프리팹을 생성할때 버튼 오브젝트의 경우 FigmaPrototypeFlowButton 컴포넌트를 추가하고 Target Screen Node Id를 할당합니다. 버튼을 클릭했을때 활성화할 대상 스크린 ID(figma Node Id)를 의미합니다. 버튼을 클릭하면 대상 스크린을 검색하고(PrototypeFlowController) 씬에 생성 및 활성화합니다.
피그마(figma) 문서에서 한개의 버튼에 연결된 스크린이 2개이상이 되지않도록 작업합니다.

 

 

 

- 피그마 문서 가져오기 과정에서 누락된 리소스가 존재하면 수동으로 에셋을 가져오기 및 설정합니다.
- TextMeshPro (TMP) 텍스트의 레이캐스트 대상 (raycast target) 속성을 비활성화합니다.

 

 

참고

[SWTT] UnityFigmaBridge (유니티와 figma 를 연결시켜주는 extenstion) 사용 방법
https://youtu.be/ZdiT9nUw8uU

 

 

https://publish.obsidian.md/pavdup-second-brain/2.+%ED%99%9C%EB%8F%99+%2B+%EC%B0%BD%EC%9E%91/Developments/Game/Unity/000.+Permanent/UnityFigmaBridge+-+Figma+%EB%94%94%EC%9E%90%EC%9D%B8+%EC%97%90%EC%85%8B%EC%9D%84+Unity%EB%A1%9C+Import+%ED%95%98%EB%8A%94+%EB%B2%95

 

 

Figma to Unity direct import
https://youtu.be/4LjvsMXwaI8