# Figma Integration

> 🎨 Figma Integration

- Skill: `vuralserhat86/figma-integration` (Agent Skill)
- Install (CLI): `npx skillmds@latest add vuralserhat86/figma-integration`
- Raw SKILL.md: https://api.skillmd.com/api/skills/vuralserhat86/figma-integration/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: vuralserhat86 (https://skillmd.com/u/vuralserhat86)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/vuralserhat86/figma-integration

---


# 🎨 Figma Integration

> Figma design-to-code workflow rehberi.

---

## 📋 Design Token Extraction

### Figma Variables → CSS
```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
```css
/* 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

1. **Naming**: Figma layer names = component names
2. **Variants**: Figma variants = component props
3. **Tokens**: Export design tokens as JSON
4. **Components**: Start from atoms → molecules → organisms

---

*Figma Integration v1.1 - Enhanced*

## 🔄 Workflow

> **Kaynak:** [Figma for Developers](https://www.figma.com/best-practices/developer-handoff-guide/)

### 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ı? |