figma-mcp-server

2 개의 포스트

figma

Figma에서 MCP 서버를 활용하는 4가지 방법 | Figma 블로그 (새 탭에서 열림)

Figma의 MCP 서버는 디자인 파일을 읽는 수준을 넘어 Slides·FigJam·Make·Figma 에이전트 전반에서 콘텐츠를 생성하고 수정하는 도구로 확장됐다. 에이전트는 사내 문서와 최신 제품 정보를 바탕으로 발표 자료나 협업 보드를 만들고, Figma 템플릿·디자인 시스템·사용자 정의 폰트까지 반영할 수 있다. 그 결과 반복적인 콘텐츠 제작의 상당 부분을 자동화하면서도 최종 검토와 창의적 판단은 사람이 담당하는 워크플로가 가능해졌다. ## Figma MCP 서버의 확장된 역할 - Figma Slides, FigJam, Figma Make, 새로운 Figma 디자인 에이전트에서 프롬프트 기반 생성·수정을 지원한다. - 디자인 파일의 이미지와 아이콘을 SVG, PDF, JPG, PNG로 내려받을 수 있는 `download_assets` 도구가 추가됐다. - 업로드한 사용자 정의 폰트를 지원해 웹 안전 폰트로 대체하지 않고 브랜드 서체를 그대로 렌더링한다. - `use_figma` 도구와 `/figma-use-slides` 같은 MCP 스킬을 조합해 팀의 템플릿과 디자인 의도를 결과물에 반영한다. - 스킬은 에이전트의 출력 품질과 일관성을 높이며, Figma 커뮤니티에서 공유하거나 직접 제작할 수 있다. ## 지속적으로 갱신되는 발표 자료 만들기 - Figma의 디자이너 옹호 담당자는 AI 제품 출시 내용을 정리한 상시 업데이트형 발표 자료를 운영한다. - 다음과 같은 프롬프트를 코드 에디터에서 실행해 자료를 갱신한다. - Slack, Google Drive, Shortcut 블로그, 릴리스 노트에서 최신 정보를 수집 - 기존 덱에서 갱신이 필요한 부분을 제안 - 새로 추가할 슬라이드 아이디어를 생성 - Figma Slides의 기존 템플릿에 내용을 반영 - 에이전트가 관련 대화, 브리프, 출시 메시지를 모아 초안의 약 80%를 완성한다. - 이후 사람은 이미지 교체, 문구 수정, 내용 검토 등 품질 관리에 집중한다. - 사용자 정의 폰트를 활용하기 때문에 발표 자료의 브랜드 정체성과 시각적 일관성을 유지할 수 있다. - 같은 방식은 다음과 같은 업무에도 적용된다. - PM의 제품 킥오프 자료 작성 - 디자이너의 디자인 탐색 발표 - 마케팅 팀의 GTM 계획 수립 - 영업 팀의 고객용 자료 최신화 - 핵심 이점은 단순히 제작 속도를 높이는 데 그치지 않고, 팀의 디자인 시스템과 브랜드 기준을 반영한 결과물을 만드는 것이다. ## 실시간 데이터를 반영한 FigJam 보드 생성 - 제품 관리자는 기능 킥오프 워크숍을 준비할 때 회사 곳곳의 정보를 수집하고, 세션에 맞게 FigJam 섹션을 구성해야 한다. - 이 과정은 관련 맥락을 모으고 보드 형식을 맞추는 데 많은 시간이 걸린다. - 이를 자동화하기 위해 `/figjam-builder`라는 커스텀 스킬을 구축했다. - 스킬과 MCP 서버를 이용하면 실시간 데이터와 조직 내 정보를 바탕으로 워크숍용 FigJam 보드를 생성할 수 있다. - 제공된 본문은 이 사례의 구체적인 구현 방식과 나머지 두 가지 활용 사례 설명으로 이어지기 전에 중단되어 있다. MCP를 도입할 때는 모든 결과를 자동 게시하기보다, 에이전트가 자료 조사와 초안 작성을 맡고 사람이 사실관계·문구·시각 요소를 검토하는 방식이 현실적이다. 특히 팀 템플릿, 디자인 시스템, 사용자 정의 폰트, 업무별 스킬을 함께 제공할수록 자동화 결과의 품질과 브랜드 일관성이 높아진다.

figma

디자인 맥락, 제품을 (새 탭에서 열림)

