샘플

03. 샘플 — Framelink MCP

샘플 1: URL 기반 컴포넌트 변환

프롬프트

다음 Figma 디자인을 React + Tailwind 컴포넌트로 만들어줘.
파일은 src/components/PricingCard.tsx로 저장.

<https://www.figma.com/design/abcXYZ/Design-System?node-id=42-128>
Plain Text
복사

MCP 호출

get_figma_data(
  fileKey="abcXYZ",
  nodeId="42:128",
  depth=4
)
Plain Text
복사

반환 예시 (요약)

{
  "name": "PricingCard",
  "type": "FRAME",
  "layout": { "direction": "column", "padding": 24, "gap": 16 },
  "fills": [{ "color": "#FFFFFF" }],
  "cornerRadius": 12,
  "children": [
    { "type": "TEXT", "text": "Pro", "fontSize": 18, "fontWeight": 700 },
    { "type": "TEXT", "text": "$29/mo", "fontSize": 32, "fontWeight": 800 },
    ...
  ]
}
JSON
복사

결과 코드

type PricingCardProps = {
  plan: string
  price: string
  features: string[]
}

export function PricingCard({ plan, price, features }: PricingCardProps) {
  return (
    <div className="flex flex-col gap-4 rounded-xl bg-white p-6 shadow-md">
      <p className="text-lg font-bold text-gray-900">{plan}</p>
      <p className="text-3xl font-extrabold text-gray-900">{price}</p>
      <ul className="flex flex-col gap-2">
        {features.map(f => <li key={f} className="text-sm text-gray-600">{f}</li>)}
      </ul>
    </div>
  )
}
TypeScript
복사

샘플 2: 이미지/아이콘 다운로드

프롬프트

다음 Figma 노드의 아이콘들을 SVG로 src/assets/icons에 저장해줘.
<https://www.figma.com/design/abcXYZ/Icons?node-id=10-1>
Plain Text
복사

MCP 호출

download_figma_images(
  fileKey="abcXYZ",
  nodes=[
    { nodeId: "10:1", fileName: "search.svg" },
    { nodeId: "10:2", fileName: "user.svg" },
    ...
  ],
  localPath: "src/assets/icons"
)
Plain Text
복사

결과

•

src/assets/icons/search.svg

•

src/assets/icons/user.svg

•

...

샘플 3: 페이지 레이아웃 분석

프롬프트

이 Figma 페이지의 레이아웃 구조를 분석하고,
Next.js App Router 폴더 구조를 제안해줘. 코드는 만들지 말고 구조만.

<https://www.figma.com/design/abcXYZ/Web?node-id=1-2>
Plain Text
복사

결과 (예)

app/
├── layout.tsx          # Header + Sidebar (모든 페이지 공통)
├── page.tsx            # 랜딩
├── dashboard/
│   ├── page.tsx        # 메인 대시보드
│   └── [id]/page.tsx   # 상세
└── settings/
    └── page.tsx
Plain Text
복사

샘플 4: 디자인 시스템 토큰 추출

프롬프트

다음 Figma 파일의 색상/타이포 시스템을 분석해서
Tailwind config의 theme.extend 형태로 만들어줘.

<https://www.figma.com/design/abcXYZ/Tokens>
Plain Text
복사

결과

export default {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#EFF6FF',
          500: '#2563EB',
          900: '#1E3A8A',
        },
      },
      fontSize: {
        h1: ['32px', { lineHeight: '40px', fontWeight: '700' }],
        body: ['14px', { lineHeight: '20px' }],
      },
    },
  },
}
JavaScript
복사

샘플 5: 디자인 검토 요청

프롬프트

이 Figma 디자인이 접근성(WCAG AA) 관점에서 문제가 될 만한 부분을 찾아줘.
대비, 폰트 크기, 터치 타겟 크기 위주로.

<https://www.figma.com/design/abcXYZ/Mobile?node-id=5-10>
Plain Text
복사

활용

•

MCP가 노드 트리에서 색상/폰트 크기/노드 크기 추출

•

LLM이 WCAG 기준에 비추어 위반 항목 보고

지금과일

생성

#figma-developer-mcp 
https://www.figma.com/design/hdNt0fB7dYvAZEAwLbW2GG/%EC%A0%9C%EB%AA%A9-%EC%97%86%EC%9D%8C?node-id=1-2&t=TeMJyK8XD9niZx91-11

E:\ALOHA-CLASS\FIGMA-MCP\02.Figma 
MCP\02.Framelink MCP\Sample\지금과일


이 경로에 index.html css/style.css js/script.js 
생성해서 코드 생성해줘
Markdown
복사

보정

<!-- 좌측: 로그인 + 회원가입 섹션 -->
<!-- 우측: 빠른 메뉴 -->

좌측 우측이 아니라
상단 하단으로 수정해주고

상단에는 왼쪽 로그인 오른쪽 회원가입 섹션이야
Markdown
복사