Figma Integration

name: figma_integration router_kit: FullStackKit description: Figma design-to-code, design system extraction ve component generation rehberi. metadata: skillport: category: design tags: [architecture, automation, best practices, clean code, coding, collaboration, compliance, debugging, design patterns, development, documentation, efficiency, figma integration, git, optimization, productivity, programming, project management, quality assurance, refactoring, software engineering, standards, testing, utilities, version control, workflow] - design-system

🎨 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

📐 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

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

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ı