Figma MCP 연동

Documentation Index

Fetch the complete documentation index at: https://docs.replit.com/llms.txt

Use this file to discover all available pages before exploring further.

Agent와 Model Context Protocol(MCP)을 사용하여 채팅에서 직접 Figma 디자인을 작업하세요. Figma 링크를 붙여넣으면 레이어를 탐색하고, 변수와 컴포넌트를 추출하며, 스크린샷을 캡처하고, 선택한 프레임에서 코드를 생성할 수 있습니다.

​

기능

• 스타터 코드 생성: 선택한 프레임을 프로덕션 수준 코드로 변환하여 기능 개발을 빠르게 시작하거나 빠른 반복이 가능합니다.
• 디자인 데이터 추출: 파일에 정의된 변수, 컴포넌트, 레이아웃 사양에 접근합니다.
• 프레임 스크린샷 캡처: 구현 가이드용 시각적 참조를 모든 프레임에서 생성합니다.
• MCP 활동 검사: 채팅 이벤트를 확장하여 원시 요청과 응답을 확인합니다.

​

데모

링크 감지부터 코드 생성까지의 워크플로를 빠르게 살펴보세요:

​

사용법

​

Agent 채팅에서 연결하기

1. 프로젝트 편집기에서 Agent 채팅을 엽니다.
2. 메시지 상자에 유효한 Figma 파일 또는 프로토타입 링크를 붙여넣습니다.
3. 유효한 링크가 감지되면 Figma 디자인 카드가 표시됩니다. Figma로 로그인을 클릭하여 인증합니다.

지원되는 링크를 붙여넣으면 Agent에 빠른 인증을 위한 Figma 디자인 카드가 표시됩니다:

​

Figma 링크로 작업하기

링크 기반 워크플로를 사용하여 디자인의 정확한 부분에 작업을 수행하세요:

1. Figma에서 프레임이나 레이어로의 링크를 복사합니다.
2. URL을 채팅 상자에서 Agent와 공유하고 원하는 내용을 설명합니다.

Figma에서 Agent가 작업할 정확한 프레임이나 레이어로의 링크를 복사합니다: 그런 다음 Agent에 링크를 붙여넣고 짧은 지시사항을 추가합니다 (예: “이 프레임을 React로 생성해”):

​

MCP 호출 확인하기

Used Figma MCP (Beta)라고 표시된 타임라인 이벤트를 열면 기본 요청과 응답을 확인할 수 있습니다. MCP 호출을 검사하기 위해 타임라인 이벤트를 확장하는 위치:

​

요율 제한 및 Figma 시트 요구사항

Figma는 Figma 플랜 및 시트 유형에 따라 MCP 도구 호출에 요율 제한을 적용합니다. 이 제한은 Replit이 아닌 Figma가 설정합니다. Dev 및 Full 시트에는 분당 제한도 있습니다: Pro는 분당 10회, 조직은 분당 15회, Enterprise 플랜은 분당 20회입니다.

​

제한에 포함되는 항목

요율 제한은 get_design_context 및 get_image와 같이 Figma에서 데이터를 읽는 도구에 적용됩니다. whoami 및 generate_figma_design과 같은 일부 도구는 제외됩니다.

​

요율 제한에 도달했을 때

Agent는 Figma 요율 제한에 도달했을 때 알려줍니다. 제한을 늘리려면:

• Starter 플랜 또는 무료 계정: Dev 또는 Full 시트가 포함된 Pro, 조직 또는 Enterprise 플랜으로 업그레이드하세요.
• View 또는 Collab 시트: 현재 플랜에서 Dev 또는 Full 시트로 업그레이드하세요.
• Dev/Full 시트 (조직): 가장 높은 제한을 위해 Enterprise 플랜으로 업그레이드하세요.

전체 세부 정보는 Figma 플랜, 접근 및 권한 문서를 참조하세요.

​

연결 관리

replit.com/integrations에서 Figma 연동을 관리하거나 연결을 해제할 수 있습니다. Replit 연동 페이지에서 연결을 찾고 관리하세요: