클로드 코드랑 피그마 연결해서 디자인 코드로 뽑을 수 있나요?
답변 1
- 첫째운영진Lv.65일 전
안녕하세요, 운영진입니다. 결론부터 말씀드리면 직접 연결하는 방법이 있습니다. Figma MCP 서버를 Claude Code에 붙이면 스크린샷 대신 디자인 데이터를 직접 읽어 코드로 만들 수 있고, 설정은 명령어 몇 줄 수준이라 어렵지 않습니다. 스크린샷은 이미지를 눈대중으로 해석하기 때문에 간격과 색상이 어긋나기 쉽습니다. 반면 MCP로 연결하면 프레임의 구조와 변수(색상·간격 등 디자인 토큰) 정보를 받아 쓸 수 있습니다. Figma 공식 도움말에 따르면 팀에서 정의해 둔 변수의 이름과 값도 전달할 수 있다고 합니다. 설정 방법은 Figma 공식 안내 기준으로 두 가지입니다. 1. 원격 서버(권장): 터미널에서 claude mcp add --transport http figma https://mcp.figma.com/mcp 를 실행한 뒤, Claude Code 안에서 /mcp를 입력해 Figma 계정으로 인증합니다. 플러그인 방식(claude plugin install figma@claude-plugins-official)도 안내되어 있습니다. 2. 데스크톱 서버: Figma 데스크톱 앱에서 Dev Mode를 켜고 데스크톱 MCP 서버를 활성화한 뒤 연결합니다. 이 방식은 Dev 또는 Full 시트가 있는 유료 플랜이 필요하다고 안내되어 있습니다. 원격 서버는 모든 시트와 플랜에서 쓸 수 있다고 되어 있습니다. 사용법은 Figma에서 원하는 프레임을 우클릭해 "Copy link to selection"으로 링크를 복사하고, Claude Code에 붙여넣으면서 요구사항을 적는 방식입니다. 예를 들어 "기존 컴포넌트와 디자인 토큰을 재사용해서 React 컴포넌트로 만들어 줘"처럼 쓰시면 됩니다. 결과물이 얼마나 비슷한지는 공식 수치가 공개되어 있지 않아 확실하게 말씀드리기 어렵습니다. 다만 다음 두 가지가 품질에 영향을 준다고 알려져 있습니다. 1. Figma에서 색상·간격을 변수로 정리해 두고, 레이어 이름과 오토 레이아웃을 깔끔하게 유지하면 결과가 안정적입니다. 2. Figma의 Code Connect로 Figma 컴포넌트와 실제 코드를 연결해 두지 않으면, 이미 있는 컴포넌트를 쓰지 않고 새로 만들거나 엉뚱한 것을 가져올 수 있다고 안내되어 있습니다. 그래도 최종 확인은 브라우저에서 디자인과 나란히 비교하며 한두 번 다듬는 과정을 거치시길 권합니다. 설치 후 도구가 보이지 않으면 예전에 추가한 Figma 커넥터와 충돌했을 수 있으니, 기존 커넥터를 제거하고 Claude Code를 재시작해 보세요. 자세한 설정 순서는 아래 가이드에 정리해 두었습니다. https://usingclaude.com/ko/claude-code/mcp/claude-figma-mcp-guide