Figma 에이전트 및 Figma Make는 모델 컨텍스트 프로토콜(MCP)을 통해 외부 도구와 연결할 수 있으며, 이를 통해 문서와 작업 및 기타 앱의 데이터를 디자인, 앱 및 프로토타입의 컨텍스트로 활용할 수 있습니다.
예를 들어, Figma Make를 Notion에 연결하여 제품 요구사항 문서(PRD)를 Figma의 채팅으로 직접 가져오고, 이를 프로토타입 제작의 소스로 사용하도록 Make에 요청할 수 있습니다. PRD가 변경되면 커넥터를 다시 실행하여 컨텍스트를 새로 고치고 프로토타입을 업데이트하세요. 커넥터 설정에서 쓰기 도구를 활성화하여 인수 기준 목록 생성과 같은 내용을 Notion에 다시 쓸 수 있습니다.
Figma의 MCP 커넥터와 Figma MCP 서버의 차이점은 무엇인가요?
에이전트나 Figma Make에서 외부 도구를 연결하면, 이는 MCP 클라이언트로 작동합니다. 클라이언트는 Notion 또는 Asana 커넥터와 같이 MCP 서버에서 호스팅되는 도구를 호출하여 해당 소스의 데이터를 읽거나 씁니다. 프롬프트에 따라 에이전트가 사용할 커넥터와 도구를 결정합니다.
반면, Figma MCP 서버에는 다른 MCP 클라이언트에 파일 데이터를 제공하는 도구 목록이 포함되어 있습니다.
커넥터 추가
각 개인은 사용하고자 하는 커넥터를 추가 및 인증해야 합니다.
커넥터를 추가하려면 먼저 인증해야 합니다. 예를 들어, Notion을 추가할 때는 작업공간을 선택하고 액세스 권한을 승인해야 합니다.
- 채팅 상자에서 컨텍스트 추가를 클릭하세요.
- 커넥터를 선택하세요.
- 사용 가능한 커넥터 목록을 탐색합니다.
- 사용하고자 하는 커넥터 옆의 연결을 클릭하세요.
- 프롬프트를 따라 외부 도구의 OAuth 흐름을 인증합니다.
- 연결이 완료되면, 컨텍스트 추가를 클릭하여 목록에서 커넥터를 확인합니다.
팁: 인증을 위한 프롬프트가 보이지 않으면 브라우저가 팝업을 차단하고 있을 수 있습니다. 브라우저의 주소 표시줄에서 팝업 차단 아이콘을 확인하고 Figma 팝업을 허용하세요.
참고: 메뉴에 커넥터 옵션이 없는 경우, 관리자가 조직에서 이 기능을 비활성화했을 수 있습니다.
채팅에서 커넥터 사용
현재 채팅에서 커넥터와 해당 도구가 활성화되면 대화 흐름 내에서 자연스럽게 호출할 수 있습니다.
- 프롬프트에서 커넥터를 명시적으로 참조하려면 채팅에서 @를 입력하여 연결된 커넥터 목록을 확인하세요. 사용하려는 항목을 선택하면 메시지 위에 알약 모양의 레이블로 표시됩니다. 이렇게 하면 에이전트가 현재 작업에서 지정한 커넥터만 사용하게 됩니다.
- 커넥터를 참조하는 프롬프트를 입력합니다. 예를 들어, Asana 링크를 붙여넣고 "이 프로젝트의 스펙을 사용하여 초안 프로토타입을 만들어 줘"라고 작성하세요.
- 프롬프트에 커넥터가 필요한 경우, 에이전트는 호출할 커넥터와 도구를 보여 주고 동의를 요청합니다. 계속하려면 실행을 클릭하세요. 개별 도구와 그 권한은 커넥터 설정에서 관리할 수 있습니다.
소스 콘텐츠가 변경되면 커넥터를 다시 실행하여 최신 컨텍스트를 가져오세요.
커넥터 도구가 항상 실행되도록 설정된 경우, 응답이 16MB를 초과하면 파일 다운로드가 실패할 수 있습니다. 텍스트 파일의 경우, 이는 일반적으로 최대 16MB의 파일 크기에 해당합니다. 대략적으로 5-6MB보다 큰 이미지는 이미지 인코딩이 응답 크기를 증가시키기 때문에 제한을 초과할 수 있습니다. 이는 Figma 에이전트와 Figma Make의 모든 커넥터에 적용됩니다. 큰 이미지 다운로드에 실패하면, 도구를 실행 요청으로 설정하고 다시 시도하세요.
사용 가능한 추천 커넥터에는 무엇이 있나요
Figma는 현재 검증된 커넥터 일부만 지원합니다. 추천 MCP 서버는 Figma의 보안 및 개인정보 보호 기준을 충족하는지 저희 팀이 검토했습니다.
참고: 관련 커넥터를 사용하려면 외부 서비스의 계정이 필요합니다. 이용 가능 여부는 서비스 내 요금제, 시트, 역할 또는 접근 권한에 따라 달라질 수 있습니다.
Figma는 다음과 같은 추천 커넥터를 제공합니다.
팁: 이 목록에 없는 MCP 서버에 연결해야 하나요? 자신만의 사용자 지정 MCP 커넥터를 생성할 수 있습니다. 사용자 지정 MCP 커넥터는 유료 플랜이 필요합니다.
Amplitude
- Figma에서 Amplitude의 사용자 트렌드, 퍼널, 실험에 접근하여 제품 컨텍스트를 반영한 디자인과 프로토타입을 생성하세요.
- 디자인 변형을 생성하고 테스트하여 사용자 행동에 미치는 영향을 추적하세요.
Asana
- Figma에서 Asana 작업과 프로젝트에 접근하여 실시간으로 진행 상황과 팀의 우선순위를 추적하세요.
- Asana 작업을 생성하고 관리하여 개념에서 완료에 이르기까지 프로젝트를 조율할 수 있습니다.
Askable
- Figma 내에서 Askable의 연구 결과에 접근하세요.
- 연구 근거를 검색하고 검증된 참가자들의 실제 발언과 행동을 바탕으로 프로토타입을 제작하세요.
Atlassian
- Figma에서 직접 Confluence 페이지와 문서에 접근하고 편집하여 스펙, 결정 및 디자인 작업을 연결 상태로 유지하세요.
- 맥락 전환 없이 Jira 이슈와 에픽에 접근하고 생성하며 상태를 전환하여 팀이 디자인에서 개발로 원활하게 넘어갈 수 있도록 하세요.
- Compass 컴포넌트, 서비스, 스코어카드에 접근하고 생성하며 업데이트하여 디자인과 프로토타입을 엔지니어링 생태계와 연결된 상태로 유지하세요.
Box
- 디자인 프로세스 중에 기존 Box 보안 및 접근 정책을 그대로 적용하면서 Box의 허브와 콘텐츠에 접근하세요.
- 엔터프라이즈 컨텍스트에 기반한 프로토타입을 만들기 위해 모든 콘텐츠에서 주요 인사이트를 추출하고 쿼리하세요.
Contentsquare
- Figma에서 사용자의 여정, 퍼널, 페이지 메트릭과 같은 Contentsquare 분석에 접근하세요.
- 실제 출시된 제품을 사용자들이 어떻게 사용하는지 조회하여 디자인 결정에 실제 사용자 행동을 반영하세요. 커넥터는 읽기 전용입니다.
Dovetail
- Figma에서 Dovetail 고객 데이터에 접근하여 디자인 결정에 활용하세요.
- Dovetail 작업공간을 검색하여 관련된 프로젝트, 데이터 및 문서를 찾으세요.
Google Drive
- Figma에서 Google Drive의 파일에 직접 접근하여 팀의 기존 연구 자료, 데이터, 이미지 등의 정보를 바탕으로 디자인과 프로토타입을 제작하세요.
- Figma에서 Google Drive에 새 파일을 생성하여 결정을 요약하고 자산을 업로드하면 팀이 주로 사용하는 위치에서 공유하기가 더 쉬워집니다.
참고: Governance+ 애드온을 사용하는 경우 Google Drive 커넥터를 사용할 수 없습니다.
Granola
- Figma를 Granola의 회의 기록에 연결하세요
- 회의 메모를 검색하여 과거 회의에서 논의된 특정 주제를 찾아보고, 메모에서 실행 항목이나 결정을 추출하며, 회의 기록을 기반으로 질문에 답하는 등 다양하게 활용해 보세요.
GitHub
- 공개 또는 비공개 GitHub 리포지토리, 이슈 및 풀 리퀘스트에 접근하여 디자인 작업을 코드베이스에 연동하세요.
- Figma 내에서 GitHub의 이슈 및 PR을 생성하고 요약하여 디자인 변경 사항이 개발 작업으로 직접 전환되도록 하세요.
Hex
- Hex 대시보드와 데이터 앱을 가져오고, Hex 스레드를 통해 데이터에 관한 질문을 하세요.
- 프레젠테이션, 디자인 및 보드에 데이터를 통합하세요.
Linear
- Figma에서 Linear의 이슈, 프로젝트 및 문서에 접근하여 관련된 컨텍스트로 디자인과 프로토타입을 생성하세요.
- Linear 이슈와 프로젝트를 생성하고 관리하여 디자인과 프로토타입을 계획된 작업으로 전환할 수 있습니다.
Mapbox
- Figma Make 프로토타입에 실시간 대화형 Mapbox 지도를 추가하세요.
- Figma 에이전트를 사용하여 Mapbox Streets v8 타일 세트에서 실제 위치를 생성하세요.
- 지도의 스타일을 브랜드에 맞게 조정하고 접근성을 확인하세요.
Marvin
- Figma 내에서 직접 Marvin에 접근하여 실제 사용자 피드백과 데이터에 기반을 두고 디자인하세요.
- 고객 지식의 요약을 생성하여 자신 있게 디자인하고 더 빠르게 프로토타입을 검증할 수 있습니다.
- Marvin 엔터프라이즈 요금제와 Marvin의 컨트리뷰터 또는 관리자 역할이 필요합니다.
Mobbin
- Mobbin에서 화면과 패턴을 연구 및 참조 목적으로 업무 흐름에 추가하세요.
- Mobbin 레퍼런스를 디자인 시스템과 결합해 디자인 아이디어를 자유롭게 탐색해 보세요.
- Figma에서 디자인을 Mobbin 벤치마크와 비교하세요.
monday.com
- 팀의 계획과 우선순위에 맞춰 작업할 수 있도록 Figma에서 monday.com 보드와 항목에 접근하세요.
- 업데이트를 생성하고 관리하여 모든 팀에서 작업이 잘 보이고 연결된 상태로 유지되도록 하세요.
Notion
- Figma에서 Notion 페이지 및 데이터베이스에 직접 접근하여 디자인 흐름에 컨텍스트, 스펙 및 메모를 가져오세요.
- Notion 문서를 생성 및 업데이트하여 디자인 문서가 체계적으로 정리되고 항상 동기화 상태를 유지하도록 하세요.
Slack
- Slack 메시지, 스레드, 채널, 사용자 및 파일을 검색하고 읽으세요.
- 메시지를 보내고 캔버스 및 채널을 생성하여 조치를 취하세요.
Sprig
- Figma에서 고객 설문조사에 접근하여 디자인과 프로토타입을 근거에 기반해 만드세요.
- Sprig 연구를 생성하고 시작하여 Figma로 만든 디자인, 개념, 프로토타입을 테스트하고 사용자 반응을 측정하세요.
Twilio
- Figma에서 Twilio의 API 문서에 접근하여 프로토타입에 메시징, 음성, 인증 같은 커뮤니케이션 기능을 구축하세요.
- 디자인 흐름을 벗어나지 않고 Twilio API용 정확한 최신 코드를 생성하세요. 커넥터는 API 지식을 제공하며 메시지를 보내거나 계정 데이터에 접근하지 않습니다.
Zapier
- 단일 연결을 통해 Google Drive, Microsoft Office, Zoom, Jira, HubSpot, Slack 및 9,000개 이상의 다른 앱에 연결하세요.
- 도구의 컨텍스트를 디자인 및 프로토타입 제작 업무 흐름으로 직접 가져오세요. 요구사항 문서나 실제 데이터가 있는 스프레드시트, 회의 요약을 끌어올 수 있습니다. 나아가 하나의 프롬프트로 사용하는 모든 도구에서 작업을 생성하고 메시지를 보내며 업무 흐름을 실행할 수 있습니다.
zeroheight
- zeroheight 스타일 가이드의 디자인 시스템 정보를 활용하여 Figma에서 디자인 시스템을 준수하는 프로토타입을 몇 초 만에 생성하세요
- Figma를 사용하여 zeroheight 문서를 스트레스 테스트하세요. AI의 잘못된 해석은 불명확한 지침을 드러내고 개선 우선순위를 정하는 데 도움을 줄 수 있습니다.
- zeroheight 엔터프라이즈 요금제와 디자인 시스템(DS) 팀에 접근할 수 있는 편집자 또는 관리자 시트가 필요합니다. 문서 뷰어는 zeroheight MCP 서버에 접근하기 위해 사용자 지정 커넥터를 생성할 수 있습니다.
참고: 제품을 Figma에 연결하는 것에 관심이 있으신가요? 현재 새로운 파트너십에 관심 있는 분들의 신청을 받고 있습니다. 관심 있으시다면, 제품과 사용 사례에 대한 몇 가지 정보를 공유해 주세요.
커넥터 설정 관리
일부 커넥터에는 여러 MCP 도구가 포함되어 있습니다. 이러한 도구는 데이터 가져오기, 업데이트 전송 또는 콘텐츠 관리와 같은 커넥터 내에서 서로 다른 기능을 수행합니다.
Figma에서 사용 가능한 도구를 제어할 수 있습니다. 예를 들어 콘텐츠를 가져오는 도구는 허용하지만 외부 소스에 콘텐츠를 전송하는 도구는 비활성화할 수 있습니다.
참고: 외부 소스에 쓸 수 있는 도구는 기본적으로 비활성화됩니다. 연결된 서비스에 콘텐츠를 다시 보내기 전에 수동으로 활성화해야 합니다.
커넥터 내에서 각 도구의 권한을 제어할 수 있습니다. 사용 가능한 옵션은 다음과 같습니다.
| 설정 | 작동 방식 | 사용 시기 |
|---|---|---|
| 실행 요청 | Figma가 도구를 실행하기 전에 항상 사용자에게 허락을 요청합니다 | 대화 중 에이전트가 도구를 실행할 때마다 실행 여부를 직접 결정하고 싶은 경우 |
| 항상 실행 | Figma가 필요할 때 사용자 확인 없이 도구를 실행합니다 | 외부 소스와 해당 데이터를 신뢰할 수 있는 경우 |
| 실행하지 않기 | Figma가 도구 실행을 시도하지 않습니다 | 필요하지 않은 도구에 이 설정을 사용하세요. Figma AI가 선택할 도구가 줄어들어 속도를 높이는 데 도움이 될 수 있습니다 |
주의: 외부 소스로부터 컨텍스트를 가져올 때 프롬프트 주입에 주의하세요.
현재 대화에서 사용되지 않도록 커넥터를 일시적으로 비활성화할 수도 있습니다.
- 채팅 상자에서 컨텍스트 추가를 클릭합니다. 커넥터 위로 마우스를 올린 후, 관리를 선택합니다.
- 커넥터에서 관리를 클릭하세요.
- 읽기 또는 쓰기 도구를 활성화하거나 비활성화하거나 해당 커넥터 내 개별 도구의 권한을 설정하세요.
팁: 관련 있는 커넥터와 도구만 활성화하여 에이전트가 더 빠르게 작업할 수 있도록 하세요.
커넥터 연결 해제
커넥터의 연결을 해제하면 Figma 에이전트 및 Figma Make가 해당 커넥터를 통해 데이터를 읽거나 쓸 수 없습니다. 외부 도구의 데이터를 삭제하지 않으며, 나중에 다시 추가하고 인증하면 재연결할 수 있습니다.
- 채팅 상자에서 컨텍스트 추가를 클릭합니다. 커넥터 위로 마우스를 올린 후, 관리를 선택합니다.
- 커넥터에서 관리를 클릭하세요.
- 모달 하단에서 연결 해제를 클릭하세요.