Figma 원본 이미지

reference/ 는 Figma 「Cocode Scaffold App v1.0」 페이지 49:4 의 화면 프레임 79개를 1배율로 내보낸 원본 PNG 다 (폰 390 35장 · 태블릿 1024 11장 · 데스크톱 1440 33장). 화면마다의 노드 id · 섹션 · 역할 · 기기 · 크기 · 캡션 · 원본 링크는 화면 대장 docs/product/figma-screens.json 에 있고, 대장의 image 가 이 폴더의 파일을 가리킨다. 구현 캡처와 견줄 기준 이미지다 — 구현 캡처로 덮어쓰지 않는다.

내보낸 방법

• 2026-11-01 에 내보냈다(대장 exportedAt = 2026-11-01T13:24:43Z).
• Figma MCP get_screenshot 에 maxDimension = 프레임의 긴 변, contentsOnly: true 를 주면 1배율 PNG 의 짧은 수명 URL 이 온다. 받자마자 curl -f -L 로 저장했다. 파일 이름은 대장 key + .png 다(예: SH-03+SH-04@1440.png).
• 이미지는 크기를 바꾸거나 고치지 않는다. 모든 PNG 가 프레임 크기 그대로다 — 세로로 긴 프레임(예: 390×1412)도 그 크기가 기준이다. Figma 렌더 그대로라 Figma 쪽 결함도 그대로 담긴다. 고칠 곳은 Figma 다.

대장의 insets · modes

• insets.top 은 상태 바(SystemBarPhone) 띠의 아래 끝, insets.bottom 은 홈 인디케이터(HomeIndicator) 띠의 높이다(논리 px, 없으면 0). 인스턴스 안(BottomActionBar · 스캐폴드안 · InputBar · BottomSheet)에 든 것까지 찾았다. 앱이 그리지 않는 띠라 대조에서 가린다.
• modes.typography 는 CoUI 「Semantic/ Typography」, modes.color 는 앱 색 컬렉션(CoUI 확장 「Semantic/ Color · CoUI → Blue」)의 모드 이름이다. 프레임의 explicitVariableModes 를 읽고, 프레임에 없으면 resolvedVariableModes(상속 · 컬렉션 기본값)를 적었다 — 390 프레임은 Typography 모드를 명시하지 않아 기본 모드 Mobile 이다. 정할 수 없으면 null 이다.

한 화면 다시 내보내기

1. 대장에서 그 화면의 node · width · height 를 확인한다.
2. get_screenshot(fileKey 6yq0C3oSVVR2HdaOe807eB, nodeId = node, maxDimension = 긴 변, contentsOnly: true)으로 받은 URL 을 바로 curl -f -L -o docs/design/figma/reference/<key>.png "<url>" 로 저장한다(URL 은 곧 만료된다 — 어디에도 적지 않는다).
3. 프레임 크기 · 캡션 · 상태 바 · 홈 인디케이터가 바뀌었으면 대장의 해당 필드도 고치고, exportedAt 을 내보낸 시각(UTC)으로 바꾼다.
4. 확인: dart tool/design/check_figma_screens.dart — 필드 · key · PNG IHDR 크기 · 기기 폭과, 대장이 가리키지 않는 PNG 를 본다. 계약 게이트 tool/gates/check_all.sh 도 이 검사를 부른다.