[Claude] Figma에서 MCP로 디자인 → 코드 추출해보고 느낀 점

Tailwind를 직접 사용하면서, 스타일을 하나하나 일일이 지정하는 게 꽤 번거롭다는 생각이 들었습니다.
물론 반복 작업은 디테일을 쌓는 과정이기도 하지만, 어느 순간부터는 이런 단순 작업을 AI가 대신해주고, 나는 더 복잡하고 창의적인 작업에 집중하고 싶다는 열망이 생겼습니다!

그래서 결국, Claude 구독을 결제했습니다.

또 하나의 구독료...

이제 슬슬 구독료 전쟁이 시작되는 느낌입니다.
음악 스트리밍, 쿠팡, 서버, 도메인… 그리고 이제는 Claude까지.

이 모든 걸 효율적으로 관리하려면 디지털 자산 정리도 필요할 것 같다는 생각이 들더라고요.

https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server#h_01K25F7RBP00A3VH1733692QN2

Guide to the Dev Mode MCP Server

🚧 The Dev Mode MCP Server is currently in open beta. Some functions and settings may not yet be available. The feature may change and you may experience bugs or performance issues during the beta p...

help.figma.com

현재 figma에서는 beta 버전으로 실험버전을 제공하고있습니다.

이문서를 기반으로 작업하였습니다.

1. Dev Mode MCP Server 기능 정리

Figma 디자인 파일에서 코드를 생성하는 AI 에이전트에 중요한 디자인 정보와 컨텍스트를 제공하여 Figma를 사용자의 워크플로에

직접 도입하는 역활을 제공합니다.

Dev Mode MCP Server는 Figma 디자인 파일에서 코드를 생성하는 AI 에이전트에게 중요한 디자인 정보와 컨텍스트를 제공해주는 역할을 합니다. 쉽게 말해, Figma 디자인을 단순히 ‘이미지’로만 보는 것이 아니라, 디자인이 만들어진 의도와 구조까지 함께 이해하도록 돕는 브릿지 역할을 하죠.

이 기능을 통해 Figma는 디자이너와 개발자의 워크플로우 속으로 보다 직접적이고 밀접하게 통합될 수 있게 됩니다.

1. 선택한 프레임에서 코드 생성

기존에 사용하던 Anima나 Figma to Code 툴처럼, Figma에서 요소를 선택해서 코드로 변환해주는 기능은 이제 꽤 익숙해졌죠.
하지만 Dev Mode MCP Server의 차별점은 단순한 코드 추출을 넘어서,
디자인에 포함된 이미지 요소까지 프로젝트 폴더 안으로 자동으로 다운로드하고 경로까지 정리해주는 기능이 정말 편리했습니다.

물론 자동으로 생성된 코드 중에는 약간 손봐야 하는 부분도 있었어요.
특히 복잡한 인터랙션이나 커스텀 스타일이 필요한 경우엔 손수 다듬어야 했죠.

하지만 전체적으로 봤을 때,
스타일 태그를 직접 신경 쓸 필요 없이

필요한 컴포넌트만 선택해서
클릭 몇 번이면 코드 + 이미지가 셋팅된 상태로 떨어지는 덕분에

전체 작업 시간이 3분도 채 걸리지 않았습니다.

2. 디자인 컨텍스트 추출

Dev Mode MCP Server를 활용하면,
Figma에서 사용된 디자인 정보—즉 변수, 컴포넌트, 레이아웃 구조 등을 IDE로 직접 가져올 수 있습니다.

이 기능은 특히 디자인 시스템 기반의 작업이나 컴포넌트 단위로 UI를 구성하는 워크플로우에서 큰 도움이 됩니다.

예를 들어, 디자이너가 정리해둔 색상, 폰트 크기, 간격 등의 스타일 정보를 일일이 코드에 맞춰 바꿀 필요 없이,
자동으로 정리된 형태의 코드/토큰으로 추출할 수 있어서 일관성과 효율성을 모두 챙길 수 있어요.

실제 사용 예: Color 토큰 추출

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        // Neutral Colors
        neutral: {
          0: '#FFFFFF',
          50: '#F4F4F6',
          200: '#D1D4DB',
          300: '#9096A2',
          500: '#202C46', // Base
          600: '#1B253C',
        },
        
        // Primary Blue Colors
        blue: {
          100: '#F5F7FE',
          200: '#EAEFFD',
          300: '#ADBEF7',
          400: '#5A7DEE',
          500: '#315CEA', // Base
          600: '#2A4EC7',
          700: '#2240A4',
        },
        
        // Red Colors (for buttons)
        red: {
          100: '#FCE9EC',
          200: '#F9D2D9',
          300: '#F2A6B4',
          400: '#E9677F',
          500: '#DF2648', // Base
          600: '#B71F3B',
        },
        
        // Basic Colors
        white: '#FFFFFF',
        black: '#000000',
      },
      
      fontFamily: {
        'poppins': ['Poppins', 'sans-serif'],
        'inter': ['Inter', 'sans-serif'],
      },
    },
  },
  plugins: [],
}

