개발자는 패턴, 설계, 철학 같은 추상적인 지식을 배웁니다. 이를 코드 레벨에서 바로 활용하려면 규칙이 누락되거나 불완전하게 구현되기 쉽습니다. 이는 마치 LLM이 context없이 코드를 생성할 때 환각을 일으키는 것과 비슷합니다.

ESLint, Prettier 같은 도구들을 통해 개발자가 지식을 모두 신경 쓰지 않아도 context를 통하여 안정적으로 규칙을 지킬 수 있도록 돕는 것 처럼 LLM에게 MCP(model context protocol)를 제공하면 환각 현상을 최소화할 수 있습니다.

What is the Model Context Protocol (MCP)?

Figma에서도 이제 beta버전에서 Figma MCP를 제공하고 있습니다. 이를 통해 에이전트는 디자인 자체에 접근하여 노드, 토큰, 코드, 스크린 샷 등 다양한 정보를 직접 가져와 쓸 수 있게 되었습니다. 즉 디자인 맥락을 읽을 수 있게 되었습니다.

해당 아티클을 읽으시면 아래와 같은 지식을 얻을 수 있습니다.

• Figma MCP 훑어보기
• Figma API 기반 디자인 시스템을 Figma MCP로 구현 해보기
• Figma Plugin을 Figma MCP로 구현해보기

1. Figma MCP 훑어보기

Figma mcp 서버에는 AI가 코드를 생성, 조정 및 디자인에 맞게 정렬하는 데 도움이 되는 여러 도구가 포함되어 있습니다. 각 도구는 코드 생성 부터 구성 요소 매핑 또는 디자인 토큰 검색까지 다양한 워크플로를 제공합니다.

간단하게 수행하는 리스트를 요약 해 보겠습니다.

1. get_code
   선택한 항목을 코드로 변경할 수 있습니다. 이때 기본 출력은 React + Tailwind이지만 프롬프트를 통해 사용자 지정을 할 수 있습니다.

2. get_variable_defs (local only)
   변수, 컴포넌트, 레이아웃 데이터를 IDE로 직접 가져올 수 있습니다.

3. Retrieve make resources
   Figma make context 또한 mcp로 제공됩니다. 이제 figma make를 따로 추출하지 않아도 mcp를 통하여 LLM에 컨텍스트로 제공됩니다.

4. get_code_connect_map (local only)
   Figma code connect가 설정된 디자인은 code connect에 연결된 코드를 직접 가져와 llm에 제공합니다.

5. get_screenshot
   선택한 항목의 스크린샷을 찍을 수 있습니다. 이를 통해 에이전트는 레이아웃 정확도를 유지하는 데 도움이 됩니다.

6. create_design_system_rules
   에이전트가 디자인을 고품질의 코드로 변환할 수 있도록 적절한 맥락을 제공하는 규칙 파일을 생성하는 도구입니다.

7. get_metadata
   레이어 ID, 이름, 유형, 크기, 위치 등 기본 속성만 포함하는 선택 항목의 XML을 반환합니다. 이를 통해 에이전트는 get_code시 필요한 스타일의 정보만 get_metadata를 통해 호출할 수 있습니다.

이제 위 기능을 통해 기존에 figma api를 통해 자동화 설계 및 구현이 되었던 디자인 시스템을 figma mcp를 통하면 얼마나 빠르게 구축할 수 있는지 실험해 보겠습니다.

위의 내용이 더 궁금하시면 아래 링크로 진입해주세요

Figma MCP

2.Figma API 기반 디자인시스템을 Figma MCP로 구현해 보기

이제 위 기본 지식을 배경으로 figma mcp를 연결해 보고, 기존 구현되어 있던 디자인시스템의 몇 가지 요소들을 figma mcp + llm을 통해 구현하며 ai가 어떻게 맥락을 읽고 구현을 진행하는지 확인해 보겠습니다.

2.1 Figma MCP 연결하기

