Dev Mode MCP 서버 안내서

Dev Mode MCP 서버는 Figma Design 파일에서 코드를 생성하는 AI 에이전트에게 중요한 디자인 정보와 컨텍스트를 제공하여 Figma를 업무 흐름에 직접 통합합니다.

MCP 서버는 AI 에이전트가 모델 컨텍스트 프로토콜을 사용하여 데이터 소스와 상호 작용할 수 있는 표준화된 인터페이스의 일부입니다.

MCP 서버 활성화

1. Figma 데스크톱 앱을 열고 최신 버전으로 업데이트했는지 확인합니다.
   
2. Figma Design 파일을 생성하거나 엽니다.
3. 왼쪽 상단 모서리에서 Figma 메뉴를 엽니다.
4. 기본 설정에서 Dev Mode MCP 서버 활성화를 선택합니다.
   

화면 하단에 서버가 활성화되었고 실행 중임을 알려주는 확인 메시지가 표시될 것입니다.

MCP 클라이언트 설정

이제 서버가 Figma 데스크톱 앱에서 로컬로 실행되므로 MCP 클라이언트가 서버에 연결할 수 있습니다. 이 작업을 수행하려면 MCP 서버 구성 파일에 다음 내용을 추가하세요.

{
  
    "mcpServers": {
    
      "Figma": {

        "url": "http://127.0.0.1:3845/sse"

    }

  }

} 
  

본인에게 맞는 클라이언트용 지침을 따라 Dev Mode MCP 서버를 추가하세요.

Cursor

Cursor의 공식 문서를 여기에서 확인하세요. https://docs.cursor.com/context/model-context-protocol

VS Code

VS Code의 공식 문서를 여기에서 확인하세요. https://code.visualstudio.com/docs/copilot/chat/mcp-servers

Windsurf

Windsurf의 공식 문서를 여기에서 확인하세요. https://docs.windsurf.com/windsurf/mcp

Claude Code

Anthropic의 공식 문서를 여기에서 확인하세요. https://docs.anthropic.com/en/docs/agents-and-tools/claude-code/tutorials#set-up-model-context-protocol-mcp

Dev Mode MCP 서버 사용

Dev Mode MCP 서버는 LLM이 Figma에서 디자인을 번역하는 데 도움이 되는 도구 세트를 도입합니다. 클라이언트와 이를 공유할 수 있는 방법은 두 가지가 있습니다.

선택 기반

1. Figma 데스크톱 앱을 사용하여 프레임 또는 레이어를 선택합니다.
2. 클라이언트에 현재 선택한 항목을 구현하도록 도와달라고 요청하세요.
   

링크 기반

1. Figma에서 프레임 또는 레이어 링크를 복사합니다.
   
2. 클라이언트에 현재 선택한 URL에서 디자인을 구현하도록 도와달라고 요청하세요.