Figma는 디자인 파일에 담긴 레이아웃, 상호작용, 디자인 시스템, 코드 구조 등의 맥락을 개발 환경 전반에서 활용할 수 있도록 Figma MCP 서버와 Code Connect를 확장했다. 원격 MCP 접속으로 IDE·AI 코딩 에이전트·브라우저에서 Figma에 연결할 수 있고, Figma Make의 실제 코드와 Code Connect의 프로덕션 컴포넌트 정보도 AI가 활용할 수 있다. 이를 통해 디자인에서 코드로 전환하는 과정의 마찰을 줄이고, 더 일관되고 효율적인 코드 생성을 지원한다. ## 디자인 맥락을 어디서나 공유 - AI 기반 코드 생성은 프롬프트만으로는 충분하지 않으며, 디자인 시스템 구조와 코드베이스 작성 방식 같은 추가 맥락이 필요하다. - Figma 파일에는 반응형 레이아웃, 인터랙션 세부사항, 시각적 프로그램 등 단순한 이미지 이상의 정보가 담겨 있다. - Figma는 이러한 팀의 축적된 디자인·개발 지식을 Figma 캔버스 밖에서도 사용할 수 있도록 만드는 것을 목표로 한다. ## 원격 Figma MCP 서버 - 기존에는 Dev Mode의 로컬 MCP 서버를 통해 개발자의 편집기에서 Figma 디자인 정보를 가져왔다. - 새 원격 접속 기능을 사용하면 데스크톱 앱 없이도 다음 환경에서 Figma에 연결할 수 있다. - IDE - AI 코딩 에이전트 - 브라우저 기반 AI 모델 - Android Studio, Replit, Warp 등 다양한 파트너 도구에서 Figma 디자인 맥락을 사용할 수 있다. - Figma MCP 파트너 카탈로그에서 사용하는 IDE나 에이전트를 찾아 쉽게 연동할 수 있다. - 디자인 시스템 규칙을 생성하는 기능 등 MCP 서버의 기능과 파트너 지원을 계속 확대할 예정이다. - Affirm은 MCP 서버를 사용해 주요 제품 플로우를 이틀 이내에 재구축했으며, 개발 속도가 “몇 배가 아니라 orders of magnitude” 향상됐다고 평가했다. ## Figma Make와 MCP의 연결 - Figma Make 파일을 MCP 클라이언트에서 사용하면 AI 모델이 렌더링된 프로토타입이나 이미지만 보는 것이 아니라 underlying code를 직접 확인할 수 있다. - MCP 서버는 Make 파일의 코드를 색인하고, 사용자가 요청한 파일이나 코드 일부를 선택적으로 제공한다. - 개발자와 AI 에이전트는 다음 방식으로 Make의 정보를 활용할 수 있다. - 특정 파일의 코드를 직접 재사용 - 구현 로직과 디자인 패턴을 참고 - 기존 코드 구조를 기반으로 새로운 기능 생성 - Anthropic, Cursor, Windsurf, VS Code와 협력해 해당 기능을 제공한다. - 향후에는 외부 파트너의 MCP 서버를 Figma Make 안에서도 연결할 계획이다. ## Code Connect의 컴포넌트 매핑 개선 - Code Connect는 Figma 디자인 컴포넌트와 실제 코드베이스의 컴포넌트를 연결하는 기능이다. - 기존에는 터미널에서 매핑을 수동으로 설정해야 했지만, 이제 Figma 내부에서 직접 매핑할 수 있다. - Figma에서 컴포넌트 탐색 - 연결할 코드와 파일 선택 - 연결 완료 또는 누락된 항목 확인 - 기존 Code Connect CLI도 계속 사용할 수 있으며, 다양한 프레임워크에 대해 속성(prop)과 변형(variant)이 매핑된 프로덕션 코드 스니펫을 Dev Mode에 제공한다. - MCP 서버와 Code Connect를 함께 사용하면 AI 에이전트가 다음 정보까지 얻을 수 있다. - 실제 코드 컴포넌트의 위치 - 컴포넌트 사용 지침 - 디자인과 코드 간의 연결 관계 - 내부 평가와 초기 고객 테스트에서 다음과 같은 개선이 확인됐다. - 더 일관된 코드 생성 - 코드 파일 탐색 속도 향상 - AI 에이전트의 토큰 사용량 감소 ## 연동 검토와 사용량 제한 - Figma는 외부 도구와의 연결이 확대되는 만큼 연동의 안정성과 기반 시스템도 강화하고 있다고 밝혔다. - 글에서 해당 섹션의 세부 내용은 제공된 본문이 중간에 끊겨 있어 확인할 수 없다. Figma를 사용하는 개발팀이라면 원격 MCP 서버로 IDE나 AI 에이전트에 디자인 정보를 연결하고, Code Connect로 핵심 UI 컴포넌트를 실제 코드와 매핑하는 방식이 효과적이다. 특히 Figma Make를 프로토타이핑 도구에 그치지 않고 코드 재사용과 AI 기반 구현의 출발점으로 활용할 수 있다는 점이 이번 업데이트의 실질적인 변화다.