Figma에서 MCP 서버를 사용하는 4가지 방법

캔버스를 AI 에이전트에게 개방한 지 두 달만에, Figma MCP 서버는 이제 Figma Slides, FigJam, Figma Make, 그리고 새로운 Figma 에이전트 전반에서 작동하게 되었습니다. 즉, 프레젠테이션 덱, FigJam 보드, 그리고 Make 프로토타입을 모두 프롬프트만으로 생성하거나 업데이트할 수 있다는 뜻입니다. 또한 MCP 서버는 사용자 지정 글꼴을 지원하며, 새로운 download_assets 도구를 통해 디자인 파일에서 이미지와 아이콘을 SVG, PDF, JPG, PNG 형식으로 다운로드할 수 있습니다.

다음은 Figmates가 현재 이 새로운 기능을 사용하여 실행 중인 4가지 업무 흐름입니다.

1. Figma Slides에서 덱 생성하고 갱신하기

Figma의 디자이너 옹호자인 Mallory Dean은 Figma AI 제품 출시를 다루는 항상 최신 상태의 덱을 관리하고 있습니다. 이 덱은 몇 주마다 갱신하는 실시간 덱으로, 디자인 강연이 고객 미팅에서 발표하는 내용이 제품 출시 상황에 맞게 항상 최신 상태를 유지하도록 관리됩니다.

Figma 에이전트를 출시한 후, 그녀는 코드 편집기에 다음과 같이 프롬프트를 입력했습니다. "새로운 Figma 에이전트를 포함하도록 내 Figma AI 덱을 업데이트해 줘. Slack, Google Drive, Shortcut 블로그, 릴리스 노트 웹페이지에서 콘텐츠를 가져와. 무엇을 새로 고쳐야 할지 제안해 주고 새로운 슬라이드에 대한 아이디어도 줘." 에이전트는 관련된 대화, 브리프, 출시 메시지를 가져오고 난 뒤 use_figma 도구와 Figma Slides의 /figma-use-slides 스킬을 사용하여 그녀의 기존 템플릿에 맞춰 덱을 업데이트했습니다.

새로운 슬라이드에는 여전히 검토 과정이 필요했고, 입력 예시를 실제 이미지로 교체하거나 카피 문구를 수정해야 했지만, 그녀가 뛰어들었을 때는 이미 콘텐츠 작업의 처음 80%는 완료된 상태였습니다. 새로운 사용자 지정 글꼴 지원 덕분에 에이전트는 웹 안전 대체 글꼴이 아닌 실제 업로드된 글꼴을 사용하여 텍스트를 렌더링했으며, 덱의 브랜드 일관성을 유지할 수 있었습니다.

이와 똑같은 설정은 처음부터 새로 만들든 기존 문서를 업데이트하든 상관없이 제품 개발 프로세스 전반에 걸쳐 나타납니다. 킥오프 덱을 만드는 PM, 디자인 탐색 결과를 발표하는 디자이너, 특정 기능에 대한 GTM 계획을 수립하는 마케팅 팀, 최신 제품 변경 사항을 고객용 덱에 업데이트하는 영업 팀까지 모두 해당합니다. 작업 속도만 빨라지는 것이 아니라, 팀의 디자인 시스템을 기반으로 제작되어 브랜드에 맞는 결과물이 만들어집니다.

2. 실시간 데이터를 활용해 FigJam 보드 생성하기

Figma의 제품 관리자 Prasant Lokinendi는 기능 킥오프 워크숍을 자주 진행합니다. 회사 전반에서 컨텍스트를 수집하고 세션에 맞게 각 섹션을 구성하는 등, 워크숍을 위해 흥미로운 FigJam을 준비하려면 시간이 걸립니다. 그래서 그는 /figjam-builder라는 스킬을 만들었고, 매번 같은 프롬프트를 다시 입력할 필요가 없어졌습니다.

올해 초 Make 음성 텍스트 변환 기능 출시를 위해, 그는 프로젝트 구조 파악을 위해 Slack, Asana, Notion에서 컨텍스트를 가져오고 분석을 위해서는 Hex에서 가져와서 FigJam 보드를 생성하라고 에이전트에게 프롬프트로 지시했습니다. 그 결과 빈 FigJam 대신, 제품 비전, 고객 인사이트, 주요 의사결정 사항이 포함된 최신 데이터를 바탕으로 시작할 수 있었습니다.

3. Figma Make로 코드와 캔버스 사이에서 디자인 이동하기

이제 MCP 서버가 Figma Make에서도 작동하므로, Figma에서 벗어나지 않고도 디자인 편집에서 프로덕션 PR까지의 전체 루프를 완성해 줍니다. Figma의 제품 디자이너인 Iris Lin 은 실제 제품 작업에서 이러한 루프를 실행합니다.

