From adlc-react-frontend
Design token extraction from Figma and mapping to Tailwind CSS classes for React components.
npx claudepluginhub sumanpapanaboina1983/adlc-accelerator-kit-pluginsThis skill uses the workspace's default tool permissions.
```
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Guides MCP server integration in Claude Code plugins via .mcp.json or plugin.json configs for stdio, SSE, HTTP types, enabling external services as tools.
1. Get file structure:
Call: mcp__figma__get_file with file_key
Returns: Document structure with pages and frames
2. Get specific component:
Call: mcp__figma__get_node with file_key and node_id
Returns: Component details with styles
3. Extract from response:
- Colors (fills)
- Typography (fontSize, fontFamily, fontWeight)
- Spacing (padding, margin from auto-layout)
- Border radius
- Effects (shadows)
| Figma Color | Tailwind Class |
|---|---|
#3B82F6 (Blue 500) | bg-blue-500, text-blue-500 |
#EF4444 (Red 500) | bg-red-500, text-red-500 |
#10B981 (Green 500) | bg-green-500, text-green-500 |
#F3F4F6 (Gray 100) | bg-gray-100 |
#1F2937 (Gray 800) | text-gray-800 |
#FFFFFF | bg-white, text-white |
rgba(0,0,0,0.5) | bg-black/50 |
// Figma color values → Tailwind
const colorMap: Record<string, string> = {
// Blues
'#EFF6FF': 'blue-50',
'#DBEAFE': 'blue-100',
'#BFDBFE': 'blue-200',
'#93C5FD': 'blue-300',
'#60A5FA': 'blue-400',
'#3B82F6': 'blue-500',
'#2563EB': 'blue-600',
'#1D4ED8': 'blue-700',
// Grays
'#F9FAFB': 'gray-50',
'#F3F4F6': 'gray-100',
'#E5E7EB': 'gray-200',
'#D1D5DB': 'gray-300',
'#9CA3AF': 'gray-400',
'#6B7280': 'gray-500',
'#4B5563': 'gray-600',
'#374151': 'gray-700',
'#1F2937': 'gray-800',
'#111827': 'gray-900',
};
| Figma Property | Tailwind Class |
|---|---|
| fontSize: 12 | text-xs |
| fontSize: 14 | text-sm |
| fontSize: 16 | text-base |
| fontSize: 18 | text-lg |
| fontSize: 20 | text-xl |
| fontSize: 24 | text-2xl |
| fontSize: 30 | text-3xl |
| fontSize: 36 | text-4xl |
| fontWeight: 400 | font-normal |
| fontWeight: 500 | font-medium |
| fontWeight: 600 | font-semibold |
| fontWeight: 700 | font-bold |
| lineHeight: 1.25 | leading-tight |
| lineHeight: 1.5 | leading-normal |
| lineHeight: 1.75 | leading-relaxed |
| Figma Spacing (px) | Tailwind Class |
|---|---|
| 4 | p-1, m-1, gap-1 |
| 8 | p-2, m-2, gap-2 |
| 12 | p-3, m-3, gap-3 |
| 16 | p-4, m-4, gap-4 |
| 20 | p-5, m-5, gap-5 |
| 24 | p-6, m-6, gap-6 |
| 32 | p-8, m-8, gap-8 |
| 40 | p-10, m-10, gap-10 |
| 48 | p-12, m-12, gap-12 |
| 64 | p-16, m-16, gap-16 |
| Figma Radius (px) | Tailwind Class |
|---|---|
| 2 | rounded-sm |
| 4 | rounded |
| 6 | rounded-md |
| 8 | rounded-lg |
| 12 | rounded-xl |
| 16 | rounded-2xl |
| 24 | rounded-3xl |
| 9999 | rounded-full |
| Figma Shadow | Tailwind Class |
|---|---|
| 0 1px 2px rgba(0,0,0,0.05) | shadow-sm |
| 0 1px 3px rgba(0,0,0,0.1) | shadow |
| 0 4px 6px rgba(0,0,0,0.1) | shadow-md |
| 0 10px 15px rgba(0,0,0,0.1) | shadow-lg |
| 0 20px 25px rgba(0,0,0,0.1) | shadow-xl |
| 0 25px 50px rgba(0,0,0,0.25) | shadow-2xl |
Figma: Auto-layout horizontal, gap: 16, padding: 24
<div className="flex gap-4 p-6">
{/* children */}
</div>
Figma: Auto-layout vertical, gap: 8, padding: 16 24
<div className="flex flex-col gap-2 px-6 py-4">
{/* children */}
</div>
| Figma Alignment | Tailwind Classes |
|---|---|
| Top Left | items-start justify-start |
| Top Center | items-start justify-center |
| Top Right | items-start justify-end |
| Center Left | items-center justify-start |
| Center | items-center justify-center |
| Center Right | items-center justify-end |
| Bottom Left | items-end justify-start |
| Bottom Center | items-end justify-center |
| Bottom Right | items-end justify-end |
| Space Between | justify-between |
Figma: Fill container (width)
<div className="w-full">
{/* fills parent width */}
</div>
Figma Design:
- Auto-layout: horizontal
- Padding: 12px 24px
- Gap: 8px
- Background: #3B82F6
- Border radius: 8px
- Text: 16px, semibold, white
- Hover: #2563EB
React Component:
interface ButtonProps {
children: React.ReactNode;
onClick?: () => void;
}
export default function Button({ children, onClick }: ButtonProps) {
return (
<button
onClick={onClick}
className="flex items-center gap-2 px-6 py-3 bg-blue-500 hover:bg-blue-600 rounded-lg text-base font-semibold text-white transition-colors"
>
{children}
</button>
);
}
Figma Design:
- Auto-layout: vertical
- Padding: 24px
- Gap: 16px
- Background: white
- Border radius: 12px
- Shadow: 0 4px 6px rgba(0,0,0,0.1)
React Component:
interface CardProps {
children: React.ReactNode;
}
export default function Card({ children }: CardProps) {
return (
<div className="flex flex-col gap-4 p-6 bg-white rounded-xl shadow-md">
{children}
</div>
);
}
Figma Design:
- Width: fill container
- Height: 48px
- Padding: 12px 16px
- Background: #F9FAFB
- Border: 1px solid #E5E7EB
- Border radius: 8px
- Focus border: #3B82F6
- Text: 16px, gray-900
- Placeholder: gray-400
React Component:
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
label?: string;
error?: string;
}
export default function Input({ label, error, ...props }: InputProps) {
return (
<div className="w-full">
{label && (
<label className="block mb-2 text-sm font-medium text-gray-700">
{label}
</label>
)}
<input
className="w-full h-12 px-4 py-3 bg-gray-50 border border-gray-200 rounded-lg text-base text-gray-900 placeholder:text-gray-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 outline-none transition-colors"
{...props}
/>
{error && (
<p className="mt-1 text-sm text-red-500">{error}</p>
)}
</div>
);
}
| Figma Frame | Tailwind Prefix |
|---|---|
| Mobile (375px) | Default (no prefix) |
| Tablet (768px) | md: |
| Desktop (1280px) | lg: |
| Large (1536px) | xl: |
// Mobile-first responsive design
<div className="
flex flex-col gap-4 p-4
md:flex-row md:gap-6 md:p-6
lg:gap-8 lg:p-8
">
<aside className="w-full md:w-64 lg:w-80">
{/* Sidebar */}
</aside>
<main className="flex-1">
{/* Main content */}
</main>
</div>
IMPORTANT: Always read design values from Figma. Never assume:
If Figma MCP is not available, ask the developer for: