🎨 Figma Integration Skill

🎨 Figma Integration

Figma design-to-code workflow rehberi.

📋 Design Token Extraction

Figma Variables → CSS

:root {
  /* Colors from Figma */
  --color-primary: #3b82f6;
  --color-secondary: #10b981;
  
  /* Spacing from Figma */
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  
  /* Typography */
  --font-size-sm: 14px;
  --font-size-base: 16px;
}

🔧 Component Mapping

| Figma | React Component | |-------|-----------------| | Frame | <div> | | Auto Layout | Flexbox | | Component | React Component | | Instance | Component usage | | Text | <p>, <h1>, etc. |

📐 Layout Translation

Figma Auto Layout → CSS Flexbox

/* Horizontal, space-between, gap 16 */
.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 16px;
}

/* Vertical, start, gap 8 */
.stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

🎯 Best Practices

Naming: Figma layer names = component names
Variants: Figma variants = component props
Tokens: Export design tokens as JSON
Components: Start from atoms → molecules → organisms

Figma Integration v1.1 - Enhanced

🔄 Workflow

Kaynak: Figma for Developers

Aşama 1: Inspection

[ ] Dev Mode: Figma Dev Mode'u aç ve CSS/iOS/Android kodunu incele.
[ ] Assets: Görselleri SVG veya 2x/3x PNG olarak export et.
[ ] Variables: Renk/Spacing token'larını theme.ts veya tailwind.config'e ekle.

Aşama 2: component Build

[ ] Structure: Frame yapısını Flex veya Grid olarak koda dök.
[ ] Props: Varyantları (Primary/Secondary) component prop'u yap.
[ ] Responsive: Auto Layout constraint'lerine göre responsive davranışı kodla.

Aşama 3: Verification

[ ] Pixel Perfect: Overlay ile tasarım ve kodu üst üste kontrol et.
[ ] States: Hover, Focus, Active, Disabled durumlarını atlama.

Kontrol Noktaları

| Aşama | Doğrulama | |-------|-----------| | 1 | Tüm renkler hardcoded hex yerine variable mı? | | 2 | Component Figma'daki gibi esniyor (resize) mu? | | 3 | Yazı tipleri ve satır aralıkları birebir aynı mı? |

Agent Skills: 🎨 Figma Integration

Install this agent skill to your local

Skill Files