예를 들어, Iris와 팀원이 최근에 샘플 오디오 편집기를 데모 파일로 구축했을 때, 팀원은 첫 번째 버전을 배포했지만 Iris는 디자인을 더 업데이트하고 싶었습니다. 정적인 파일에서는 인터랙션을 보여주기 어렵기 때문에, 그녀는 코드를 브랜치하고 Figma Make에서 실제 결과물을 만들었습니다. 드래그해서 순서를 바꿀 수 있는 오디오 클립, 레벨 조절 기능이 있는 팝오버, 그리고 스크럽할 수 있는 재생 헤드 등이 그것입니다.

Iris는 데모 파일의 디자인 시스템을 수정하고 싶었기 때문에 Make 프롬프트 상자에 "이곳의 미리보기를 디자인 레이어 형태로 다시 Figma로 가져와 줄 수 있어?"라고 프롬프트를 입력하여 Make 미리보기를 캔버스로 가져왔습니다. 그러자 라이브러리에 있던 관련 컴포넌트로 재구성된 화면이 캔버스 위에 배치되었습니다. Iris는 캔버스에서 평소 디자인 패턴에 따라 오디오 클립 컴포넌트를 변경하여, 명확한 기본 상태, 호버 상태 및 드래그 상태를 지정했습니다. 그 후에는 반대로 "이 새로운 상태들을 다시 코드로 끌어와 줘"라고 요청했습니다. 에이전트는 그녀의 디자인 변경 사항을 읽고 세 가지 상태를 컴포넌트 코드에 모두 작성해 넣었으며, GitHub에 PR로 올릴 준비를 마쳤습니다.

이 업무 흐름을 사용하면 Figma 내에서 무엇을 출시할지 통제할 수 있습니다. 에이전트는 Code Connect가 라이브러리를 프로덕션 코드로 매핑하는 것과 똑같은 방식으로 양쪽 끝에서 실제 컴포넌트를 읽고 씁니다. 예전에는 핸드오프과 검토 과정 사이에서 충실도가 떨어지곤 했던 디자인 의사결정들이 이제는 PR까지 그대로 이어집니다.

4. Figma Agent와 작업 분담하기

Figma MCP 서버를 담당하는 제품 관리자인 Yarden Katz는 MCP를 한계까지 활용하는 방법을 잘 알고 있습니다. 그녀가 계속해서 마주치는 시나리오 중 하나는 캔버스 표현은 전혀 없고 오직 코드로만 존재하는 화면입니다. 목표는 그 화면을 Figma로 가져와서 올바른 디자인 시스템에 연결하여 디자이너들이 작업할 수 있게 만드는 것입니다.

로그인 흐름과 대시보드가 있는 샘플 앱을 바탕으로, 그녀는 코드 편집기에서 다음과 같이 프롬프트를 입력했습니다. "이 대시보드와 로그인 흐름을 Figma로 옮겨 줘. 기존의 컴포넌트와 변수가 있으면 재사용하고, 없는 곳에는 적절한 컴포넌트 세트와 변수를 생성해." Figma 플러그인에는 에이전트에게 Figma 사용법에 대한 컨텍스트를 제공하는 스킬이 포함되어 있으므로, 에이전트는 Figma와 코드베이스 모두에서 라이브러리를 읽고 나서 이미 완료된 작업을 복제하는 대신 무엇을 재사용하고 무엇을 새로 만들지 결정했습니다.

이를 통해 완성본은 아니지만 강력한 첫 번째 시안을 얻을 수 있었습니다. 오토레이아웃, 글꼴, 그리고 아직 매핑되지 않은 몇 가지 색상은 여전히 작업이 필요했습니다. 바로 그 지점에서 Figma 에이전트가 작업을 이어받아, 디자인 시스템에 대한 심층적인 컨텍스트를 바탕으로 캔버스에서 그녀와 함께 작업했습니다. 그녀는 에이전트에게 레이아웃을 고치고, 글꼴을 수정하며, 모든 색상을 올바른 변수로 매핑하도록 지시했습니다. 원하는 상태가 되자, 그녀는 MCP 서버를 통해 이를 다시 코드로 반영했습니다. 필요한 경우, 별도로 내보내지 않고도 새로운 download_assets 도구를 사용하여 에이전트로부터 원본 이미지와 아이콘을 직접 가져올 수도 있었습니다.

이 사용 사례에서는 MCP 서버와 Figma 에이전트가 한 팀이 되어 최종 디자인을 완성합니다. 서버는 사용자가 현재 사용 중인 에이전트에 Figma를 연결하고, 실제 컴포넌트를 기반으로 코드로만 존재하는 화면을 캔버스로 가져옵니다. 그 후 Figma Agent가 그다음 작업을 합니다. 캔버스에 기본적으로 통합되어 있으므로, 여러분과 팀이 디자인하는 바로 그 환경에서 컴포넌트와 토큰을 기반으로 다양한 방향성을 탐색할 수 있습니다.

Figma 에이전트 및 Figma Make의 프로덕션 코드베이스 통합 기능은 현재 비공개 베타 단계에 있습니다. Figma MCP 서버의 쓰기 기능은 오픈 베타 단계에 있으며, 설정 가이드를 확인하여 시작해 보세요. 여러분이 무엇을 만들지 정말 기대됩니다.