*공식* Figma Dev MCP 서버 사용해보기

몇 달 전에 서드 파티 Figma MCP 서버를 소개한 적이 있는데 최근 업데이트도 거의 되지 않고 방치된 상태였다. 방향성이 조금 다르지만 Figma Dev 모드에서 공식적으로 MCP 서버를 지원한다는 내용을 보고 직접 사용해 보았다. 아래 공식 매뉴얼에 있는 내용으로는 현재 베타이고 VS Code, Cursor, Windsurf, Claude Code에서 사용이 가능하다. 각자 사용하는 IDE에 맞춰서 설정을 해주면 된다.

 

https://help.figma.com/hc/ko/articles/32132100833559-Dev-Mode-MCP-%EC%84%9C%EB%B2%84-%EC%95%88%EB%82%B4%EC%84%9C

Dev Mode MCP 서버 안내서

 

테스트

테스트는 예제로 만들어둔 디자인 시스템에서 작업한 토글 스위치로 테스트해 보았다. 주안점은 아래와 같다.

• Variants 설정이 정상적인 props로 정리되는지
• 스타일이 디자인과 동일하게 적용되는지
• 실제로 써먹을 수 있는 코드인지

아래 예제의 Variants를 정리하면 아래와 같다. 원래 disabled 상태도 있어야 하는데 깜빡 했던 건지 작업을 하지 않았다.

• isOn : true, false
• type: primary, danger, success, surface

토글 스위치를 MCP로 구현해보자

 

사용법은 간단한데 아래 이미지와 같이 컴포넌트 우클릭하고 Copy link to selection를 누르면 컴포넌트 경로를 가진 링크를 복사하게 된다. 이걸 프롬프트 입력칸에 붙여 넣고 입맛에 맞게 요청을 하면 된다.

컴포넌트에서 링크를 복사하면 된다

 

 

결과

일단 의도대로 결과물은 나왔는데 사이즈가 맞지 않는 문제가 있어서 직접 수정을 하긴 했다. 스타일 추가 수정, 프롬프트 2~3회 작성을 하고난 결과물과 코드는 아래와 같다. 그리고 컬러 즉 디자인 토큰은 미리 추가해 둔 상태이다.

결과물

"use client";

import React from "react";

interface SwitchProps {
  type?: "primary" | "danger" | "success" | "surface";
  checked: boolean;
  onChange?: (checked: boolean) => void;
  disabled?: boolean;
}

const typeMap = {
  primary: {
    on: "bg-primary-500",
    off: "bg-primary-100",
  },
  danger: {
    on: "bg-danger-500",
    off: "bg-danger-100",
  },
  success: {
    on: "bg-success-500",
    off: "bg-success-100",
  },
  surface: {
    on: "bg-surface-800",
    off: "bg-surface-200",
  },
};

export default function Switch({
  type = "primary",
  checked,
  onChange,
  disabled = false,
}: SwitchProps) {
  const trackClass = `relative w-14 h-8 block overflow-clip rounded-full transition-colors duration-200 ${
    typeMap[type][checked ? "on" : "off"]
  } ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`;
  const thumbClass = `absolute top-0.5 w-7 h-7 bg-white rounded-full shadow-[0px_4px_6px_-1px_rgba(0,0,0,0.1),0px_2px_4px_-2px_rgba(0,0,0,0.1)] transition-all duration-200 ${
    checked ? "left-6.5" : "left-0.5"
  }`;

  return (
    <button
      type="button"
      className={trackClass}
      onClick={() => !disabled && onChange?.(!checked)}
      aria-checked={checked}
      role="switch"
      disabled={disabled}
    >
      <div className={thumbClass} />
    </button>
  );
}

 

props를 보면 타입, 상태, 클릭 이벤트로 정리를 잘해줬고 추가적으로 요청하진 않았는데 disabled 상태까지 알아서 해줬는데 이건 평소에 Cursor를 사용하면서 습관처럼 요청하던 거라 알아서 해줬을 가능성이 크다. 초기값 설정도 제대로 되어있고, 기본 스타일을 두 개로 구분해서 조건부 렌더링도 적절하게 해 주었다. 이 정도면 실무에서는 써먹을 수 있을 거 같다. 게다가 Figma 공식 MCP라 tool 관련은 계속 업데이트하면서 개선될 거라 생각한다.

 

활용법

개인적으로 프로덕트 디자이너도 컴포넌트 정도는 직접 코드로 작성하고 활용하는 건 기본 소양이 되지 않을까 생각한다. HTML/CSS, JS 기본만 아는 사람이 개발 관련 업무 범위를 컴포넌트 정도로만 한정한다면 실무에서도 도움이 될 거라 생각한다. 물론 디버깅이나 절대 개발은 손도 못 대는 사람은 하지 않는 게 좋겠지만