피그마 콘솔 MCP로 클로드 코드에서 만든 화면을 피그마로 옮기는 설정법
피그마 콘솔 MCP(Figma Console MCP)는 클로드 코드(Claude Code) 같은 AI 도구를 피그마에 연결하는 오픈소스 MCP 서버다. 피그마 데이터를 읽고, 프레임·컴포넌트·변수도 직접 만들고 고친다. 10월 17일 X에서 '좋아요' 500개를 넘게 받은 디자인 워크플로가 이렇게 쓴다. 화면은 클로드 코드로 먼저 만들고, 중요한 인터페이스 결정과 컴포넌트만 이 MCP로 피그마에 되가져온다.
-
피그마 개인 액세스 토큰을 만든다. 범위는 File content(읽기), File versions(읽기), Variables(읽기), Comments(읽기·쓰기)를 준다. 토큰은
figd_로 시작하고 한 번만 보이니 바로 복사해 둔다. -
클로드 코드에 서버를 등록한다. Node.js 18 이상이 필요하다.
claude mcp add figma-console -s user -e FIGMA_ACCESS_TOKEN=figd_YOUR_TOKEN_HERE -e ENABLE_MCP_APPS=true -- npx -y figma-console-mcp@latest
-
피그마 데스크톱 앱에서 브리지 플러그인을 연결한다. 웹 피그마로는 안 된다. 파일을 하나 열고 Plugins → Development → Import plugin from manifest...에서
~/.figma-console-mcp/plugin/manifest.json을 고른다. 이 파일은 MCP 서버가 처음 뜰 때 만들어진다. 플러그인을 실행하면 9223~9232 포트를 훑어 서버에 알아서 붙는다. -
클로드 코드를 다시 시작하고 연결을 확인한다.
Check Figma status
연결되면 "Create a simple frame with a blue background"처럼 시켜서 피그마에 프레임이 실제로 생기는지 본다. 그다음부터는 클로드 코드로 만든 화면의 주요 컴포넌트나 디자인 토큰을 피그마에 만들어 달라고 시킨다.
원격 SSE 주소로 붙이는 방식은 읽기 전용이라 피그마에 쓰지 못한다. 쓰기까지 하려면 위처럼 npx로 로컬에서 돌린다.
출처