Figma 디자인을 Claude Code 로 코드 변환하기

Figma 공식 원격 MCP 서버를 Claude Code 에 연결해 프레임 링크에서 디자인 컨텍스트를 읽고 일치하는 코드를 생성합니다.

[1] Figma 공식 플러그인을 Claude Code 에 설치합니다.

$ claude plugin install figma@claude-plugins-official

[2] Claude Code 세션에서 Figma 계정 접근을 승인합니다.

$ claude

/plugin 을 입력하고 Installed 탭에서 figma 를 선택해 인증을 시작합니다. 브라우저 창이 열리면 Allow access 를 클릭합니다. 수동으로 등록한 경우 /mcp 에서 figma 를 고르고 Authenticate 를 진행합니다.

Authentication successful. Connected to figma

[3] Figma 에서 변환하려는 프레임의 링크를 복사합니다.

Figma Design 캔버스에서 프레임이나 레이어를 마우스 오른쪽 단추로 누르고 Copy link to selection 을 누릅니다. 클라이언트는 웹 페이지를 여는 대신 URL 의 node ID 를 추출해 대상 정보를 조회합니다.

[4] 프레임 링크와 함께 디자인 토큰과 레이아웃을 살리는 프롬프트를 보냅니다.

Claude Code 대화창에 복사한 링크를 붙여넣고 디자인 변수와 오토레이아웃 속성을 살려 코드를 작성하도록 요청합니다.

https://www.figma.com/design/EXAMPLE_FILE_ID/App?node-id=10-20 링크의 디자인 컨텍스트를 읽고 반응형 React 컴포넌트를 작성해 주세요.- Figma 변수(Variables)를 디자인 토큰 및 CSS 변수로 매핑하세요.- 오토레이아웃 패딩과 간격을 Tailwind CSS 클래스로 반영하세요.

[5] (선택) 로컬 Figma 데스크톱 앱의 Dev Mode MCP 서버를 구동해 연결할 수도 있습니다.

Figma 데스크톱 앱에서 아무것도 선택하지 않은 상태로 Shift + D 를 눌러 Dev Mode 로 전환한 뒤, 오른쪽 사이드바 MCP server 에서 Enable desktop MCP server 를 클릭합니다. 확인 메시지가 뜨면 Claude Code 에 로컬 주소를 추가합니다.

$ claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

[6] 등록된 MCP 서버 목록을 확인합니다.

$ claude mcp list