# 요약 및 축약
**Unity Figma Bridge** 는 피그마 Documents, Components, Assets, Prototypes 를 UGUI 의 형태로 Unity Project 로 쉽게 가져올 수 있게 해주는 Plugin이다!
> Q. Figma 의 용어 설명
> - Documents : Figma 를 이루고 있는 하나의 File, Project 전체를 의미함.
> ![[Pasted image 20231221041522.png|300]]
> - Components : 재사용 가능한 디자인 요소로, 각 화면들에서 공통으로 사용되는 요소들을 Preset 화 시켜둔 것을 의미함. 버튼, 텍스트, 도형들이 해당 됨.
> ![[Pasted image 20231221041754.png|300]]
> - Assets : 디자인에 사용되는 이미지, 아이콘, 폰트 등의 리소스를 의미함. 전체적인 모든 디자인 자산(Asset) 을 의미.
> - Prototypes : 인터랙티브한 모형을 만들어 사용자 인터페이스의 흐름을 Figma 내에서 시험해 볼 수 있게 해주는 기능이다. 링크, 전환, 애니메이션 등을 추가하여 실제 앱이나 웹사이트처럼 동작하는 모형을 만들 수 있도록 한다.
> ![[Pasted image 20231221042607.png|300]]
#### 참고 가능 링크 :
- Github : [GitHub - simonoliver/UnityFigmaBridge: Easily bring your Figma Documents, Components, Assets and Prototypes to Unity](https://github.com/simonoliver/UnityFigmaBridge)
- 소개 영상 : [SWTT - UnityFigmaBridge (유니티와 figma 를 연결시켜주는 extenstion) 사용 방법 - YouTube](https://www.youtube.com/watch?v=ZdiT9nUw8uU&t=159s)
- Creator SNS :
- Mastodon : [simonoliver (@
[email protected]) - Gamedev Mastodon](https://mastodon.gamedev.place/@simonoliver)
- Twitter : [Simon Oliver (@SimonOliverUK) / X (twitter.com)](https://twitter.com/simonoliveruk)
#### 제공 기능 요약
(간단하게만 짚고 넘어가면 됨!)
- 핵심 Figma 요소(Elements)를 네이티브 Unity 오브젝트로 재생성.
- Figma prototype의 흐름을 Unity prototypes 로 쉽게 전환 가능. (Figma Sections 를 포함하여)
- 핵심 Figma shape(타원, 직사각형, 별)를 위한 SDF 렌더러
- 이를 통해, Figma Shape 에 대한 별다른 사진 인출 없이, Figma Image 의 구현이 가능하도록 함.
- 피그마 컴포넌트를 프리팹으로 재생성하고 그에 따라 링크.
- 반응형 레이아웃 및 Unity Safe Area 와의 자동 연결 지원
- 필요한 Text Mesh Pro Asset 자동 생성 (Google 폰트 > 누락된 폰트 다운로드)
- Unity Monobehavior 및 Figma Object 자동 Binding
- Vector Shape 의 Server Side Rendering
- Figma 에 존재하는 오브젝트에 대해 Figma 상에서 Rendering하여, Unity 에는 Image 로 넘겨받는 것을 Server Rendering 이라 한다.
> Q. Figma 용어 설명 2
> - Figma Section : [Organize your canvas with sections – Figma Learn - Help Center](https://help.figma.com/hc/en-us/articles/9771500257687-Organize-your-canvas-with-sections) : section 은 프로젝트내에서 특정 영역이나 구역을 의미함! (여러 페이지 혹은 다양한 Elements 들이 부분적으로 나눠져 있을 때, 이를 Section 을 기반으로 하여 나눔.)
> - Prototyping with section : prototyping 을 이용해서, section 간 흐름을 이동하는 경우 또한 존재하는데, 이때 Figma 는 Section 간 이동 후 다시 되돌아 올 때, 기존 section 에서의 마지막 Frame 을 기억하여 해당 Frame 으로 되돌아 옴.
> - 이 기능이 Unity 내에도 구현된 것으로 보임.
## Setup
### Figma 제작 가이드 (아트와의 협업) (UPDATE)
1. Binding Asset 을 위한 **에셋 이름 짓기 참고사항** :
1. SpaceBar (띄어쓰기) 대신 Underscore(\_) 혹은, Pascal Case (LetterBackgroundImage : 이것처럼 공백 대신 다음 단어 대문자로 표기하는 방법) 로 대체하기.
2. 버튼 용도로 사용되는 이들의 경우, "Button" 을 에셋 이름에 포함하기.
2. 동일하게 사용되는 UI Asset 들 (ex - Button 이나 창들) 에 대해서는 무조건 **Component 기능 사용**할 수 있도록 하기.
- 만들고 나서 교체하기가 힘드므로, 처음 시작할 때 잘 해두는 것이 좋음.
3. **Interaction** 해야 하는 Button, Slider 등과, 내부에 들어가는 **Text**. 이러한 것들은 배경과는 **별도의 Hierachy 로 분리**되어 있는 것이 좋다.
- 이유 : 배경이나 창들은 Group 을 기준으로 render 하여 Image 로 뽑아낼 것이므로, Group 안에 Text 나 Interaction 할 요소가 함께 들어가게 되면, Image 로 뽑아낼 때 같이 render 됨. 따라서, Text 등을 따로 빼두는 것이 용이함.
- 예시 : 동일 Scent 안에, Background 와, Text 가 별도로 구분되어 있음.
![[Pasted image 20240426165107.png]]
4. Interaction 요소나 Text **외의 요소**는 Server rendering (figma 에서 Image 로 render 하고, Unity 에서는 Image 로 받는 것) 을 하는 게 필요할 수 있는데, **FigmaUnityFridge 에서 Server rendering 을 진행하는 요건**은 다음과 같음.
1. Object is a vector shape
2. Object is a frame only containing vector shape children nodes (근데 경험 상 Frame 에 Export 로 되어 있음 그냥 다 Image 로 뽑아 나왔었음.)
3. 이름이 render 를 포함하는 경우.
- **Group 에 Export 만 추가 했다고 해서 Render 되는 것이 아님**을 유의! (이거 기존에 착각하고 있었던 요소. 유의!)
- **이름에 "render" 를 포함하여 Figma 내에 만들어 두는 것**을 권장함.
- 위 명명 규칙과 관련, Pascal 로 Render 적어두기. (대문자 가능 확인함.)
- 영 그러면, "\_" 써도 됨.
- 각 도형에서 적용된 Effect(Shadow, Blur ...)는 Unity 내 적용이 안 됨. 이름에 render 를 작성하여 Server Rendering 돌리는 게 좋음.
- Multiply 와 같은 것들 Unity 내에서 적용이 안 됨. Multiply 를 적용하고 있는 친구와 같이 Group 화 하여 이를 render 로 작성해두는 것이 좋음.
- 예시 : Multiply를 통해 Texture 가 곱해져 있는 상황. 이때, 색 주는 것과 Multiply를 하나로 묶고, BackgroundRender로 명명하여 뽑음.
![[Pasted image 20240426165405.png]]
5. (Render 되는 Image 의 **제일 외곽을 차지하고 있는 Stroke 는 무조건 Inside 여야 함.**) => 이건 Figma Update 로 인해 잘 뽑혀 나오는 듯함.
- Render Image 의 크기는 그 도형의 크기를 기준으로만 판별하기 때문에, 만약 Server Rendering Image 의 외곽에 Stroke 가 있고, 이 Stroke 가 Center 나 Outside 라면, 잘림. 따라서, Inside 여야 함.
> 만약 위 내용이 적용되어 있지 않을 경우, 개발팀에서는 다음과 같은 활동 가능.
> 1. Asset 이름 짓기 (1), Component 기능 사용 (2)은 해당 시점에서 개발팀이 바꾸기 무리가 있음. 정말 필요하지 않다면 생략하고 진행.
> 2. Interaction 및 text 에 대한 Hierachy 분리(3), server rendering 요소에 대한 이름에 "render" 포함은 무조건 진행해야 함. (Import 되는 모양 자체가 바뀌는 것이기 때문에) 이에 따라, 해당 부분은 변경될 수 있음.
> - Item 등과 같이 창이 여러 개가 존재할 경우, 어차피 Auto Layout 이랑, Prefab 기반으로해서 중복 생성해서 만들 것이기 때문에,
> 3. Multiply 나 Background 의 Group 화 후 render 등은 놓치기 쉬운 부분들이라, 처음 먼저 Figma 에 Import 하고 난 후, 어디가 안 좋은지 체크하면서 render 표시하면 더 용이할 것으로 보임.
### Pacakge Setup
1. Package Manager window (Window → Package Manager) 에 들어가서, Add Package from git URL 을 누른다.
2. `https://github.com/simonoliver/UnityFigmaBridge.git` 를 입력한다.
![[Pasted image 20231221044930.png|400]]
3. Project Settings (Edit → Project Settings) 을 열고, "Create" 를 눌러, 새로운 setting 을 만들어 둔다.
4. Fiama Document URL 을 입력한다.
(eg `https://www.figma.com/file/..../...`) => Document URL 이란, 내가 Import 받고자 하는 Figma 파일/프로젝트의 URL 을 의미한다. (일반적으로 떠 있는)
![[Pasted image 20231221045029.png|400]]
5. Settings → Account → Personal Access Tokens 을 통해, Personal Access Token 을 인증한다. ([Figma Personal Access Token from your user profile page](https://www.figma.com/developers/api#authentication), 해당 링크 참조)
1. 이 Personal Access Token 의 경우 Figma 의 계정 Setting 에서 생성할 수 있다.
2. Menu 창의 Figma Bridge Menu 에서 Personal Access Token 을 Setup 할 수 있다.
![[Pasted image 20231221045158.png|400]]
### Settings and Sync
![[Pasted image 20231221044545.png]]
- Figma Unity Bridge 는 다음과 같이 Scriptable Object 로 구성된 Settings Asset 의 값을 변경함으로써 Import Setting 등을 조정할 수 있음. 각각에 대한 설명은 다음과 같음.
1. Document Url : 내가 Import 받고자 하는 Figma 파일/프로젝트의 URL 을 의미.
2. Build Prototype Flow : Figma에서 Prototype 에 관한 기능이 포함된 상태로 가져올지, 가져오지 않을지를 정해줄 수 있음.
1. Figma에서 Prototype 을 통해 Frame 이 바뀌는 동작이 구현되었다 하자.
2. 이때, Frame 이 바뀐다면, PrototypeFlowController 라는 Package 내의 Script 에 의해, UI 전체가 함께 관리되므로, 만약 Scene 변화 등 다양한 상호작용을 넣고자 하는 경우, 이 기능을 꺼주는 것이 좋다.
- 혹은, Canvas 에 위치한 prototype Flow Controller 및 내부에 생성된 Prefab 을 기반으로 자동 적용을 해줄 수도 있다!
3. Run Time Assets Scene Path : Figma Project 를 Import 받아줄 때, Figma 의 파일을 받아오며 생성할 Asset 을 포함할 Scene 의 Path 를 의미함.
4. Enable Auto Layout : Unity 내에 존재하는 Screen Scaler 의 Setting 인 Horizontal/Vertical layout 을 자동 적용할지에 관한 Setting 임.
5. ScreenBindingNamespace : Screen에 대한 MonoBehaviours Binding을 위한 C# namespace 필터. 이 필터를 사용하면 작성한 Namespace의 Monobehavior 에만 바인딩 가능. (ex - 'MyGame.UI'를 입력하면, MyGame.UI.PlayScreen와 같이 해당 namespace 에 속하는 항목만 Screen 에 Binding 됨.)
6. Server Render Image Scale :
1. Server 에서 Rendering 해서 Image 로 Unity 에 Import 되어야 하는 Asset 들이 Figma 상에 존재함.
- 다음 경우에 해당 : "Object" 가 vector shape 거나(1) / vector shape 만을 자식으로 가진 Frame 이거나 - 이건 내가 사용할 땐 vector shape 만 있든 없든, Frame 에 Export 로 체크된 경우 render image 로 뽑혀나오는 것 확인함. (2) / 이름에 rendering 이 포함된 경우. (3)
2. 이때, 해당 Server Render Image Scale Setting 을 변경하여, Rendering 되는 Image 의 크기를 조절할 수 있음.
7. Enable Google Fonts Downloads : 누락된 Text Mesh Pro Font 가 있을 경우, 이를 자동으로 다운로드 할지 말지.
- Google Fonts 에서도 찾을 수 없다면 다운로드 되지 않음.
- 엥간해선 [[UnityFigmaBridge Font 적용 시, 바로 Font 적용 시도]]에서 작성해둔 것처럼 미리 폰트를 찾아서 Project 에 TMP 로 마련해두는 것이 좋음.
- Variable Font 는 다른 웹 환경에서 Regular, Bold 등 다른 폰트로 다변화 가능. 그런데 Unity 에서는 Variable Font를 지원하지 않기 때문에 Static Font 를 이용해야 함.
8. Create Screen Name CSharp File : 발견된 모든 화면이 포함된 C# 파일을 생성.
9. Generate Nodes Marked For Export : 만약 체크되어있지 않다면, Figma 에서 Export 가능으로 check 된 파일에 대해 Import 받지 않음.
10. Only Import Seleted Pages : 선택된 Page 만 Import 함.
- Page 는 Figma의 개념 중 하나로, 해당 Project 내부를 구분하는 가장 큰 단위임. Excel Sheet 의 Page 와 동일.
![[Pasted image 20231221051724.png|300]]
- 만약 해당 Setting 을 On 하였다면,
![[Pasted image 20231221051828.png|300]]
다음과 같이 선택할 수 있는 Page 가 나타나며, 이를 통해 Page 를 선택할 수 있음.
> 해당 Setting 을 잘 체크하여 이후
> ![[Pasted image 20231221052123.png|400]]
> Sync Document 를 클릭하여 Sync 받을 수 있다.
## After Sync
### After Sync
![[Pasted image 20231221051947.png|400]]
Sync 후 다음과 같은 Folder 구조가 생성됨.
- 각각의 항목에는 앞서 설명한 것과 동일한 종류의 형태가 Prefab / Image / Font 등으로 저장됨.
- 일반적으로
- Components : 재사용 가능한 디자인 요소로, 각 화면들에서 공통으로 사용되는 요소들을 Preset 화 시켜둔 것을 의미.
- Screens : 하나의 Page 내부에서, Frame 을 Prefab 화 한 것을 의미.
- 이 두 가지 요소를 가장 많이 사용함.
### Binding Behaviors
- 문제 : Figma 작업이 완료된 후, Sync 를 통해 Figma Project 를 Import 하는 것이 좋지만, 변경사항이 존재하여 다시 해당 Proejct 를 동기화 하여 Unity 로 Import 해야 되는 경우가 존재할 수 있다. 이때, 피그마와 동기화하면 기존 Components와 Screens 등이 대체되므로, Prefab 에 추가한 추가한 Script 등이 없어질 수 있음.
- 해법 : 이에 따라, 동기화 시점에 Script 를 자동으로 추가해주는 기능을 제공함.
1. Figma 오브젝트의 이름(대소문자 구분 없음)과 일치하는 Monobehavoir가 존재하면 해당 Monobehavoir가 첨부됨.
2. 첨부된 MonoBehaviour에 직렬화 가능한 필드(access modifier 가 public 이며, SerializeFiled Attribute 를 사용하는 경우)가 있는 경우 Importer 는 깊이 2 이내 ( 자식의 자식 ) 에 있는 오브젝트의 이름을 찾아 해당 필드에 할당함.
- ex - 아래 사진의 PlayButton 혹은 VersionLabel 처럼 할당.
![[Pasted image 20230814133056.png|400]]
3. 만약 Screen 등에 추가되는 Monobehavior 내에 `[BindFigmaButtonPress("PlayButton")]` attribute 가 포함된 method 가 존재할 경우, "필드" 의 OnClick 에 Listener 로서, 해당 Method 가 Runtime 에서 추가될 수 있도록 함.
4. Figma Object 의 이름에 "Button"이 포함되거나 활성화 Prototype Link 가 있는 경우 버튼 컴포넌트가 추가됨.
5. Figma Object 의 이름이 "SafeArea"인 경우 Safe Area 컴포넌트가 추가됨.
***
# Debug 및 사용 중 파악
#### Bug 1 : Error downloading Figma Server Render Image Data
- [[BUG] while trying to sync document i come across the error "Error downloading Figma Server Render Image Data" · Issue #40 · simonoliver/UnityFigmaBridge (github.com)](https://github.com/simonoliver/UnityFigmaBridge/issues/40)
- For now can you try changing "Server Render Image Scale" in the settings to 1 and try again? => 해당 과정을 거칠 경우 제대로 동작.
#### Bug 2 : Index Out Of Bound
![[Pasted image 20240426114552.png]]
적용해야 하는 Figma 파일의 부분 중 특정 부분 (두 글꼴 겹쳐 사용) 에서 문제가 생겼다는 것을 볼 때, 이것에 문제가 있다고 파악. => 문제 일어났던 글꼴 두 개 겹치는 부분, export 추가해서 Image 로 바꿔버렸음.
- 계속해서 동일 오류 발생하여, Font 추가 (계속 글자 만드는 부분부터 오류 일어났다는 것을 고려하여) / Generate Nodes Marked for export 추가 등 셋팅 일부 변경.
- 이렇게 했을 때도 안 되면, 그냥 Main 이랑 Title 지우고 다시 시도해 볼 것임.
- Main 이랑 Title 지우니까 잘 되네. 왜 이럴까? 신기하네.
#### Bug 3 : URL 제대로 안 받아와 지던 거
###### 결론 및 정리
- 문제 : Figma URL 경로가 원래 `https://www.figma.com/file/~~~` 였다가, `https://www.figma.com/design/~~~` 로 바뀌면서, 해당 경로를 UnityFigmaBridge 가 인식하지 못하게 됨에 따라 발생한 문제.
- 해결 방법 :
- 현재 design 으로 적혀있는 경로를, file 로 바꿔주기만 하면 됨.
- Just Changing `https://www.figma.com/design/ABCDEFGH~~` (current path) link to `https://www.figma.com/file/ABCDEFGH~~` (old path). This problem can be solved.
- 이때 유의하여야 할 점은, file이나 design 뒤에 있는 /ABCD~ 와 같은 query parameter 등과 관련된 경로 부분을 포함하고 있어야 한다는 점!
> 이거 무슨 문제 때문인지 체크한다고, Template 로 만들어 둔 Repository 를 삭제했었는데, 이를 다시 복구.
###### 조사 과정
- 왜 안 될까? + 추가 현상으로, Import 받고, Setting 파일 생성했을 때 문제 발생함.
- 그냥 빈 프로젝트에서 진행했을 때도 동일한 문제가 발생하네. 음...
> 확인함. Figma URL 경로 자체가 문제였음!! Figma 가 기존 file/ 로 시작하는 경로에서, design/ 으로 시작하는 경로로 바뀌면서, 문제가 발생.
- 기존 Figma 경로 : `https://www.figma.com/file/mcZPG791zDwfmcLDxYtIT3/UX%2FUI.main?type=design&node-id=1072-4319&mode=design&t=jCFi92HW5xpds3BO-0`
- 현재 Figma 경로 : `https://www.figma.com/design/mcZPG791zDwfmcLDxYtIT3/UX%2FUI.main?node-id=0-1&t=KUG3fX2KkIFf2sXT-0`
- 그럼, https://www.figma.com/file/mcZPG791zDwfmcLDxYtIT3 만 해도 나오나?
- 나오긴 하네.
- 그럼, File 로?
- `https://www.figma.com/design/phh17SERVmQavCebAqUuy9/Roulette-App?m=auto&t=xPNvaKXO5ZvYaxe1-6`
- `https://www.figma.com/file/phh17SERVmQavCebAqUuy9` => 이걸로 변경하면? => 음! 바로 뜨네! => 근데 Unity 에선 제대로 안 됨.
- `https://www.figma.com/file/phh17SERVmQavCebAqUuy9/Roulette-App?m=auto&t=xPNvaKXO5ZvYaxe1-6` => 뒤에 들어가는 것까지도 고스란히 붙여 넣으면 되네!!!
#### Bug 4 : Setting 처음 생성 시 오류 뜨던 거
- 모든 환경에서 다 그럼. Access Token 설정하고 나면, 문제 안 생긴다!
- figd_gtWbFtJSjkGBWHvRyH8STa3Ppn4moHNM0-DPOa5X
***
***
***
# 기존 자료
[simonoliver/UnityFigmaBridge: Easily bring your Figma Documents, Components, Assets and Prototypes to Unity (github.com)](https://github.com/simonoliver/UnityFigmaBridge)
**Unity Figma Bridge** 는 피그마 문서, 컴포넌트, 에셋, 프로토타입을 UGUI 의 형태로 Unity Project 로 쉽게 가져올 수 있게 해주는 Plugin임.
### 지원 기능
- Supports recreation of core Figma elements as native Unity objects
- 핵심 Figma 요소를 네이티브 Unity 오브젝트로 재생성.
- Recreate Figma prototype flows to easily build Unity prototypes, including Sections
- Unity 프로토타입을 쉽게 빌드 가능 (무슨 뜻인지 모르겠긴 함.)
- SDF renderer for core Figma shapes (Ellipse, Rectangle, Star)
- 핵심 Figma 셰이프(타원, 직사각형, 별)를 위한 SDF 렌더러
- Recreates Figma components as prefabs and links accordingly (including nested components)
- 피그마 컴포넌트를 프리팹으로 재생성하고 그에 따라 링크(중첩된 컴포넌트 포함)
- Responsive layout and support for device safe areas
- 반응형 레이아웃 및 기기 안전 영역 지원
- Automatically generates required font assets (including downloading missing fonts from Google Fonts)
- 필요한 폰트 에셋 자동 생성(Google 폰트에서 누락된 폰트 다운로드 포함)
- Binds Unity MonoBehaviours and fields to Figma objects
- Unity 모노비헤이비어 및 필드를 피그마 오브젝트에 바인딩
- Server side rendering of vector shapes
- 벡터 셰이프의 서버 측 렌더링
- Auto layout support (Experimental - may cause issues on complex layouts)
- 자동 레이아웃 지원(실험적 - 복잡한 레이아웃에서 문제가 발생할 수 있음)
- Scrolling frames (using overflow scrolling settings)
- 스크롤 프레임(오버플로 스크롤 설정 사용)
### Setup
1. Package Manager window (Window → Package Manager) 에 들어가서, Add Package from git URL 을 누른다.
2. `https://github.com/simonoliver/UnityFigmaBridge.git` 를 입력한다.
3. Project Settings (Edit → Project Settings) 을 열고, "Create" 를 눌러, 새로운 setting 을 만들어 둔다.
4. Fiama Document URL 을 입력한다. (eg `https://www.figma.com/file/..../...`) => Document URL 이란, 그냥 Figma 그 문서 URL 을 의미한다.
5. Settings → Account → Personal Access Tokens 을 통해, Personal Access Token 을 인증한다. ([Figma Personal Access Token from your user profile page](https://www.figma.com/developers/api#authentication), 해당 링크 참조)
1. 이 Personal Access Token 의 경우 Figma 의 계정 Setting 에서 생성할 수 있다.
2. Menu 창의 Figma Bridge Menu 에서 Personal Access Token 을 Setup 할 수 있다.
6. TextMeshPro 를 세팅하지 않은 경우, 이를 미리 셋팅하여 둔다.
### Prototyping
기본적으로 Importer는 (Prototype tab에 정의된 대로) 피그마 파일에 있는 프로토타입 플로우를 다시 생성 한다. "Build Prototype Flow"를 끄면 이 기능을 비활성화하여 피그마 에셋만 생성할 수 있다.
만약 Build Prototype Flow 가 선택되어 있을 경우, 이것은 필요 에셋 (Canvas, Controller, EventSystem) 등을 생성하며, 활성화된 Scene 에 Defulat Scene 을 생성한다.
Button 등도 자동으로 구현될 수 있도록 만들려고 한다 하지만, 이것은 되고 있는지 안 되고 있는지 잘 모르겠음.
=> 현재로서 봤을 때는 끄고 하는 것이 나을 것으로 보임.
### Syncing your Figma Document
- Click Figma Bridge → Sync Document
- Enter your Personal Access Token (this will be stored in your Player Prefs for future use)
- It will ask if you want to use the current scene to generate prototype flow - Click yes
### Selecting Figma Pages
만약 Figma Document 에서 특정 페이지만을 가져 오고자 하는 경우, "Select Pages to import"를 체크하면 된다.
이때, 가져올 수 있는 페이지 목록이 표시되며, 선택한 페이지의 에셋만을 가져올 수 있다.
### Font
만약 대응되는 Font 가 없을 경우, 이를 Google Fonts 에서 자동으로 다운로드 받아와, 대응되는 TextMeshPro 로 만들어 준다는 것도 굉장히 좋은 일인 듯!
### Responsive layout
Screens 는 Constraint Panel 의 Constraint setup 에 따라 자동하며, "Scale" 에 관한 constraint 는 예외이다.
Binding Behavoir 에서 언급될 텐데, SafeArea component를 사용하여, 해당 컴포넌트를 사용하는 기기에 영역을 자동으로 조정할 수 있다.
Screens will behave according to constraints setup in the constraints panel, with the exception of "Scale" constraint. You can use the _SafeArea_ component to automatically adjust the safe area for devices that use them (eg iPhone), as mentioned in _Binding Behaviours_
### Binding Behavoir
피그마와 동기화하면 기존 컴포넌트와 화면이 대체되므로, 추가한 Script 등이 없어질 수 있다.
이에 따라, 동기화 할 때마다 수동으로 추가하기 보단, 동기화 시점에 자동으로 Script 를 추가할 수 이쏘돍 해주는 package 를 제공한다.
MonoBehaviours 는 Component 와 Screen 에 자동으로 Binding 할 수 있으며, 메서드는 Button 클릭에 대해 Binding 할 수 있다.
![[Pasted image 20230814133056.png]]
- Figma 오브젝트의 이름(대소문자 구분 없음)과 일치하는 Monobehavoir가 존재하면 해당 Monobehavoir가 첨부된다.
- 첨부된 MonoBehaviour에 직렬화 가능한 필드(SerializeField 속성을 사용하는 공개)가 있는 경우 Importer 는 깊이 2 이내 ( 자식의 자식 ) 에 있는 오브젝트의 이름을 찾아 해당 필드에 할당한다.
![[Pasted image 20230814133104.png]]
- \[\[BindFigmaButtonPress("PlayButton")]] attribute 를 Method 에 추가할 경우, 해당 이름의 버튼의 onClickEvent 에 Listener 로 추가된다. (깊이 2 이내)
- Figma Object 의 이름에 "Button"이 포함되거나 활성화 프로토타입 링크가 있는 경우 버튼 컴포넌트가 추가된다. (프로토타입 링크는 Figma 의 기능인 것으로 보임.)
- Figma Object 의 이름이 "SafeArea"인 경우 안전 영역 컴포넌트가 추가된다.
### Transitions
The FigmaScreenController can have a TransitionEffect which implements transitions in and out animations. By default a template fade to black effect is created but can be replaced and assigned.
The FigmaScreenController 는 애니메이션의 전환을 구현하는 TransitionEffect 를 가질 수 있습니다. 기본적으로 template fade to black effect 가 생성되지만 대체 및 지정할 수 있습니다.
***
***
***
# 실전 사용
## 23.10.11 사용
1. Git 기반으로 해서 Setup 함.
2. Figma 주소 받아옴.
3. Personal Access Token 설정함
4. Pages 중 몇몇 개만 선택함.
5. 이후 Sync 해서 해당 Figma 파일을 들고 옴.
- Pages 가 게임 오브젝트들의 조합으로서 이뤄지는 게 아니라, 하나의 이미지로서 나오고 있음. 대체 왜? 무슨 차이가 있어서 이렇게 표시되었나?
- 봤을 때 둘 다 Frame 으로 시작하고, 딱히 구조적인 차이점이 보이지는 않는다.
- => 좀 더 현상을 정확히 분석 : 내부가 Text 및 기타 내용으로 이뤄져 있는 친구들이, 하나의 PNG / 그림 으로 커다랗게 Export 되는 현상.
- UnGroup 했을 때, 위의 사진 (계층 상 Figma 에서 윗 부분에 위치) 하는 친구들은 사진으로 Export 되었는데, 아래에 위치하는 부분들은 또 제대로 Export 되었음.
해결해야 하는 문제
1. Font 관련 : 이건 기존에 해당 Font 를 다운로드 받아두면 됨. 그럼 그 Font 이용. (Download Font 기능을 끌 수 있도록 하기.)
2. 일부분이 Image 로 export 되는 문제를 해결할 것.
### 문제 해결
#### 2번 : 일부분이 Image 로 Export 되는 문제
- If an object is marked for export, then it will render it as an image, download it as a PNG and place it in the path matching the object name. This can include file paths - for example you could name a node "Textures/Icon/GameIcon" and it will write the PNG file to "Assets/Textures/Icon/GameIcon.png" => Figma Unity Bridge 와 연결되어 있는 부분.
- export 에 대한 mark가 되어 있긴 하던데. 이것과 연관되어 있지 않을까?
- Show In export 이 부분.
- 이건 아예 관련이 없더라
- 만약 이 부분도 안 된다고 하면, 아예 둘의 차이를 위주로 확실히 살펴봐야 할 텐데. 안 되면, 각 부분 따로 내가 새로 만든 Figma 파일 둬서 둘 수 있도록 하자. => 용량이나 해상도가 너무 커서 오류가 생겼다. 느낌으로 이해하고 넘어가야.
- 솔직히 차이 못 찾겠음 ㅇㅇ
- 아 알았다!! Image Fill 이 적용되면, PNG 로 Import 되는데, 배경을 구현하기 위해서 Image Fill 을 이용해서 처리되었기 때문이다!
![[Pasted image 20231011122323.png]]
=> 아니네 흠....
해결하긴 함.
- export 가 체크되어 있으면 (jpg 나 png) 이걸 기준으로 빌드되는 것 같음. 이걸 안 하니까, 그냥 바로 빌드 잘 되네. 해결!
- 그리고, 맨 앞에 있는 Frame 만 JPG 등으로 되는 게 체크 안 되어 있으면, 그 아래에 해당하는 부분들은 잘 나옴!
- 그리고 page 의미하는 건, Figma 좌 상단에 요로코롬
![[Pasted image 20231011123802.png]]
뜨는 친구인데, 이걸 기준으로 하여 뽑아내는 것이 가능함! 아주 좋음!
#### Font 및 관련 문제
![[Pasted image 20231011125437.png]]
1. 일단 기존 Text Style 은 이것을 기반으로 확인할 수 있음.
2. TMP 자체엔 문제가 없음. 확인했을 때, 글자가 나오다가 팍 들어가는 부분이 있는 건, Text 자체의 문제인 것 같음. (입력이 잘 되어 있는 것처럼 보이지만, 사실 제대로 입력이 안 된 것. 혹은 다른 문자가 그 중간에 들어가 있다던가.)
3. Line 은 20 - 30 으로 하면 적절할 듯.
4. 확인했을 때, A B 가 있다고 하면, AB 가 겹쳐져 있는데, 이 경우, A 가 문제인 것을 확인. 혹은 그 사이에 있는 공백 문자가 문제. => 이게 아니었는 듯. 앞의 것만 지운다고 해서 문제가 해결되진 않음. 어떻게 대응해야 하는지 확실히 둘 것.
=> **문제가 있는 단어가 있고, 이를 지우고 다시 작성해야 함.**
- 앞 뒤의 공백 문자도 함께 지워줘야 함.
5. 또한 Font 가 중간중간 마다 들어가 있는 경우, 조절해주는 것이 어려운 듯. 하나의 텍스트 박스 안에선 하나의 Style 만 사용해야 함.
6. 비활성화 된 내용도 모두 출력됨. 하지만, Picture 의 경우에는 따로 문제 없었는데, 왜 그런 것인지는 잘 모르겠음. ![[Pasted image 20231011131057.png]]
왜 이렇게 되는 걸까? 왜 꺼져 있는 게 보일까?
![[Pasted image 20231011131144.png]]
- 그리고 위쪽 정렬로 되어 있는데, 실제로는 가운데 정렬해야 맞는 것처럼 보이는 게 꽤 많음.
- 또한 화살표처럼 약간 복잡한 모양으로 되어있다면, Figma To Unity 관련 동작이 약간 잘 먹히지 않는 것으로 보인다.
- 모두 Static 하게 되어있다면, 그냥 사진을 사용하는 게 더 편할 수 있을 것 같긴 함!
## 이전 사용 (23.08.01)
1. Plastic SCM 을 기반으로 추가
1. Plastic SCM 치명적 오류 : Folder 명 사이에 존재하는 띄어쓰기를 "%20" 등으로 인식함!!! 이거 신경 써서 경로 추가할 수 있도록 해야 할 듯!
2. Project Setting 내부에 Unity Figma Bridge 관련 항목이 나와 있긴 하다.
3. 각 페이지에 해당하는 친구들의 Link 를 들고 와서, 그걸 Document URL 에 넣어도, 그것만 Download 해 오는 것이 가능한 것으로 보임!
이건 호재야~
=> 아닌 것 같기도 하고? 이건 악재야...
4. 대신 Font 도 다운받고, 다른 것들도 다운 받고 해서, Import 하는 시간 자체는 꽤 오래 걸리는 듯!
5. 실제 Scene 에서 생성되기 보다는, prefab 등으로 생성되는 듯함.
6. Font 가 매칭되지 않았는데, 이를 해결하기 위한 방법 :
1. Google Font에서 동일한 Font 를 다운로드 받은 경우.
2. Google Font에 동일한 Font 가 있는 경우 다운로드 받음.
3. 또는 가중치 적으로 가장 비슷한 이름을 가진 Font 로 다가감!
7. Plastic SCM cloud 를 만들었지만, Unity Dashboard 에 추가가 되지 않은!
1. 아 UVCS Organization 에 들어가야 뜨는 구나!
8. 이미 Sync가 되어 있을 경우, 다시 Sync Document 를 하면 어떻게 처리되는가? => 다 다시 바뀌긴 하지만, 기존 게 없어져서 오히려 좋은 듯!
## 실전 사용 느낀 점
- 거의 모든 게 다 완벽함. 쓰면서 보완할 점도 어느 정도 찾음.
1. 한국어의 경우 넉넉하게 figma의 폭을 유지하는 것이 좋을 듯.
- 아래 사진 처럼 폭을 좁게 유지할 경우, 이 폭까지 다 옮겨지기 때문에. ![[Pasted image 20230816154410.png]]
- 정렬 또한 마찬가지임. Figma 에서 정렬까지 잘 되어 있다면, 손 쓸 게 거의 없음.
***
***
***
# 23.12.21 : 문서 재정리 전, 원본 소개 문서에서 질문 파악 및 이해 늘리기
> *다 번역하지 말고, 모르는 부분을 집중적으로 파악하는 것을 목적으로 함.*
Figma Documents, Components, Assets, Prototypes을 Unity로 쉽게 가져올 수 있음! 이 패키지를 사용하면 Figma Document를 Unity 프로젝트에 연결하고 모든 figma asset을 Native Unity UI로 임포트하는 것이 매우 간단해집니다.
- *Q. Figma 의 Documents / Components / Assets / Prototypes 에 대한 개념을 파악할 필요가 있음.*
게임 잼, 빠른 프로토타이핑, Figma 디자인을 Unity로 쉽게 가져오는 데 유용합니다. Unity 2021.3.X에서 테스트되었습니다(다른 버전은 아직 테스트되지 않음).
- *Features > Recreate Figma prototype flows to easily build Unity prototypes, including Sections : Unity 프로토타입을 쉽게 빌드 가능 (무슨 뜻인지 모르겠긴 함.)*
- *Figma의 Prototype flow 를 생성. / Figma Section 에 기반한 동작을 구현. 각 섹션의 활성 화면은 프로토타입 플레이 중에 기억*
- 전반적으로 Prototype 이란 것에 대한 이해가 따로 없어서 발생하는 문제로 보이긴 함.
- 빌드 프로토타입 플로우를 선택하면 필요한 에셋(캔버스, 프로토타입 컨트롤러, 이벤트 시스템)을 생성하고 활성 씬에 기본 화면을 인스턴스화함.
- 재생을 눌러 프로토타입 플로우를 시작하면 버튼이 피그마 문서에 따라 지정된 화면으로 전환됨.
- Figma 의 Page 개념에 대해 설명해야 함.
- How Figma objects map to Unity => 이 부분도 생각보다 중요한 듯. 각 Figma 의 Object 들이 어떻게 Unity 로 map 되는가에 대한 설명. 이걸 잘 알고 있었으념,ㄴ 사실 따로 문제가 발생하지 않았을 수도 있으니깐!