Figma에서 코드로: AI를 활용한 단계별 가이드
Figma 디자인을 코드로 자동 전환하려면 MCP와 함께 Dev Mode를 사용하세요. 필요 조건: Figma Dev Mode 접근 권한, GPT-4o 기반 Cursor와 같은 AI 어시스턴트 또는 유사 모델, 기본 레이아웃 원리 이해, 정확한 프롬프트 작성 능력. 이 과정은 반복 가능성을 위한 체계적인 프레임 구조에 의존합니다.
프레임 명명 구조:
%페이지이름 %유형 [%화면너비 · %테마]예시: 홈 기본 [1920 · 라이트]. 중단점: 1920px, 1280px, 768px, 375px. 테마: 라이트/다크.
레이아웃 준비하기
AI 오류를 최소화하기 위해 다섯 가지 핵심 규칙을 따르세요.
규칙 1: 콘텐츠와 스타일. 실제 크기의 컨테이너에 최종 텍스트와 그래픽을 삽입하세요. 스타일 생성: 라이트/프라이머리, 다크/프라이머리.
규칙 2: 블록 구조. 전체 페이지뿐만 아니라 블록(히어로, 메뉴, 푸터)에 대해 별도의 프레임을 사용하세요. 이렇게 하면 지역화된 편집이 가능합니다.
규칙 3: 리사이즈 로직. 시각적 표시가 있는 레이아웃 프레임 생성: 늘리기용 화살표, 고정 크기, 최소/최대 너비, 줄바꿈.
규칙 4: UI 상태. 호버, 활성, 비활성화에 대한 별도의 프레임. 전체 컨텍스트 표시, 예: 메뉴 호버 [1920 · 라이트].
규칙 5: 테마. 스타일의 색상을 사용하여 라이트/다크용 프레임 복제.
MCP 활성화: Dev Mode → 검사 → MCP (서버 상태: 활성화, 이미지 소스: 다운로드). 저품질 SVG/래스터 예상—수동 또는 프롬프트를 통해 교체.
코드로 전환하는 단계
전체 요청을 피하고 단계별로 작업하세요. AI는 스크린샷이 아닌 Figma MCP 레이어를 분석해야 합니다.
1단계: 프로젝트 기반
초기 프롬프트 작성:
우리는 [설명]에 관한 웹사이트를 구축 중입니다. Figma MCP: [링크]. 프레임 이름의 중단점: [목록]. Figma의 리소스. 단계: 질문 명확화.
AI가 분석하고 단계로 나눕니다. 네비게이션 추가.
2단계: 규칙이 있는 에이전트
스타일을 고정하기 위해 AGENTS_BASE.md 생성:
- 컴포넌트 재사용.
- 중단점별 반응형 디자인.
- 레티나 지원 (@2x).
- 확인 없이 코드 덮어쓰기 금지.
러시아어 또는 영어로 작성—품질은 변하지 않습니다.
3단계: 반복적 조립
프레임별 블록 정제:
피처 [768 · 라이트] 갤러리에서 수평 스크롤: [링크]. 스크롤바용 +20px 패딩-바텀.
수정 후 다음 블록으로 이동.
4단계: 에셋 교체
- 수동: 파일 이름 변경.
- AI를 통한:
> 히어로에서 [id]를 [email protected]로 교체.
> 피처 리스트: 자리 표시자 대신 ic_unlimList_BENEFIT_24 (32x32px).
5단계: 기능성
격리된 상태로 추가:
지역화: 버튼 [이름]을 통한 드롭다운 RU/EN. 질문 명확화.
지원: 반응형, 레티나, 테마, 애니메이션.
핵심 요약
- 체계적인 프레임 명명은 반복 가능성을 보장합니다.
- 시각적 레이아웃 지침은 AI의 자동 레이아웃 약점을 보완합니다.
- 에이전트와의 단계별 접근 방식은 코드 회귀를 최소화합니다.
- 품질을 위한 수동 에셋 교체는 필수적입니다.
- 세부 사항에 집중: 번아웃을 피하기 위해 모든 역할을 한꺼번에 맡지 마세요.
— Editorial Team
아직 댓글이 없습니다.