Figma + VS Code MCP 서버

Source: Dev.to

Overview

저는 최근에 MCP 서버에 대해 공유했으며, 이것이 실제 시스템으로부터 AI가 더 나은 컨텍스트를 얻는 데 어떻게 도움이 되는지 설명했습니다. 여기 프론트엔드 워크플로우에서 활용할 수 있는 한 가지 방법을 소개합니다.

Figma와 Visual Studio Code를 MCP 서버로 연결하면 다음을 할 수 있습니다:

• Figma 컴포넌트를 선택하기
• 디자인 컨텍스트에서 구조화된 프롬프트 생성하기
• 그 프롬프트를 바로 VS Code Copilot에 붙여넣기

스크린샷이나 긴 설명에 의존하는 대신, MCP는 Figma 컴포넌트의 구조, 간격, 토큰, 변형 등을 읽어 해당 컨텍스트에서 프롬프트를 생성하고, Copilot이 디자인에 훨씬 더 가깝게 UI 코드를 만들어냅니다.

Workflow

1. Figma에서 컴포넌트를 선택합니다.
2. MCP 서버가 컴포넌트의 디자인 메타데이터를 추출합니다.
3. 추출된 컨텍스트를 기반으로 프롬프트가 자동으로 생성됩니다.
4. 프롬프트를 VS Code Copilot에 붙여넣기합니다.
5. Copilot이 원본 디자인에 맞는 UI 코드를 생성합니다.

Demo

이 튜토리얼은 워크플로우를 명확히 보여줍니다:

Workflow Link (YouTube Live)

Takeaway

프론트엔드 개발자에게 이 접근 방식은 AI를 일상적으로 활용하는 보다 현실적인 방법을 제공합니다—추측은 줄이고, 컨텍스트는 늘립니다. 🚀