목록 · 디자인

Figma MCP

디자인 파일의 레이어 구조와 변수, 화면 이미지를 가져옵니다. 시안을 코드로 옮기거나 디자인 시스템 값을 확인할 때 씁니다.

디자인·이미지 용도. 같은 목적의 다른 도구를 한 장에 모아 두었습니다.

도도리 AI연구소 · 최종 수정 2026년 9월 30일 · CC BY-NC 4.0

피그마 MCP 설치하는 법

원격 서버라 컴퓨터에 설치할 것이 없습니다. 주소만 넣으면 끝납니다. 3분이면 됩니다.

1. Claude 데스크톱 앱을 엽니다. 설정에서 커넥터를 찾습니다. 없다면 앱을 최신 버전으로 올리십시오.
2. 커스텀 커넥터 추가를 누릅니다. 이름은 아무거나 넣어도 됩니다. 나중에 목록에서 알아보기 쉬운 이름이면 충분합니다.
3. 아래 주소를 붙여 넣습니다.
   http://127.0.0.1:3845/mcp 복사
   붙여 넣고 저장하면 로그인 창이 뜹니다. 계정을 연결하면 바로 쓸 수 있습니다.
4. 대화창에서 커넥터를 켭니다. 입력창 옆 + 를 누르고 커넥터 목록에서 이 도구를 켭니다. 등록만 하고 켜지 않아 "왜 안 되지" 하는 경우가 가장 많습니다. 대화마다 따로 켭니다.

먼저 알아 둘 것

로컬 모드

피그마 데스크톱 앱이 켜져 있어야 동작

브라우저만 쓸 때

원격 방식으로 연결

이런 일을 시킵니다

시안을 코드로 옮기기

선택한 프레임의 레이어 구조와 간격, 색을 읽어 컴포넌트 코드로 바꿉니다. 화면을 눈으로 보고 옮길 때보다 값이 정확합니다.

디자인 토큰 맞추기

파일에 정의된 변수(색·간격·타이포)를 그대로 가져와 코드 쪽 토큰과 어긋난 곳을 찾습니다.

구현 결과와 나란히 보기

프레임을 이미지로 받아 대화에 붙이고, 만든 화면과 무엇이 다른지 짚게 합니다.

컴포넌트 이름 맞추기

디자인 쪽 컴포넌트 이름과 코드 쪽 이름이 어긋난 곳을 찾습니다. 나중에 이 둘을 잇는 작업의 밑준비가 됩니다.

붙었는지 확인하기

설정을 마쳤으면 대화창에 이렇게 물어보십시오. 도구가 실제로 붙었으면 답이 돌아옵니다.

피그마 MCP 안 될 때 확인할 것

연결이 안 됩니다

로컬 방식은 피그마 데스크톱 앱이 실행 중이어야 합니다. 브라우저 탭만 열려 있으면 127.0.0.1 주소가 아무 응답도 하지 않습니다.

선택한 것이 없다고 합니다

데스크톱 앱에서 프레임을 실제로 클릭해 두어야 읽습니다. 파일만 열어 둔 상태로는 대상이 없습니다.

큰 프레임은 잘라서 주십시오

화면 전체를 한 번에 읽히면 결과가 뭉개집니다. 섹션 단위로 선택해 가며 옮기는 편이 정확합니다.

이미지로 채운 부분은 구조가 없습니다

디자이너가 이미지로 붙여 넣은 영역은 레이어 정보가 없어 코드로 옮길 것이 나오지 않습니다.

언제 쓰고, 언제 안 쓰나

디자인 파일이 진짜 기준인 팀에서 씁니다. 스크린샷 몇 장을 보고 대충 옮기는 정도면 굳이 붙이지 않아도 됩니다.

비슷한 것 중에 왜 이걸

canva-mcp 와 둘 다 디자인 도구에 붙지만 쓰는 사람이 다릅니다. 저쪽은 브랜드 템플릿에 내용을 채워 자료를 뽑는 쪽이고, 이건 레이어 구조와 변수를 읽어 코드로 옮기는 쪽입니다. taste-skill 과도 갈립니다. 저쪽은 남의 사이트를 뜯어 수치를 뽑고, 이건 우리 디자인 파일이 기준일 때 그 값을 그대로 가져옵니다. 17개 중 설치가 필요한 셋 중 하나입니다. Claude Code 를 쓰신다면 같은 서버를 담은 figma 플러그인이 명령 한 줄로 끝납니다.

자주 묻는 것

피그마 MCP(Figma) 는 어떻게 설치합니까?

커넥터 주소는 http://127.0.0.1:3845/mcp 입니다. 클로드 코드에서는 claude mcp add --transport http --scope user figma http://127.0.0.1:3845/mcp 로 넣고, 코덱스 CLI 에서는 codex mcp add figma --url http://127.0.0.1:3845/mcp 뒤에 codex mcp login 을 합니다. 클로드 데스크톱이라면 설정의 커넥터 항목에 같은 주소를 넣으십시오. 이 주소는 내 컴퓨터를 가리킵니다. 해당 데스크톱 앱이 켜져 있어야 응답합니다. 직접 연결해 확인했습니다.

피그마 MCP(Figma) 연결이 안 될 때는 무엇을 봅니까?

로컬 모드는 피그마 데스크톱 앱이 켜져 있어야 동작합니다. 브라우저만 쓰는 환경이면 원격 방식으로 붙여야 합니다. 로컬 방식은 피그마 데스크톱 앱이 실행 중이어야 합니다. 브라우저 탭만 열려 있으면 127.0.0.1 주소가 아무 응답도 하지 않습니다.

피그마 MCP(Figma) 로 무엇을 할 수 있습니까?

이 장에 적어 둔 것은 시안을 코드로 옮기기, 디자인 토큰 맞추기, 구현 결과와 나란히 보기, 컴포넌트 이름 맞추기 입니다. 각 항목의 자세한 설명은 위쪽 쓰임새 칸에 있습니다.

디자인 도구를 고를 때

Figma 등 디자인 툴과 연동합니다. 팀 플랜이 필요한 기능인지, 읽기 권한만 요구하는지 편집 권한까지 요구하는지 확인하세요.

공식 사이트에서 계정 만들기

제휴 관계가 없는 일반 링크입니다.

별점과 댓글

이 MCP 서버을 써 보신 분의 별점(5점 만점)과 한마디입니다. 작성자는 아이디 앞 3자만 보입니다(예: wor****). 읽는 데는 제한이 없고, 남기는 것은 로그인한 회원만 됩니다. 한 사람이 한 번이며 다시 쓰면 앞의 것을 덮어씁니다.

함께 보면 좋은 도구

클로드 코드에서 쓰실 것이라면 플러그인 쪽입니다. 명령과 스킬이 묶음으로 들어옵니다. 피그마 플러그인

어느 단계에 무엇을 붙일지 모르겠다면 콘텐츠 제작 단계별 MCP 120종을 보십시오. 기획부터 성과 확인까지 여덟 단계로 갈라 두었습니다.