여타 서비스들이 MCP를 제공해주듯 피그마도 MCP 서버가 존재한다.

코드 커넥트 연결은 Figma MCP를 사용해 코드를 생성할 때 문맥을 더 잘이해할 수 있도록 도와준다.

Figma MCP가 제공하는 내부 함수들은 다음과 같다

• get_code
  • 선택한 영역의 코드 (React + Tailwind가 기본형태)
• get_variable_defs
  • 선택 항목에 사용된 스타일
• get_code_connect_map
  • 코드 커넥트가 연결된 요소가 있다면 매핑하기 위해 사용
• get_image
  • 이미지 추출

업데이트 (2026년 7월 9일 기준): 그 사이 Figma MCP가 제공하는 함수가 크게 늘었다. 기존 get_code는 get_design_context로, get_image는 get_screenshot으로 이름이 바뀌었고, 단순 조회를 넘어 Figma 파일에 직접 쓰는 함수들까지 생겼다. 추가된 함수들은 다음과 같다.

조회(read) 계열

• get_design_context
  • 선택 레이어의 디자인 컨텍스트를 React + Tailwind 형태로 반환 (구 get_code)
• get_metadata
  • 선택 영역의 레이어 ID·이름·타입·위치·크기만 담은 경량 XML 반환 (먼저 뼈대만 훑고 필요한 부분만 get_design_context 호출하는 용도)
• get_screenshot
  • 선택 요소의 스크린샷 캡쳐 (구 get_image)
• get_code_connect_suggestions
  • Code Connect 매핑 후보를 자동 탐지·제안
• get_context_for_code_connect
  • Code Connect 템플릿 생성에 필요한 메타데이터 조회
• get_figjam
  • FigJam 다이어그램을 메타데이터·스크린샷 포함 XML로 변환
• get_libraries
  • 파일에 추가됐거나 추가 가능한 라이브러리 목록 반환
• search_design_system
  • 연결된 라이브러리 전체에서 컴포넌트·변수·스타일을 텍스트로 검색
• download_assets
  • Figma의 export 결과물·원본 이미지 다운로드
• whoami
  • 현재 인증된 Figma 사용자 확인

생성·수정(write) 계열

• create_new_file
  • 빈 Figma Design / FigJam / Slides 파일 생성
• use_figma
  • Figma 파일에 오브젝트를 생성·수정·삭제·조회하는 범용 쓰기 도구
• generate_figma_design
  • UI 코드를 Figma 디자인 레이어로 변환 (code → design)
• generate_diagram
  • Mermaid 문법이나 설명으로 FigJam 다이어그램 생성
• upload_assets
  • PNG/JPG/GIF/WebP 이미지를 Figma 파일에 업로드
• add_code_connect_map
  • Figma 노드 ↔ 코드 컴포넌트 매핑 생성
• send_code_connect_mappings
  • 제안된 Code Connect 매핑을 확정

출처: Figma Developer Docs - Tools and prompts

코드를 잘 만들게 하려면

공식문서에도 나와있듯 Figma 파일 구조화 및 디자이너와 개발자간의 이격 맞추기 + 합의하기가 필요하다.

디자이너는 왠만하면 코드커넥트에 연결된 디자인 인스턴스를 활용해 디자인을 해야되고 서로 색상이나 스타일 네이밍을 맞출 때 더 의미있는 네이밍을 사용해야한다 → Group 5가 아니라 CardContainer 같은 워딩을 쓰기

프롬프트도 자세할수록 좋다. 그리고 llm이 더 자세히 문맥을 이해할 수 있도록 룰 같은걸 추가하는것도 좋다.

예를 들어 나는 Mantine 디자인 시스템을 사용하는데 해당 디자인 시스템 컴포넌트에 공통적으로 적용되는 규칙같은걸 제공해준다. 그리고 사용하면서 디자인 → 코드화가 제대로 안되는 부분은 룰을 조금씩 수정하면서 개선하고 있다.

당근의 오픈소스 SEED 디자인 시스템을 보면 이런 가이드가 엄청 잘 되어있다.

ex) llms-full.txt

저거에 비하면 우리가 쓰는 룰은 엄청 간단하다… 다음은 현재 우리가 쓰고 있는 룰의 일부다

@Supported props (지원되는 프롭)

모든 Mantine 컴포넌트는 다음과 같은 스타일 프롭을 지원합니다:

@Theme values (테마 값 참조)

일부 스타일 프롭은 theme 값을 참조할 수 있습니다. 예를 들어, mt="xs"는 theme.spacing.xs 값을 사용합니다.

import { Box } from '@mantine/core';
 
// margin-top: theme.spacing.xs
<Box mt="xs" />
 
// margin-top: auto
<Box mt="auto" />
 
// margin-top: 1rem
<Box mt={16} />
 
// margin-top: 5rem
<Box mt="5rem" />

색상 프롭도 theme 참조 가능:

// color: theme.colors.blue[theme.fn.primaryShade()]
<Box c="blue" />
 
// background: theme.colors.orange[1]
<Box bg="orange.1" />
 
// color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6]
<Box c="dimmed" />
 
// background: #EDFEFF
<Box bg="#EDFEFF" />
 
// background: rgba(0, 34, 45, 0.6)
<Box bg="rgba(0, 34, 45, 0.6)" />

Figma to Mantine 컴포넌트 변환 규칙

🎯 기본 원칙

1. Mantine Style Props 우선 사용

• CSS-in-JS 객체 생성보다 Mantine의 built-in style props를 최우선으로 사용
• 복잡한 스타일이나 Mantine props로 불가능한 경우에만 css prop 사용

2. Props 이름 매핑

// ❌ 기존 방식
<Text weight="600" color="gray.9" align="center" />
 
// ✅ Mantine v6 방식
<Text fw={600} c="gray.9" ta="center" />

📝 주요 Props 변환 규칙

Typography Props

• weight → fw (fontWeight)
• color → c (color)
• align → ta (textAlign)
• size → size (동일)
• lh → lh (lineHeight, 동일)

Layout Props

• margin → m, mt, mb, ml, mr, mx, my
• padding → p, pt, pb, pl, pr, px, py
• width → w, miw (minWidth), maw (maxWidth)
• height → h, mih (minHeight), mah (maxHeight)
• background → bg

Display & Position Props

• display="flex" 직접 사용
• position, top, left, bottom, right 직접 사용

🚫 피해야 할 패턴

1. CSS-in-JS 객체 남발

// ❌ 피해야 할 방식
const styleContainer = css({
  height: '100%',
  display: 'flex',
  flexDirection: 'column',
  padding: '16px 20px',
});
 
// ✅ 권장 방식
<Box h="100%" display="flex" style={{ flexDirection: 'column' }} px={20} py={16} />