Figma UI를 코드로 자동화 (with. Windsurf)

1. 시작하며

개발에서 사용하는 IDE 로 어떤 서비스를 사용하고 계신가요?

저는 주로 WebStorm을 사용하고, 보조 도구로 Windsurf도 함께 활용해 왔는데요. 최근 Windsurf가 WebStorm 플러그인으로 제공되면서, WebStorm의 사용 빈도가 더욱 높아졌습니다.

프론트엔드 개발을 하다 보니 필수적으로 Figma를 사용하게 됩니다. 디자이너가 Figma로 작업한 결과물을 개발에 반영하거나, 때로는 제가 직접 Figma에서 디자인 작업을 하기도 합니다.

최근에는 클로드, Cursor AI를 활용해 Figma 워크스페이스에서 디자인된 UI를 React 컴포넌트 코드로 변환하거나, 반대로 명령어로 Figma에 디자인 하는 일이 가능하게 되었습니다. Windsurf 도 MCP 서버를 연동할 수 있도록 제공하고 있기에, Figma 와 관련된 MCP 서버를 연동해 보았습니다. 깃헙에 연동 과정이 설명되어 있으므로 쉽게 연동할 수 있었습니다.

🧑🏽‍💻 개발환경

macOS 를 사용하고 있고, windsurf pro 를 사용 중입니다.
windsurf 에서는 pro 사용자부터 mcp 서버를 사용할 수 있습니다.
현재 시점에서 Webstorm 의 Windsurf 플러그인에서는 mcp 서버를 제공하고 있지 않습니다.

2. Figma와 코드 통합을 위한 MCP 서버

- 디자인된 UI 를 코드로 구현 Figma-Context-MCP

a. mcp 서버 셋팅

mcp_config.json 파일에 접근하여 다음과 같이 mcp 서버를 셋팅합니다. mcp_config.json 파일은 windsurf ide 의 cascade 를 보시면 configure 라는 텍스트를 클릭하여 이동할 수 있습니다.

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=여기에 FIGMA API 키를 넣어주세요.",
        "--stdio"
      ]
    },
  }
}

b. figma api token 발급

자신의 프로필 클릭
settings > security tab > generate new token
토큰을 발급받은 뒤 위의 json 파일에 FIGMA API 키를 입력합니다.

c. windsurf MCP Server refresh

mcp 서버 연동이 잘 되었다면, available MCP servers 에서 Framelink Figma MCP 왼쪽 녹색 램프가 켜지게 됩니다.

🚨 만약, 연동이 잘되지 않는다면 작동중인 IDE 를 모두 종료한 후 재시작 합니다.

d. mcp 서버를 사용하여 디자인을 코드로 구현

1) figma UI 요소 클릭 > 우클릭
2) Copy/Paste as > Copy link to selection

선택된 요소의 링크를 복사하고,
IDE 의 Cascade 로 돌아가서
링크와 함께 명령어를 입력하면 MCP 서버를 통하여 Figma UI 를 코드로 구현할 수 있습니다.

- 구현된 Tabs 컴포넌트

"use client";
import React, { useState, ReactNode } from "react";

export interface TabItem {
  label: string;
  content: ReactNode;
}

interface TabsProps {
  items: TabItem[];
  initialIndex?: number;
  className?: string;
}

/**
 * Interactive Tabs 컴포넌트 (공통 위젯)
 * Figma 디자인을 참고하여 구현됨
 */
const Tabs: React.FC<TabsProps> = ({ items, initialIndex = 0, className }) => {
  const [activeIndex, setActiveIndex] = useState(initialIndex);

  return (
    <div className={`w-full ${className ?? ""}`}>
      <div className="flex border-b border-gray-200">
        {items.map((item, idx) => (
          <button
            key={item.label}
            className={`px-4 py-2 font-medium text-sm transition-colors focus:outline-none border-b-2  ${
              activeIndex === idx
                ? "border-blue-500 text-blue-600 bg-white"
                : "border-transparent text-gray-500 hover:text-blue-500 hover:bg-gray-50"
            }`}
            onClick={() => setActiveIndex(idx)}
            type="button"
            aria-selected={activeIndex === idx}
            role="tab"
          >
            {item.label}
          </button>
        ))}
      </div>
      <div className="py-4" role="tabpanel">
        {items[activeIndex]?.content}
      </div>
    </div>
  );
};

export default Tabs;

3. 사용후기

• Figma Design
  
• 코드로 구현된 UI
  

Framelink mcp server 활용하여 피그마 디자인을 리액트 컴포넌트로 구현하는 과정을 살펴보았습니다. 디자인과 구현된 UI 를 비교하면 차이가 크다는걸 알 수 있는데요. Tab 형태라는 걸 제외하면 완전히 다른 UI 라고 생각됩니다. 구체적이고 명확한 명령어를 입력하면 차이를 조금 줄일 수 는 것 같습니다.

다음 글에서는 IDE에서 명령어로 피그마의 디자인 요소를 생성, 변경하는 Talk To Figma mcp server 에 대해서 살펴보겠습니다.