Figma에서 Godot UI로: AI Studio로 Control 계층 구조 내보내기 (단계별 가이드)

대부분의 게임 UI는 Figma에서 시작됩니다: 메인 메뉴, HUD, 상점 화면, 설정. Godot에서는 유지 관리 가능한 Control 트리—MarginContainer, VBoxContainer, TextureRect, Label, Button, 그리고 Theme—가 필요합니다. 그룹화되지 않은 PNG 폴더가 아니라요.

일반적인 병목 지점은 중간 과정입니다: 디자인은 계속 Frame을 변경하는 반면, 엔지니어는 컨테이너와 앵커를 수동으로 다시 만듭니다. 이 기사에서는 반복 가능한 한 가지 경로를 다룹니다: VberAI Studio (줄여서 AI Studio)를 사용하여 Figma 구조를 Godot 준비된 Control 계층 구조로 변환하는 것입니다. 가져오기부터 에디터 확인까지.

수동 빌드와 AI Studio를 비교하려면 Figma to Godot: Manual vs AI Studio를 참조하세요. Unity 경로는 Figma to Unity UI를 참조하세요.

완료 기준: “Godot에 있다”는 의미

텍스처만으로는 충분하지 않습니다. 다음도 있어야 합니다:

1. 의미 있는 Figma Frame에 매핑되는 노드 트리 (상단 바, 목록, 하단 바 등)
2. 16:9, 세로, 창 모드 크기에서 전체 트리를 다시 조정하지 않고도 견디는 메인 크롬
3. 가능한 한 Label (또는 프로젝트의 텍스트 노드)로 유지되는 텍스트 레이어—이미지로 굽지 않음
4. Figma 크롬 변경 후 다시 내보낼 수 있는 방법 (씬을 처음부터 다시 만들지 않고)

신호, 데이터 바인딩, 지역화 키는 여전히 Godot에 속합니다. AI Studio는 “목업에서 레이아웃 셸을 다시 만드는” 작업을 제거합니다.

사전 요구 사항