저는 이 기능을 활용해 Figma에서 정의된 color 공통 요소들을 추출해보았는데요,
디자인 시스템에 맞춰 지정된 색상 값들이 다음과 같이 깔끔한 JSON 형태로 뽑혔습니다

3. Code Connect로 더욱 스마트하게 코딩하세요

Code Connect는 Figma Dev Mode MCP Server가 제공하는 기능 중 하나로,
Figma에서 생성된 코드와 실제 프로젝트 코드베이스 간의 일관성을 유지하도록 도와줍니다.

디자인에서 추출된 코드가 단순한 정적 HTML이 아니라,
실제 프로젝트에 사용되는 컴포넌트 구조와 연결되어 출력될 수 있도록 설계된 기능이에요.

아직 이 기능을 직접 사용해보진 않았지만,
설명을 살펴보면 코드의 일관성이 중요한 프로젝트에서 특히 유용할 것으로 보입니다.

예를 들어:

팀에서 이미 구축해둔 컴포넌트가 있다면
Figma에서 버튼을 선택했을 때
그 버튼의 디자인을 그대로 반영하면서도 실제 코드베이스의 <Button /> 컴포넌트를 재사용하게 해주는 방식이죠.

결과적으로는,

재사용성과 일관성을 모두 챙기면서도, 디자인 → 코드 전환의 품질을 높여주는 스마트한 도구라고 볼 수 있을 것 같아요.

디자인을 코드로 변환할 때, 이미 프로젝트에 존재하는 컴포넌트를 자동으로 인식해서 재사용할 수 있다는 점인거같습니다.

2. 사용 전 꼭 확인해야 할 요소들

1. Figma의 Dev or Full seat 사용

가장 기본적인 요구사항은 Figma의 Dev seat 또는 Full seat 라이선스를 가지고 있어야 한다는 점인데요,
이는 해당 기능이 베타 단계에 있고, 주로 팀 단위 또는 전문 사용자에게 제공되기 때문입니다.

2. MCP 서버를 지원하는 애플리케이션 (VS Code, Cursor, Claude Code)

Dev Mode MCP 서버는 다양한 개발 도구와 연동할 수 있는데, 대표적으로 VS Code, Cursor, 그리고 Claude Code가 있습니다. 저는 그중에서 Claude Code의 MCP 기능을 직접 사용해보았습니다.

Claude Code와 claude.md 파일의 역할

Claude Code에서는 claude.md 파일을 통해 디자인과 코드 간의 컨텍스트 차이를 줄이고,
내 프로젝트 스택에 맞춰 AI가 동작하도록 세밀하게 설정할 수 있었습니다.

예를 들어, Tailwind CSS에서 기본 단위로 rem을 사용해야 하는 부분을 claude.md에 미리 정의해두니,
Figma에서 코드를 추출할 때도 자동으로 rem 단위를 적용해주는 등,
프로젝트 내 일관된 스타일을 유지할 수 있었습니다.

3. Figma 데스크톱 앱에서만 사용 가능

현재 Dev Mode MCP 서버 기능은 Figma 데스크톱 앱에서만 사용할 수 있습니다.
즉, 웹 브라우저 환경에서는 로컬 MCP 서버를 실행하거나 연결하는 기능이 지원되지 않아요.

Dev Mode MCP 서버는 로컬 환경에서 직접 실행됩니다.
기본적으로 http://127.0.0.1:3845/mcp 주소로 서버가 구동되는데,
이 상태에서 각각 사용하는 IDE(예: VS Code, Claude Code)에 맞게 설정을 해줘야 합니다.

설정 과정에서 겪은 삽질 경험

제가 공식 문서(처음에 첨부해드린 링크)를 참고해서 설정을 따라 했지만,
서버와 IDE 간 연결 과정에서 자꾸 304 에러가 발생해서 꽤 헤맸었어요.

그래서 Claude Code를 재실행하고, VS Code도 완전히 종료 후 다시 켠 다음에 다시 연결해보니
그제서야 제대로 작동했습니다.

-> 알고보니 figma에서 dev mode로 변경해야지 연결되는거 였습니다.

이상으로 마치며

직접 사용해본 결과,
Figma 디자인을 보면서 ‘이걸 언제 퍼블리싱하지?’ 하던 귀찮음과 번거로움이 확실히 줄어들었어요.

솔직히 말해서, 꽤 신박한 경험이었습니다.

이런 기능들을 잘 활용하면 UI 구현 속도가 훨씬 빨라질 뿐만 아니라,
코드 퀄리티를 높이고, 더 나은 서비스를 어떻게 제공할 수 있을지에 대한 고민에 더 집중할 수 있게 도움을 주게되는 요소입니다.

즉, 단순히 코딩에만 매몰되지 않고,
Figma를 깊이 공부하면서 더 좋은 기획과 서비스를 만드는 데 에너지를 쏟을 수 있다는 점이 가장 큰 장점이라고 생각합니다.

앞으로도 이런 도구들을 적극 활용해
더 고차원적인 고민과 창의적인 개발에 집중해봐야겠네요 !