figma_integration
Figma design-to-code, design system extraction ve component generation rehberi.
>_
Quick Installnpxskills add vuralserhat86/antigravity-agentic-skills--skill figma_integrationInstructions
Loading…
Figma design-to-code, design system extraction ve component generation rehberi.
npxskills add vuralserhat86/antigravity-agentic-skills--skill figma_integrationLoading…
Figma design-to-code workflow rehberi.
: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;
}
| Figma | React Component |
|---|---|
| Frame | <div> |
| Auto Layout | Flexbox |
| Component | React Component |
| Instance | Component usage |
| Text | <p>, <h1>, etc. |
/* 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;
}
Figma Integration v1.1 - Enhanced
Kaynak: Figma for Developers
theme.ts veya tailwind.config'e ekle.Flex veya Grid olarak koda dök.| 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ı? |
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).