항목	참고
Figma	읽기 쉬운 이름의 Frame으로 분할된 화면
AI Studio	VberAI Studio 접근 권한
Godot	Godot 4.x 프로젝트 선호; 내보내기 대상을 Godot으로 설정
에셋 규칙	UI 씬 폴더(예: res://ui/generated/) 및 Theme 배치에 동의

단일 평면화된 전체 화면 스크린샷을 제공하지 마세요—수동 슬라이싱으로 돌아가게 됩니다.

1단계: Figma를 UI 트리처럼 읽히도록 정리

가져오기 전에 간단한 정리는 나중에 엔진에서 노드를 분할하는 것보다 저렴합니다.

방법	이유
명확한 Frame 이름 (Panel_HUD, Btn_Play, List_Item)	이름이 Godot 노드 이름이 됨
그룹에 Frame / Auto Layout 사용; 전체 화면 병합 피하기	계층 구조가 가져온 후에도 인식 가능
가능한 경우 텍스트를 텍스트 레이어로 유지	더 쉬운 Label 매핑
나인슬라이스 패널과 고정 아이콘 분리	늘어남 규칙이 명확해짐
초안 Frame 및 사용하지 않는 변형 숨기기	내보내기 트리의 노이즈 감소

2단계: AI Studio에서 Figma 가져오기

1. VberAI Studio 열기
2. 가져오기 시작, Figma 선택, 파일 업로드 (또는 제품이 지원하는 Figma 연결 사용)
3. 레이어 / Frame 트리에서 실제로 제공할 화면을 확인—파일의 모든 초안이 아니라

이상적으로는 왼쪽에 구조, 가운데 캔버스 미리보기, 오른쪽에 엔진 지향 내보내기 옵션이 보입니다. 내보내기 전에 구조를 확인하세요.

3단계: 내보내기 전에 계층 구조 검증

캔버스에서 다음을 확인하세요:

• 패널 중첩이 머리글 / 본문 / 바닥글 (또는 크롬 규칙)과 일치
• 버튼 히트 영역이 장식 아이콘과 분리
• 지역화 가능한 텍스트가 여전히 텍스트 레이어
• 늘어나는 패널 vs 고정 크기 아이콘 구분

가능하면 AI Studio에서 이름이나 그룹을 수정하세요. Godot에서 깨진 .tscn을 푸는 것은 더 많은 비용이 듭니다.

작은 레이아웃 조정의 경우 의도를 자연어로 설명하세요 (제목과 기본 버튼 사이 간격 좁히기, 목록 항목 높이 통일, 초안 배지 숨기기). 목표는 엔진 객체가 되기 전에 크롬을 확정하는 것입니다—채팅으로 전체 아트 세트를 다시 그리는 것이 아닙니다.

4단계: Godot용 내보내기

대상 엔진을 Godot으로 설정하세요. “스프라이트만”보다 Control 계층 / 씬을 선호하세요.

내보낸 후 Godot에서:

1. 에셋을 합의된 폴더(예: res://ui/generated/)에 배치
2. 내보낸 씬을 CanvasLayer 또는 프로젝트 UI 루트 아래에 연결
3. 루트가 적절한 Control (또는 컨테이너) 트리인지 확인
4. 에디터에서 여러 해상도 미리보기
5. pressed 및 기타 신호, 데이터 채우기를 GDScript / C#으로 평소처럼 연결

로직은 프로젝트에 남습니다. Figma에서 모든 TextureRect / Label / 컨테이너를 수동으로 쌓는 것을 건너뜁니다.

5단계: 에디터 승인 체크리스트

확인	통과 기준
노드 이름	주요 Frame에 매핑; 의미 없는 Node2D / Control 인덱스 더미가 아님
레이아웃	창이 늘어나도 크롬이 사용 가능
텍스트	Label 복사 변경 시 전체 화면을 아트로 다시 내보낼 필요 없음
테마	글꼴과 색상이 프로젝트 Theme에 연결될 수 있거나, Theme에 수동 패스가 여전히 필요함을 알고 있음
재내보내기	Figma 크롬 변경 후 새 내보내기가 씬을 대체하거나 옆에 놓일 수 있음—막히지 않음

글꼴 교체, 안전 영역, 지역화는 일반적으로 여전히 패스가 필요합니다. 이는 정상적인 폴리싱이지 실패한 파이프라인이 아닙니다.

FAQ

이것은 Figma “to code” 플러그인과 같은 것인가요?
대부분은 웹을 대상으로 합니다. Godot에는 Control / 컨테이너 / Theme 규칙이 필요합니다. 엔진 친화적 내보내기는 웹 코드 생성과 같은 제품이 아닙니다.

여전히 Figma에서 디자인하나요?
네. AI Studio는 디자인 구조를 소비합니다; 아트 방향을 설정하지 않습니다. 레이아웃과 토큰은 여전히 Figma에서 옵니다.

Godot MCP는 어디에 적합한가요?
AI Studio는 디자인 → Control 구조를 처리합니다. **Godot MCP**는 씬이 프로젝트에 들어온 후 도움이 됩니다—노드 이름 바꾸기, 신호 연결, Cursor 및 유사한 클라이언트에서 트리 검사. MCP는 “이미지에서 전체 UI를 생성”하지 않습니다. 설정: Godot MCP 설치.

첫 내보내기가 픽셀 완벽한가요?
보통 아닙니다. 승리는 반나절 재구축 대신 몇 분 만에 구조 마이그레이션입니다; 픽셀과 Theme는 Godot에서 마무리됩니다.

디자인 변경 후 재실행 방법

Figma 변경	제안
크롬 행/열, 새 탭	AI Studio를 통해 다시 내보내기
아이콘 틴트 또는 복사만	Godot 씬 / Theme / 번역 테이블 선호
완전히 새로운 아트보드	새 내보내기 → 새 .tscn 또는 합의된 경로 교체