figma에서 제공하는 mcp를 사용하려면 Professional, Organization 또는 Enterprise 플랜 의 Dev 또는 Full 시트 권한이 필요합니다.

저는 로컬 MCP 서버를 사용 할 것이며, editor는 cursor를 사용하겠습니다.

1. figma app 설치
   로컬 mcp서버는 figma app에서만 작동합니다. figma app을 설치해주세요

2. figma dev mode 모드 키기

3. enable mcp server 열기

enable MCP server를 클릭하시면 됩니다.

4. local mcp url cursor에 세팅
   figma local mcp 기본 포트 및 엔드포인트는 'http://127.0.0.1:3845/mcp'입니다.
   이제를 cursor setting/MCP & Intergrations 탭에서 New MCP Server를 통해 세팅해주시면 됩니다.
   

{
  "mcpServers": {
    "Figma": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

위 화면과 같다면 이제 figma mcp연결에 성공하셨습니다. 이제 이를 활용하여 디자인시스템의 몇 가지 요소들을 구현해 보겠습니다.

다른 툴을 사용하시거나 자세한 내용을 확인하고 싶으시면 아래 공식 홈페이지를 참고해 주세요

Guide to the Figma MCP server

2.2 Typography parser 구현해보기

2.2.1 Figma api 활용 버전

기존 Typography는 figma api를 활용해서 Typography의 node를 조회하고, 전달 받은 트리를 분석해서 css화 하는 형식으로 진행을 하였습니다.

figma api 문서
figma ndoe 타입

Typography 파서 플로우를 간단하게 코드로 예시를 들며 설명해 보겠습니다.

플로우

위와 같이 Typography가 정의된 frame이 있습니다. 해당 frame의 node값을 figma api로 조회해 보겠습니다.

  const { nodes: typoNode } = await fetchFigmaNodesByFileName('typography');

이제 이를 분석하여 사용할 데이터를 가져올 수 있습니다.

타이포그래피의 경우 스타일로 등록이 되어 있기 때문에 node가 아닌 styles 데이터부터 확인하면 됩니다.

현재 목표는 typography를 가져오는 것 이기 때문에 styles에서 styleType이 'TEXT'인 것만 찾아서 typoObj로 정의하면 됩니다.

const typoObj: TargetTypeData = {};
for (const key of Object.keys(typoNode)) {
  Object.assign(typoObj, getTextStyleObj(typoNode[key].styles, 'TEXT') ?? {});
}

이후 정제된 typoObj는 typo 데이터들만 가지고 있게 됩니다. 이를 figma api를 통해 key를 각각 조회하며 해당 값을 추출하여 사용하는 방법 또한 있지만, 저희는 typography가 정의된 node 번호를 알고 있고, 애초에 해당 node-id파일을 조회하였기에, 미리 조회한 값에서 typoObj의 key와 매칭되는 데이터를 순회하며 찾아내면 됩니다.

이제 해당 key와 매칭되는 데이터를 찾았으면, 해당 필드에있는 style값에 접근해 봅시다.

마지막으로는 위 데이터를 활용하여 css화를 진행하면 됩니다.

예시 코드는 아래와 같습니다.

//비교할 keyList를 만들고
const typoKeyList = Object.keys(typoObj);

// typeNode를 재귀돌면서 node.type이 text인것만 조사, 
const generator = dfsGenerator(typoNode);
for (const node of generator) {
  // type이 text인것중 typoKeyList에 styles.text라는 styleskey가 있는것 조회
  if (node.type === 'TEXT' && node.styles && typoKeyList.includes(node.styles.text ?? '')) {
      //이후 fontSize 등 사용하고 싶은것들을 가져와서 css화를 진행하면 된다.
      const { fontSize, fontWeight, ... } = node.style;
      //디자인 시스템에서 정의한 클래스 네임
  	  const className = typoList[node.styles.text].name
     ....
    

해당 과정을 통하면 아래와 같은 typo데이터들이 적재된 css를 만들 수 있습니다.

저는 위와 비슷한 과정을 통하여, 스크립트 실행 한 번으로 figma에서 정의된 타이포, 컬러, 이미지, 아이콘 등을 자동으로 css화 하거나 cdn에 적재하는 플로우를 만들었습니다.

이를 통해 변경 및 수정 요청이 있어도 별 다른 하드코딩 없이 스크립트 실행 한 번으로 수정, 삭제, 추가 된 파일들을 해시기반으로 추적하여 재생성 하는 자동화 시스템을 설계할 수 있게 되었습니다.

이제 해당 글의 본론인 위 과정을 Figma MCP + LLM을 통해서 얼마나 쉽게 가져올 수 있는지 테스트 해 보겠습니다.

아마 위에서 설명드린 get_variable_defs (local only) 가 컨텍스트로 스타일을 제공해 주기 때문에 비슷한 원리로 더욱 쉽게 토큰들을 가져올 수 있을 것 같습니다.

2.2.2 Figma MCP 활용 버전

테스트용으로 약식으로 프롬프트를 작성하여 Typography를 추출해 보겠습니다.

최상의 출력을 얻는 방법은 아래 링크를 참고하여 작성하면 됩니다.

https://developers.figma.com/docs/figma-mcp-server/structure-figma-file/

우선 2.1의 세팅대로 mcp를 연결한 후 탐색한 프레임을 선택 해 주겠습니다.

이후 cursor로 돌아와 프롬프트를 세팅하고 agnet에 typograpghy css클래스들을 생성해달라 요청해 보겠습니다.

테스트용 심플 프롬프트

프롬프트
선택된 텍스트 레이어를 분석해서 CSS 클래스를 생성해줘.
규칙:

• className: Figma 스타일명
• font-size: px
• font-weight: 숫자
• line-height: unitless(= lineHeightPx / fontSize, 소수 3자리)
• letter-spacing: px (퍼센트라면 fontSize * %/100)

요청 결과

GOOD 완벽 합니다. 이제 해당 포스트를 종료하고 다른 직업을 찾아보겠습니다.

다음 아티클은 '다음 직업을 찾아서' 입니다

는 할 수 없습니다. 이번 아티클의 목표로는 `AI 파도 위에서 서핑하기`도 포함 되어 있으니깐요!

이제 관련 코드가 어떻게 만들어 졌는지 분석해 보겠습니다.

figma mcp서버 툴들을 순서대로 호출하며 정보를 얻었습니다. 우선 get_code부터 확인해 보겠습니다.

get_code

이전에 소개시켜준대로 프롬프트가 설정되어 있지 않아 기본 규격인 react + tailwind기반으로 선택 영역을 코드로 변환하여 제공합니다.

get_metadat

선택 영역의 얇은 메타(레이어 id/ 이름/ 타입/ 좌표/ 크기)만 담은 xml을 받게 되는데, 해당 메타를 통해 개요를 잡는 역할입닌다.

called get_variable_defs

선택 영역에 사용된 변수/스타일을 뽑아줘 를 통해 코드가 토큰 이름을 직접 참조할 수 있게 됩니다.
fima 선택 항목에 사용된 변수와 스타일을 반환합니다.

typography의 경우 해당 부분에서 모든 데이터를 얻을 수 있네요!

get_screenshot

선택 영역의 스크린샷을 같이 넘겨 레이아웃 정확도를 높여주게 됩니다.
생성된 코드의 레이아웃 정확도를 유지하는데 도움이 됩니다. (토큰 사용량이 많다고 함. 우려되면 해제)

위 네 가지 과정을 통해 해당 디자인의 플로우를 파악하고 분석하여 결과를 내놓게 됩니다.

만약 이전에 설명한 code connect까지 설정하였다면 code_connect 까지 검색하여 더욱 정확도를 높게 제공합니다.

이제 우리는 figma mcp에서 제공하는 get_variable_defs를 통해서 variable값들은 환각현상 없이 100% 일치하게 데이터를 가져올 수 있는걸 확인하였습니다.

이제 토큰들이 아닌 design to code는 어느정도 레벨로 구현이 되는지 확인해 보겠습니다.

2.3 figma to code 구현해보기

2.3.1 figma plugin 활용

figma plugin에는 디자인을 code로 만들어주는 다양한 툴들이 많습니다. 하지만 디자인 자동화를 위해서는 현재 사내에서 사용하고있는 디자인시스템 기반의 figma to code기능이 필요하였고, 이를 구현하였습니다.
방식은 아래와 같습니다.

figma api를 활용하지않고 플러그인을 선택한 이유는, 범용성 및 figma api로 파싱하면 바로 넘어오지 않는 로우 레벨 데이터(벡터 등)값들이 plugin에서는 바로 접근이 가능하여 사용하게 되었습니다.

플로우

figma plugin을 켠 후 위와같은 design을 클릭하면 사내 디자인시스템 기반(ui component, token)으로 code로 변경 됩니다.

위와 같이 디자인시스템으로 정의된 컴포넌트나 아이콘, img등은 해당 node의 트리를 분석하여 props를 매칭해주거나 디자인 토큰을 매칭 시켜줍니다.

이때 props가 사용되는 언어나 프레임워크의 예약어이거나, children 유무 등 디테일이 필요한 것들은 component mapper를 제작하여 변경을 진행하였습니다.

[간단한 컴포넌트 기준]

[디테일한 조정이 필요한 컴포넌트들은 핸들러 제작]

이외에 매칭되지 않는 기능들은 전부 tailwind기반으로 디자인이 진행됩니다.

위 구조를 통하여 사내 디자인시스템 기반 figma plugin을 만들었고 design to code를 구현하여, 해당 디자인시스템으로 디자인된 서비스들은 퍼블리싱 없이 해당 툴을 통하여 마크업을 진행중입니다.

아직 피그마는 mcp에서 plugin실행은 제공하지 않고 있으니 몇 가지 프롬프트를 넣어 얼마나 유사하게 개발을 해주는지 확인해보겠습니다.

2.3.2 Figma mcp 활용

1. Figma MCP 훑어보기 에서 설명 드렸듯 figma mcp에서 제공하는 get_code에서 이미 tailwind기반 마크업을 제공하기 때문에 자체 정의한 컴포넌트들을 제외하고는 오히려 제가 만든 구현체보다 퀄리티가 높을 것 같습니다.

약식으로 프롬프트를 넣고 제 플러그인과 동일한 코드가 나오는지 확인해 보겠습니다.

최상의 출력을 얻는 방법은 아래 링크를 참고하여 작성하면 됩니다.

https://developers.figma.com/docs/figma-mcp-server/structure-figma-file/

[목표]
선택된 Figma 노드를 우리 디자인시스템 기반 Vue 컴포넌트 코드로 변환한다.

[매핑 규칙]

• 컴포넌트 식별 키와 Vue 컴포넌트 이름
  badge → <Badge />
  • allowChildren: false
  • forceSelfClosing: true
  • propMappings: [{ from: 'style', to: 'variant' }]
    button → <Button>
  • allowChildren: true
  • propMappings:
    • { from: 'style', to: 'variant' }
    • { from: 'state', to: 'disabled', transform: (v) => v === 'disabled' }
• 예약어 회피: Figma 속성 'style'은 모두 'variant'로 매핑.
• children 정책: allowChildren=false면 텍스트/자식 무시. true면 텍스트는 기본 children으로, 내부 아이콘은 컴포넌트로 삽입.
• 아이콘 매핑: 'chevron_down_m' 같은 네이밍은 PascalCase로 렌더. size/color는 노드 값으로 바인딩.
• 스타일/토큰: 가능한 경우 semantic 계열 클래스나 토큰을 사용(예: semantic-text-primary, semantic-neutral-text-color).

[출력 형식]

• Vue SFC의 <template> 블록 내용만 출력. 추가 설명/주석/코드는 금지.
• props는 바인딩(:prop) 형태 사용. boolean은 바인딩 생략 금지(예: :disabled="true").

[예시 기대 형태]

<template>
  <Button :variant="'outline'" :size="'large'" :disabled="false">
    <div class="button-15-medium semantic-neutral-text-color">특가 더보기</div>
    <ChevronDownM :size="20" :color="'semantic-neutral-text-color'" />
  </Button>
</template>

결과

결과는 기대한 내용보다 오히려 더 잘 나온 것 같습니다. 현재 figma의 props를 그대로 매핑해 주는 구조인데 agent가 짜준 코드는, props에 있어야할 :text가 존재하지 않았습니다.

실제로 해당 컴포넌트는 text를 사용하지 않고 children으로 받은 text를 파싱하여 text로 넣어주는 구조로 agent가 짜준 코드가 더 이상적인 코드입니다. 하지만 코드 커넥터 등 실제 코드를 주입하지 않았기에 어떻게 이렇게 유추하였는지 궁금하여 agent에게 물어보았습니다.

훌륭하다.
하지만 내가만든 디자인시스템과 플러그인은 토큰을 쓰지 않는다.
내가 이겼다. (월급을 받으며)

3. 마무리(AI 파도 위에서 서핑하기)

3.1 figma mcp 사용 후기

이제 Figma MCP가 어떤 컨텍스트를 제공하고, 에이전트가 이를 어떻게 활용해 디자인 맥락을 이해하고 다양한 작업을 수행하는지 살펴봤습니다.

Figma MCP는 Tailwind 기반 마크업, 변수(토큰) 값, 스크린샷, 메타데이터 등을 제공합니다. 에이전트는 이를 통해 단순히 노드만 해석하는 수준을 넘어, 실제 컴포넌트·변수·레이아웃과 스크린샷까지 체계적으로 파악하며 산출물을 제공하였습니다.

더불어 정해진 규칙을 기계적으로 변환하는것을 넘어 맥락에 기반한 의사를 포함해 더 나은 코드를 제안하였습니다. 결과론적으로 Figma MCP를 활용하면 코드 생성은 물론, 테스트 코드, Storybook 설정, 접근성 점검 같은 부가 작업도 수월해집니다.

제가 이전에 구현했던 디자인 자동화나 plugin도 이제는 간단한 LLM + 프롬프트로으로 전부 대체 가능합니다. 이전에는 환각현상으로 불안함이 있었지만, Figma MCP 덕분에 안정성과 실용성이 크게 향상되었습니다.

3.2 AI 사용 관점

AI 파도가 밀려오고 있습니다. 우리가 하는일이 점차 화이트박스에서 블랙박스로 옮겨가는 변화를 경험하고 있습니다.

파도에 휩쓸리지 않으려면, 마치 우리가 어셈블리를 다루지 않고도 하이랭귀지 언어와 프레임워크로 서비스를 조립하며 만들었듯, 현재 조립하고 있는 과정이 조립된 채로 나온다 생각하고 우리는 더 큰 단위의 조립과 판단에 집중해야할 시기가 다가오고 있습니다.

우리가 어셈블리를 고려하지 않고 개발하듯, 이제 한 단계 높은 레벨에서 설계하고 사고하며 과정을 학습을 해야합니다. 학습 또한 과거에 "PHP → jQuery ... → 다양한 프레임워크"들로 기술 스택을 옮겨가며 배웠듯 ai트렌드를 꾸준하게 학습하며 성장하기를 바랍니다.

어떤면에서는 FE직군에 있는 개발자 들에게는 더욱 쉬운 서핑이 되지 않을까 싶습니다. 우리는 항상 트렌드에 민감하게 학습하고 적응해 왔으니깐요.

읽어주셔서 감사합니다.
박동현드림