Figma MCP 정리
1. Figma MCP란
Figma MCP는 Claude Code 같은 AI 에이전트가 Figma 파일을 읽고 수정할 수 있게 해주는 Figma 공식 MCP 서버입니다. 스크린샷 대신 레이어 구조, 변수, 컴포넌트 정보를 에이전트에게 넘겨줍니다.
쓰는 방향은 세 가지입니다.
| 방향 | 내용 | 주로 쓰는 도구 |
|---|---|---|
| 디자인 → 코드 | 프레임 링크를 주면 구조와 스타일을 읽어 코드로 구현 | get_design_context, get_variable_defs, get_screenshot |
| 코드 → 디자인 | 에이전트가 Figma 캔버스에 프레임, 컴포넌트, 변수를 직접 만들거나 수정 | use_figma, generate_figma_design |
| 디자인 시스템 연결 | Figma 컴포넌트와 코드 컴포넌트를 매핑 | Code Connect 도구, search_design_system |
MCP 서버는 선택한 레이어의 구조, 레이아웃, 변수 정보를 에이전트에게 전달하는 역할만 합니다. 최종 코드는 에이전트가 작성하고, 에이전트는 Code Connect, 변수, 규칙 파일, 프롬프트로 알려준 것만 압니다. 그래서 결과물은 Figma 파일 정리 상태와 프롬프트에 크게 좌우됩니다.
2. 플랜과 사용 한도
교육 플랜 팀에서 Dev 또는 Full 시트를 받으면 하루 200회까지 쓸 수 있습니다. 무료(Starter) 플랜이나 View·Collab 시트는 한 달에 6회라 실사용은 어렵습니다.
| 플랜 / 시트 | 읽기 도구 호출 한도 |
|---|---|
| Starter 플랜, View·Collab 시트 | 월 6회 |
| Pro·Organization의 Dev·Full 시트 (교육 플랜 포함) | 일 200회, 분당 10~15회 |
| Enterprise의 Dev·Full 시트 | 일 600회, 분당 20회 |
- 한도는 읽기 도구에만 적용됩니다.
use_figma같은 쓰기 도구와whoami는 차감되지 않습니다. - 캔버스에 쓰려면 Full 시트가 필요합니다. Dev 시트는 드래프트 파일에서만 쓸 수 있습니다.
- 캔버스 쓰기는 현재 베타라 무료이고, 이후 사용량 기반 유료로 바뀔 예정입니다.
교육 플랜은 학교 메일로 Figma Education에서 신청한 뒤, 승인되면 팀 하나를 Education 팀으로 업그레이드하면 됩니다. 교육 플랜은 팀 단위라서 다른 팀 파일에서는 그 팀의 시트가 따로 필요합니다.
한도는 빨리 소진됩니다. whoami는 되는데 파일 읽기만 실패하면 한도를 다 쓴 경우가 많습니다. 큰 화면을 통째로 읽거나 실패한 호출을 반복하지 말고 작게 나눠서 읽습니다. 한도에 걸렸을 때는 스크린샷을 직접 첨부해 작업을 이어갈 수 있습니다.
3. 설치와 연결
서버는 remote(https://mcp.figma.com/mcp)와 desktop(http://127.0.0.1:3845/mcp) 두 가지가 있습니다. Figma는 remote를 권장하고, 캔버스 쓰기 같은 최신 기능도 remote에서만 됩니다. desktop 서버는 Figma 앱이 켜져 있어야 하고 기능도 적어서 쓸 이유가 거의 없습니다.
desktop 서버는 로컬 주소라서 클라우드에서 실행되는 Claude는 접근할 수 없습니다. 연결이 계속 타임아웃되면 remote 서버를 쓰고 있는지 먼저 확인합니다.
Claude Code에서는 Figma 플러그인을 설치하는 방법을 권장합니다. MCP 설정과 공식 스킬이 함께 설치됩니다.
claude plugin install figma@claude-plugins-official
서버만 추가하려면 아래 명령을 씁니다.
claude mcp add --transport http figma https://mcp.figma.com/mcp
설치 후 Claude Code에서 /mcp로 figma를 선택해 Figma 계정으로 로그인합니다. claude mcp list에 figma가 보이고, “whoami 실행해줘”에 계정과 시트가 나오면 연결된 것입니다.
사용할 때는 Figma에서 프레임을 우클릭해 Copy link to selection으로 링크를 복사하고 프롬프트에 붙입니다. 링크의 node-id로 대상을 지정하기 때문에, node-id가 없는 파일 전체 링크를 주면 범위가 너무 넓어 느리거나 실패합니다.
https://www.figma.com/design/<fileKey>/<파일이름>?node-id=12-345
연결 문제는 whoami로 먼저 범위를 좁힙니다. whoami부터 실패하면 서버 주소나 인증 문제이고, whoami는 되는데 파일만 안 되면 한도나 권한 문제입니다. 보기 권한만 있는 파일에서는 일부 도구가 동작하지 않을 수 있으니, 편집 권한을 받거나 파일을 복제해서 씁니다.
use_figma나 generate_figma_design이 목록에 없다면 desktop 서버가 같이 등록돼 있는 경우가 대부분입니다. 두 서버의 도구 이름이 비슷해서 클라이언트가 desktop 서버만 쓰고 remote 전용 도구를 불러오지 않습니다. claude mcp list에 http://127.0.0.1:3845/mcp가 보이면 claude mcp remove figma-desktop으로 지우고 Claude Code를 다시 시작합니다.
4. 도구
에이전트가 요청에 맞는 도구를 알아서 고르기 때문에 이름을 외울 필요는 없습니다. 다만 결과가 이상할 때 “get_variable_defs로 변수만 가져와줘”처럼 도구를 지정할 수 있도록, 어떤 도구가 있는지는 알아두는 게 좋습니다.
자주 쓰는 도구는 아래와 같습니다. 읽기 도구는 한도가 차감되고, 쓰기 도구는 차감되지 않습니다.
| 도구 | 종류 | 하는 일 |
|---|---|---|
get_design_context |
읽기 | 노드의 구조와 스타일을 코드로 반환. 기본 출력은 React + Tailwind |
get_metadata |
읽기 | 레이어 ID, 이름, 타입, 위치, 크기만 담은 XML 개요. 노드 없이 호출하면 페이지 목록 |
get_screenshot |
읽기 | 노드 스크린샷 |
get_variable_defs |
읽기 | 노드에 쓰인 변수와 스타일 |
download_assets |
읽기 | 이미지·아이콘을 PNG, SVG 등으로 내보내기 (호출당 노드 20개) |
search_design_system |
읽기 | 연결된 라이브러리에서 컴포넌트·변수·스타일 검색 |
whoami |
계정 | 이메일, 플랜, 시트 확인. 한도 차감 없음 |
use_figma |
쓰기 | Plugin API 코드를 파일 안에서 실행해 생성·수정·조회 |
generate_figma_design |
쓰기 | 실행 중인 웹 화면을 Figma 레이어로 가져오기 |
html_to_figma |
쓰기 | HTML을 레이어로 변환. 컴포넌트·변수와는 연결되지 않음 |
upload_assets |
쓰기 | 이미지·SVG를 파일에 업로드 |
generate_diagram |
쓰기 | 설명이나 Mermaid로 FigJam 다이어그램 생성 |
이 밖에 애니메이션(get_motion_context), FigJam 읽기(get_figjam), Code Connect, 생성형 플러그인·셰이더 관련 도구가 있습니다. 전체 목록은 참고 링크의 공식 문서에 있습니다.
결과가 기대와 다르면 프롬프트를 고치기 전에 도구 선택이 맞는지 먼저 확인합니다. use_figma는 Plugin API를 직접 쓸 수 있어 다른 도구로 안 되는 작업 대부분을 처리할 수 있지만, 실수도 가장 많이 나오는 도구입니다.
5. 디자인을 코드로
프레임 링크를 주고, 구조와 스크린샷을 받아 프로젝트 규칙에 맞게 구현한 뒤 스크린샷과 비교하는 순서로 진행합니다.
프레임 링크 복사 → get_design_context → 너무 큰가?
├ 예 → get_metadata로 쪼개기 → 필요한 노드만 다시 get_design_context
└ 아니오 → get_screenshot → 우리 규칙으로 번역 → 스크린샷과 1:1 비교
- 페이지 전체가 아니라 헤더, 카드처럼 섹션이나 컴포넌트 단위로 링크를 줍니다.
get_design_context로 구조와 스타일을 받습니다. React + Tailwind로 나오지만 디자인을 표현한 결과일 뿐이고, 최종 코드는 프로젝트 방식에 맞게 다시 작성합니다.- 응답이 너무 크거나 잘리면
get_metadata로 노드 목록을 받고, 필요한 노드만 다시 요청합니다. get_screenshot으로 이미지를 함께 넘기면 레이아웃이 더 정확해집니다.- 색이나 간격 값이 하드코딩되면
get_variable_defs로 변수 이름을 받아 토큰으로 바꿉니다. - 완성한 화면을 스크린샷과 비교합니다.
프롬프트에는 프레임워크, 스타일 방식, 재사용할 컴포넌트 경로, 결과 파일 위치를 적어주는 게 좋습니다.
이 프레임 구현해줘: <Figma 링크>
- Next.js + vanilla-extract, Tailwind는 쓰지 않음
- src/components/ui의 Button, Input 재사용
- 색과 간격은 get_variable_defs로 받은 변수 이름 사용
- src/app/login/page.tsx에 작성
변수 이름을 받아도 코드에 같은 이름의 토큰이 없으면 에이전트는 결국 값을 하드코딩합니다. Figma 변수 이름을 코드의 토큰 이름과 맞춰두면 MCP가 넘긴 이름을 그대로 쓸 수 있습니다.
Code Connect로 Figma 컴포넌트와 코드 컴포넌트를 매핑해두면 get_design_context 결과에 실제 import 경로와 사용 예가 포함됩니다. 매핑이 없으면 에이전트가 어떤 컴포넌트인지 추측해야 합니다. Figma 플러그인의 figma-code-connect 스킬로 시작할 수 있고, 교육 플랜(Professional)은 한 번에 프레임워크 하나만 매핑할 수 있습니다.
MCP 서버가 주는 이미지 링크는 임시 링크라 시간이 지나면 만료됩니다. 실제로 쓸 이미지는 프로젝트 폴더에 저장해서 로컬 파일로 연결합니다. 에이전트에게 “이미지는 public/images에 저장해서 써줘”처럼 요청하면 됩니다.
6. 코드로 디자인 만들기
use_figma는 에이전트가 작성한 Plugin API 코드를 Figma 파일 안에서 실행하는 도구입니다. 실제 프레임, 오토레이아웃, 컴포넌트, 변수가 만들어지고, 변수 컬렉션 생성, 배리언트 추가, 레이어 이름 일괄 수정, 조건에 맞는 노드 검색 같은 작업을 할 수 있습니다. remote 서버 전용이고 Full 시트가 필요합니다. 베타 기능이라 결과물은 직접 확인해야 합니다.
디자인 시스템 작업처럼 반복이 많은 작업에 특히 효과적입니다. 변수 컬렉션을 계층별로 만들고, 텍스트 스타일을 정의하고, 기존 컴포넌트의 색, 테두리, 모서리, 간격에 변수를 일괄 연결하거나, 컴포넌트 이름의 오타와 대소문자 불일치를 한 번에 정리할 수 있습니다.
Plugin API는 에러 없이 실패하는 경우가 많아서 결과를 스크린샷으로 확인하는 과정이 필요합니다. 반대로 에러가 났더라도 일부 변경은 이미 적용됐을 수 있으니, 같은 호출을 그대로 반복하지 말고 대상 상태를 먼저 확인합니다. 자주 생기는 문제는 8장에 정리했습니다.
use_figma를 쓸 때는 스킬을 같이 쓰는 게 좋습니다. 스킬은 도구 사용법을 담은 마크다운 지침이고, Figma 플러그인을 설치하면 함께 들어옵니다. 기본은 figma-use이고 FigJam용 figma-use-figjam, Slides용 figma-use-slides, Code Connect용 figma-code-connect가 있습니다. 스킬 없이 쓰면 폰트 로딩이나 변수 연결에서 실수가 잦습니다. 팀 규칙(네이밍, 토큰 구조, 사용 폰트)을 스킬로 만들어두면 매번 설명하지 않아도 됩니다.
다른 쓰기 도구와는 이렇게 구분해서 씁니다.
| 상황 | 도구 |
|---|---|
| 기존 컴포넌트와 변수를 써서 만들기 | use_figma |
| 실행 중인 웹 화면을 Figma로 가져오기 | generate_figma_design |
| HTML을 레이어로 변환 | html_to_figma |
| 플로우차트, ERD 같은 다이어그램 | generate_diagram |
새 이미지는 use_figma로 넣을 수 없어서 upload_assets로 업로드해야 합니다.
실행 중인 화면 가져오기
generate_figma_design은 브라우저에서 실행 중인 화면을 Figma 레이어로 가져옵니다. 코드로 만든 화면을 디자이너와 같이 검토할 때 씁니다. 가져온 레이어는 라이브러리와 연결되지 않은 일반 레이어입니다.
- 에이전트에게 “로컬 서버 실행해서 화면을 새 Figma 파일로 캡처해줘”라고 요청합니다. 기존 파일 링크를 주면 그 파일에, “클립보드로”라고 하면 클립보드에 담깁니다.
- 에이전트가 서버를 띄우고 브라우저 창을 엽니다. 첫 화면은 자동으로 캡처됩니다.
- 브라우저 툴바의 Entire screen으로 전체 화면을, Select element로 특정 요소를 추가로 캡처합니다.
- 끝나면 Open file로 Figma 파일을 엽니다.
캡처할 파일에 변수 라이브러리가 추가돼 있으면 색, 숫자, 문자열 값이 일치하는 변수에 자동으로 연결됩니다. 우리 변수로 연결하고 싶다면 캡처 전에 라이브러리를 먼저 추가합니다. Figma에서 수정한 뒤에는 그 프레임 링크를 다시 에이전트에게 주고 코드에 반영하게 할 수 있습니다.
스킬 직접 만들기
반복되는 작업은 팀 스킬로 만들어두면 매번 같은 설명을 하지 않아도 됩니다. Claude Code에서는 레포에 .claude/skills/<스킬이름>/SKILL.md 파일을 만들면 됩니다.
---
name: generate-screen
description: 기존 라이브러리 컴포넌트와 변수로 화면 전체를 만들 때 사용. 새 컴포넌트를 만드는 작업에는 쓰지 않음.
---
# Generate screen
## When to use
-디자인 시스템 라이브러리를 따라야 하는 새 화면을 만들 때
## Instructions
1.use_figma를 쓰기 전에 figma-use 스킬을 먼저 불러온다
2.라이브러리에서 컴포넌트를 먼저 검색한다
3.fill, stroke, 텍스트는 변수에 연결한다
4.시맨틱 토큰을 우선 사용한다
## Examples
-"로그인 화면 만들어줘" → 라이브러리의 Input, Button으로 로그인 프레임 생성
## Common edge cases
-필요한 컴포넌트가 없으면 새로 만들지 말고 사용자에게 알린다
name은 폴더 이름과 같게, 소문자와 하이픈으로 짓습니다.description은 에이전트가 스킬을 고르는 기준입니다. 언제 쓰는지와 언제 쓰지 않는지를 구체적으로 적습니다.- 내용이 길어지면
references/(네이밍 규칙, 변수 구조),scripts/(검증 코드),assets/(템플릿) 폴더로 나눕니다. - 파일을 크게 바꾸는 스킬은 자동 실행되지 않게 설정하고, 테스트는 복제한 파일에서 합니다.
- 실행은 채팅에서
/<스킬이름>으로 합니다.
use_figma 호출이 실패하면 바로 재시도하지 않고, get_metadata로 중간 상태를 확인해 반쯤 만들어진 요소를 정리한 뒤 원인을 고쳐서 다시 실행하도록 스킬에 적어두는 게 좋습니다.
7. 결과물 품질 높이기
결과물은 Figma 파일 정리 상태, 프롬프트, 규칙 파일에 따라 달라집니다.
Figma 파일은 아래 기준으로 정리합니다.
- 반복되는 요소(버튼, 카드, 인풋 등)는 컴포넌트로 만듭니다.
- 색, 간격, 모서리, 타이포는 변수로 지정합니다. 변수가 없으면 값이 하드코딩됩니다.
- 레이어 이름은
Frame1268대신CardContainer처럼 역할이 드러나게 짓습니다. - 오토레이아웃을 씁니다. absolute로 배치한 요소는 코드에서도 absolute로 나옵니다.
- 동작이나 정렬처럼 화면만으로 알 수 없는 내용은 주석(annotation)으로 남깁니다.
프롬프트에는 프레임워크, 스타일 방식, 재사용할 컴포넌트, 결과 파일 위치를 적고, 원하는 도구를 안 쓰면 도구 이름을 직접 지정합니다.
반복해서 말해야 하는 규칙은 프로젝트의 CLAUDE.md에 적어둡니다. Figma 공식 가이드의 예시를 줄이면 다음과 같습니다.
## Figma MCP 규칙
1.get_design_context를 먼저 호출하고, 응답이 잘리면 get_metadata로 노드를 나눠 다시 요청
2.get_screenshot으로 이미지를 확인한 뒤 구현
3.MCP 출력(React+Tailwind)은 프로젝트 컨벤션으로 변환
4.색, 간격, 타이포는 토큰 사용, 하드코딩 금지
5.기존 컴포넌트 재사용
6.MCP가 준 localhost 이미지·SVG를 그대로 사용, 아이콘 패키지 추가와 플레이스홀더 금지
7.완료 후 스크린샷과 비교
디자인을 Figma에 직접 만드는 작업이 많아지면 규칙도 길어집니다. 이때는 규칙을 세 층으로 나눠 쓰면 프로젝트가 바뀌어도 재사용하기 쉽습니다.
| 구분 | 담는 내용 | 적용 방식 |
|---|---|---|
| 공통 작업 원칙 | 재사용, 사용자 수정 보호, 변경 범위, 기록, 검수 | 모든 프로젝트에 적용 |
| 프로젝트 설정 | 색·글자·간격 토큰, 컴포넌트, 버튼 배치, 페이지 구성, 용어 | 해당 프로젝트에서 합의한 값 |
| MCP 환경별 지침 | 페이지 전환, 글꼴, 호출·복구 방식, 지원 API | 현재 환경에서 확인한 조건 |
아래는 더모먼트에서 쓰는 디자인 작업 가이드에서 핵심만 뽑은 예시입니다. Claude Code는 CLAUDE.md, Codex는 AGENTS.md에 넣으면 됩니다.
# 디자인 작업 규칙 · Figma MCP 가이드
## 우선순위
사용자 지시·이미 합의한 범위 > 프로젝트 설정 > 이 문서의 공통 기본값.
API 지원 여부, 글꼴, 호출 한도는 현재 실행 환경에서 확인한다.
과거 작업의 성공·실패 경험만으로 다른 환경의 동작을 단정하지 않는다.
## 공통 작업 원칙
-반복 요소는 기존 컴포넌트를 우선 사용하고, 없으면 컴포넌트로 만들어 인스턴스로 배치한다.
-사용자가 수정한 영역을 임의로 다시 만들거나 전체 재검수하지 않는다.
-한 화면의 수정만 보고 모든 생성물에 확대 적용하지 않는다.
-방향이 정해지지 않은 큰 변경은 대표 화면 하나로 먼저 확인한다.
-사용자가 지정한 sandbox 파일에서만 작업한다.
-프로토타입 연결은 요청받지 않으면 추가하지 않는다.
-대상 노드, 변경 전후 값, 생성·수정 ID, 검수 결과를 기록한다.
## 디자인 시스템
-색은 변수, 글자는 텍스트 스타일, 간격·모서리·높이는 프로젝트 토큰을 쓴다.
-필요한 토큰이 없으면 임의 값으로 숨기지 말고 기존 토큰으로 표현할 수 있는지 확인한다.
-색만으로 상태를 전달하지 않는다. 문구, 아이콘, 테두리를 함께 쓴다.
## 작업 흐름
1.지시, 프로젝트 설정, 인계 문서를 읽고 대상 파일·페이지·노드를 정한다.
2.수정 직전에 대상의 최신 상태를 필요한 범위만 조회한다. 저장된 ID 기록은 캐시로 취급한다.
3.큰 페이지 전체 메타데이터를 기본 조회 방식으로 쓰지 않는다.
4.기존 컴포넌트·변수·스타일을 먼저 재사용하고, 바뀌는 속성만 수정한다.
5.구조 검사 → 대표 화면 스크린샷 확인 → 문제 부분만 수정 → 기록 갱신.
## Figma MCP 환경
-use_figma 호출 전 figma-use 스킬을 읽는다.
-listAvailableFontsAsync()로 글꼴을 확인하고, loadFontAsync()를 모두 await한 뒤 텍스트를 수정한다.
-한 호출에서 페이지는 최대 한 번만 전환한다. 여러 페이지 작업은 페이지별 호출로 나눈다.
-같은 노드·변수·스타일을 동시에 수정하지 않는다.
-생성·수정 노드 ID와 검수 결과를 return으로 돌려준다.
## 오류와 재시도
-오류가 나도 일부 변경이 이미 적용됐을 수 있다. 자동 롤백을 가정하지 않는다.
-safeToRetryWithoutCanvasRead가 false이거나 정보가 없으면, 대상 상태를 확인한 뒤 재시도한다.
-생성 호출을 그대로 반복해 중복 노드를 만들지 않는다.
원본 가이드에는 이 밖에 레이아웃 규칙, 상황별 컨트롤 선택표, 검수 기준, 되돌리기 절차, 프로젝트 설정 템플릿이 있습니다. 프로젝트마다 설정 템플릿만 채우면 공통 원칙은 그대로 가져다 쓸 수 있습니다.
여러 세션에 걸친 작업에서는 앞 세션에서 해결한 문제를 다음 세션이 다시 겪기 쉽습니다. 세션이 끝날 때 인수인계 문서를 만들고 맨 앞에 주의사항(스크린샷은 base64로 받기, 큰 파일은 findAllWithCriteria로 조회하기, Inter로 만든 노드 표시하기 등)을 적어두면 같은 실수가 반복되지 않습니다. 해결한 문제는 규칙 파일이나 스킬로 옮겨둡니다.
레포가 여러 개라면 CLAUDE.md 같은 AI 설정을 중앙 저장소 한 곳에서 관리하고, 수정 사항을 GitHub Actions로 각 레포에 PR로 보내 팀원이 확인 후 머지하게 할 수 있습니다. Figma MCP 규칙도 여기에 넣어두면 어느 레포에서 작업하든 같은 규칙이 적용됩니다.
8. 자주 겪는 문제
큰 파일 읽기
규모가 큰 파일은 프레임 하나만 get_metadata로 열어도 타임아웃이 날 수 있습니다. 파일 전체를 받지 말고 필요한 정보만 읽습니다.
- 구조가 필요하면
use_figma에서findAllWithCriteria({ types: ['COMPONENT_SET'] })처럼 필요한 타입만 찾고, 반환값도 이름과 id 정도로 줄입니다. figma.loadAllPagesAsync()가 동작하지 않으면 페이지마다page.loadAsync()를 호출합니다.- 화면을 확인할 때는
get_screenshot을enableBase64Response: true로 받습니다. 작업 환경에서 figma.com 접근이 막혀 있으면 URL로 받은 이미지를 내려받을 수 없기 때문입니다. - 노드를 정확히 지정하려면 Dev Mode 링크(URL에
&m=dev)를 사용합니다.
use_figma 오류
| 구분 | 문제 | 해결 |
|---|---|---|
| 폰트 | 폰트를 로드하지 않으면 텍스트 스타일 적용이 에러 없이 실패 | 사용할 폰트의 모든 굵기를 figma.loadFontAsync로 먼저 로드 |
| 폰트 | 실행 환경에 원하는 글꼴(예: Pretendard)이 없으면 다른 글꼴로 생성되거나 기존 텍스트를 수정할 수 없음 | listAvailableFontsAsync()로 글꼴 제공 여부를 먼저 확인. 없으면 대체 글꼴로 만든 노드와 원래 글꼴을 기록해두고 나중에 교체 |
| 텍스트 스타일 | figma.로 호출하면 동작하지 않음 |
node.setTextStyleIdAsync(styleId) 사용 |
| 변수 | 호출 사이에 상태가 유지되지 않음 | 호출마다 getLocalVariableCollectionsAsync, getVariableByIdAsync로 변수를 다시 가져옴 |
| 변수 | setBoundVariableForPaint에 변수 이름을 넘기면 실패 |
변수 객체를 넘기고, 첫 인자는 {type: 'SOLID', color: {r:0,g:0,b:0}} 같은 완전한 paint |
| 배리언트 | editComponentProperty로 속성 이름을 바꾸면 오류 |
자식 컴포넌트 이름만 변경(속성 1=Default → variants=Default). 폰트 로드도 필요 없음 |
| 배리언트 | 레이아웃 없는 컴포넌트 세트에서 clone()하면 같은 위치에 겹침 |
복제 후 좌표 재배치. 패널 순서와 캔버스 위치는 별개 |
| 오토레이아웃 | resize(w, h) 후 크기가 고정됨 |
resize 후 layoutSizingVertical = 'HUG' 또는 'FILL' 재지정 |
| 오토레이아웃 | 하단 탭바 같은 절대 위치 자식이 적용되지 않음 | 부모에 추가 → layoutPositioning = 'ABSOLUTE' → x, y 지정 순서로 처리 |
| 화면 생성 | 중첩 구조 생성 중 오류 | 화면 프레임을 먼저 페이지에 추가한 뒤 자식 생성 |