실습

cd E:/실습폴더 npm create vite@latest figma-mcp-practice -- --template react-ts cd figma-mcp-practice npm install npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p

export default { content: ['./index.html', './src/**/*.{ts,tsx}'], theme: { extend: {} }, plugins: [], }

@tailwind base; @tailwind components; @tailwind utilities;

선택된 컴포넌트가 사용하는 모든 색상/간격 Variable을 src/design-system/tokens.ts 로 추출해줘. 그리고 Card.tsx 가 hex 대신 토큰을 import해서 쓰도록 리팩토링해줘.

import { Card } from './components/Card' export default function App() { return ( <div className="p-8"> <Card title="Hello" description="Figma MCP 실습" /> </div> ) }

npm run dev