[MCP] 피그마 MCP로 화면 명세서 만들기
캔바가 빠른 홍보물 제작에 강하다면, 피그마Figma는 웹 사이트나 앱 화면처럼 구조가 중요한 디자인에 강합니다. 피그마 MCP는 피그마 파일의 프레임, 레이어, 컴포넌트, 색상, 레이아웃 정보를 AI가 읽을 수 있게 해줍니다.
피그마 MCP는 일반적인 클로드 채팅보다 Claude Code, Cursor, VS Code 같은 MCP 클라이언트와 함께 사용할 때 특히 강력합니다. 피그마 공식 문서에서는 원격 MCP 서버 사용을 권장하며, 지원 클라이언트와 기능은 계속 업데이트되고 있습니다.
01 먼저 피그마 데스크톱 애플리케이션을 다운로드합니다. 사용하는 운영체제에 맞는 파일을 내려받고 설치한 뒤 로그인하세요.
피그마 다운로드 : figma.com/ko-kr/downloads/
02 피그마 MCP도 커넥터로 제공됩니다. 클로드의 커넥터 메뉴에서 [+ ➝ 커넥터 둘러보기]를 누르고 검색창에 Figma를 입력합니다. Canva 커넥터가 보이면 [+]를 눌러 연결을 시작합니다.
02 그러면 다음과 같은 인증 과정을 거칩니다. [Agree & Allow Access]를 눌러 권한을 승인하고 업데이트 메일을 받을지 여부는 원하는 대로 선택하세요.
03 피그마 MCP를 사용해서 가상의 메신저 화면을 만들어달라고 요청하겠습니다. 클로드에서 다음과 같이 요청합니다.
[나] : 피그마에 가상의 메시지 앱을 디자인해줄래? 아이폰 16 화면비에 맞춰줘.
[AI] : 완성입니다! Figma에서 열기
Bubble 이라는 가상의 메시지 앱을 iPhone 16 기준(393 × 852pt)으로 3개 화면을 디자인했어요.
화면 구성
Chat List — 상단 내비 + 검색 바 + 대화 목록(읽지 않은 수 뱃지, 마지막 메시지 미리보기) + 하단 탭 바
Chat Detail — 뒤로 가기 + 연락처 정보 + 수신/발신 말풍선 + 메시지 입력창
Contact Profile — 대형 아바타 + 온라인 상태 표시 + 전화/메시지/영상통화 버튼 + 연락처 정보 + 공유된 사진
디자인 포인트
테마 컬러: 보라색(#7B5EA7) 계열
발신 말풍선은 보라 배경 + 흰 글씨, 수신은 연보라 배경 + 검정 글씨
iOS 스타일 상태바, 탭 바, 구분선 적용
잠시 기다리니 피그마가 가상의 앱 이름과 컨셉까지 만들어서 앱 디자인을 완료했다고 합니다. 링크를 눌러 파일을 열면 다음과 같이 웹 페이지 시안이 뚝딱 만들어져 있습니다.
04 피그마를 사용하는 사람들이라면 디자인을 만드는 것만큼 이 디자인을 개발자하게 정확하게 전달하는 것도 중요할 것입니다. 이제 앞서 만든 화면을 분석하여 개발팀에 보낼 화면 명세서를 만들어보겠습니다.
이때 피그마 파일 링크를 같이 첨부해도 좋습니다.
[나] : 이 Figma 프레임 링크를 분석해서 개발자에게 전달할 화면 명세서를 만들어줘.
- 화면의 목적
- 주요 컴포넌트
- 색상과 폰트 사용
- 버튼과 입력창의 상태
- 반응형에서 주의할 점
- 구현 전에 디자이너에게 확인해야 할 질문
[AI] : Bubble_화면명세서_v1.0.docx 에 담긴 내용을 요약하면:
1. 문서 개요 — iPhone 16 기준 캔버스 사이즈(393×852pt), 3개 화면 구성표, Safe Area 수치
2. 디자인 토큰 — 색상 스워치 표(Primary·Neutral·System), 타이포그래피 규격표(용도별 사이즈·굵기·색상)
3. S-01 Chat List — 레이아웃 Y좌표/높이 표, Nav Bar·검색창·Chat Row·뱃지·Tab Bar 상세 스펙, 아바타 색상 팔레트(6색·인덱스 규칙), 버튼·입력창 상태표(Default/Pressed/Focused/Swipe)
4. S-02 Chat Detail — 말풍선 스펙(발신/수신 색상·반경·최대 너비·패딩), 날짜 구분자, Input Bar 상태(Empty→비활성 전송 / Typing→활성 / Focused→키보드 대응)
5. S-03 Contact Profile — 대형 아바타·온라인 dot 스펙, 액션 버튼 3개, 연락처 정보 행 구조, 공유 사진 썸네일 규칙
6. 반응형 & 접근성 — Safe Area 대응, 동적 텍스트·말풍선 max-width 소형 기기 처리, VoiceOver·터치 타겟(44pt) 가이드
7. 디자이너 확인 질문 15개 — Large Title 스크롤 전환, Empty State, 스와이프 액션, 입력창 최대 줄 수, 다크 모드, Inter 폰트 번들 여부 등
05 결과를 보면 피그마 화면을 눈으로만 확인했을 때 놓치기 쉬운 컴포넌트 구조, 여백, 반복 요소, 버튼 상태 등을 문서로 정리했습니다. 그러면 개발자에게 ‘대충 비슷하게 만들어주세요’”라고 전달하는 대신, 화면 단위의 체크리스트를 만들어 넘길 수 있어 협업이 훨씬 쉬워집니다.
피그마 MCP의 장점은 디자인 파일을 사람이 눈으로만 보는 것이 아니라, AI가 구조화된 정보로 읽을 수 있다는 점입니다. 따라서 기획자, 디자이너, 개발자가 같은 화면을 두고 이야기할 때 ‘무엇을 확인해야 하는지’를 빠르게 문서화할 수 있습니다.
