File contents 🎨 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 namesVariants : Figma variants = component propsTokens : Export design tokens as JSONComponents : Start from atoms → molecules → organisms
Figma Integration v1.1 - Enhanced
🔄 Workflow
Kaynak: Figma for Developers
Aşama 1: Inspection
Aşama 2: component Build
Aşama 3: Verification
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ı?
1 --- 2 name: figma-integration 3 description: 🎨 Figma Integration 4 --- 5 6 # 🎨 Figma Integration 7 8 > Figma design-to-code workflow rehberi. 9 10 --- 11 12 ## 📋 Design Token Extraction 13 14 ### Figma Variables → CSS 15 ```css 16 :root { 17 /* Colors from Figma */ 18 --color-primary: #3b82f6; 19 --color-secondary: #10b981; 20 21 /* Spacing from Figma */ 22 --spacing-sm: 8px; 23 --spacing-md: 16px; 24 --spacing-lg: 24px; 25 26 /* Typography */ 27 --font-size-sm: 14px; 28 --font-size-base: 16px; 29 } 30 ``` 31 32 --- 33 34 ## 🔧 Component Mapping 35 36 | Figma | React Component | 37 |-------|-----------------| 38 | Frame | `<div>` | 39 | Auto Layout | Flexbox | 40 | Component | React Component | 41 | Instance | Component usage | 42 | Text | `<p>`, `<h1>`, etc. | 43 44 --- 45 46 ## 📐 Layout Translation 47 48 ### Figma Auto Layout → CSS Flexbox 49 ```css 50 /* Horizontal, space-between, gap 16 */ 51 .container { 52 display: flex; 53 flex-direction: row; 54 justify-content: space-between; 55 gap: 16px; 56 } 57 58 /* Vertical, start, gap 8 */ 59 .stack { 60 display: flex; 61 flex-direction: column; 62 align-items: flex-start; 63 gap: 8px; 64 } 65 ``` 66 67 --- 68 69 ## 🎯 Best Practices 70 71 1. **Naming**: Figma layer names = component names 72 2. **Variants**: Figma variants = component props 73 3. **Tokens**: Export design tokens as JSON 74 4. **Components**: Start from atoms → molecules → organisms 75 76 --- 77 78 *Figma Integration v1.1 - Enhanced* 79 80 ## 🔄 Workflow 81 82 > **Kaynak:** [Figma for Developers](https://www.figma.com/best-practices/developer-handoff-guide/) 83 84 ### Aşama 1: Inspection 85 - [ ] **Dev Mode**: Figma Dev Mode'u aç ve CSS/iOS/Android kodunu incele. 86 - [ ] **Assets**: Görselleri SVG veya 2x/3x PNG olarak export et. 87 - [ ] **Variables**: Renk/Spacing token'larını `theme.ts` veya `tailwind.config`'e ekle. 88 89 ### Aşama 2: component Build 90 - [ ] **Structure**: Frame yapısını `Flex` veya `Grid` olarak koda dök. 91 - [ ] **Props**: Varyantları (Primary/Secondary) component prop'u yap. 92 - [ ] **Responsive**: Auto Layout constraint'lerine göre responsive davranışı kodla. 93 94 ### Aşama 3: Verification 95 - [ ] **Pixel Perfect**: Overlay ile tasarım ve kodu üst üste kontrol et. 96 - [ ] **States**: Hover, Focus, Active, Disabled durumlarını atlama. 97 98 ### Kontrol Noktaları 99 | Aşama | Doğrulama | 100 |-------|-----------| 101 | 1 | Tüm renkler hardcoded hex yerine variable mı? | 102 | 2 | Component Figma'daki gibi esniyor (resize) mu? | 103 | 3 | Yazı tipleri ve satır aralıkları birebir aynı mı? |
commit f1f5543d62
Frequently asked questions How do I install the Figma Integration skill? Run npx skillmds@latest add vuralserhat86/figma-integration in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
What does the Figma Integration skill do? 🎨 Figma Integration It is listed under Design & Media on SkillMD.
Is Figma Integration safe to use? This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
Which AI agents work with Figma Integration? This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Is Figma Integration free to use? Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
Who published Figma Integration? vuralserhat86 (@vuralserhat86) published this skill. Their other Agent Skills are listed on their SkillMD profile.
vuralserhat86