---

name: figma-to-generateblocks version: 1.0.0 description: Convert Figma designs to GenerateBlocks V2 format for WordPress author: Gaurav Tiwari updated: 2026-01-22 trigger:

• Figma to GenerateBlocks
• convert Figma
• Figma design to WordPress
• Figma to GB
• implement Figma design
• Figma screenshot
• design to blocks tags:
• wordpress
• generateblocks
• figma
• conversion
• design

---

Figma to GenerateBlocks Converter

Convert Figma designs to clean, semantic GenerateBlocks V2 blocks for WordPress.

Input Types

This skill handles multiple Figma input formats:

Conversion Workflow

Step 1: Analyze the Design

Extract these elements from the Figma design:

Layout Structure:

• Container hierarchy (sections, rows, columns)
• Grid/flex layout patterns
• Spacing between elements (gaps, padding, margins)
• Alignment (center, start, end, space-between)

Typography:

• Font families (map to web-safe or Google Fonts)
• Font sizes (convert to rem/clamp for responsiveness)
• Font weights (100-900)
• Line heights
• Letter spacing
• Text colors

Colors:

• Background colors
• Text colors
• Border colors
• Gradient definitions
• Opacity/transparency

Spacing:

• Padding values
• Margin values
• Gap between elements
• Section spacing

Visual Effects:

• Border radius
• Box shadows
• Hover states (infer from design variants)
• Transitions

Step 2: Map to GenerateBlocks

Step 3: Generate Block Code

Use this structure for each block:

Copy<!-- wp:generateblocks/{type} {"uniqueId":"{id}","tagName":"{tag}","styles":{...},"css":"..."} -->
<{tag} class="gb-{type} gb-{type}-{id}">
    {content}
</{tag}>
<!-- /wp:generateblocks/{type} -->

Figma CSS to GenerateBlocks

Typography Conversion

Figma CSS:

Copyfont-family: Inter;
font-size: 48px;
font-weight: 700;
line-height: 120%;
letter-spacing: -0.02em;

GenerateBlocks:

Copy{
  "styles": {
    "fontFamily": "'Inter', sans-serif",
    "fontSize": "clamp(2rem, 5vw, 3rem)",
    "fontWeight": "700",
    "lineHeight": "1.2",
    "letterSpacing": "-0.02em"
  },
  "css": ".gb-text-head001{font-family:'Inter', sans-serif;font-size:clamp(2rem, 5vw, 3rem);font-weight:700;line-height:1.2;letter-spacing:-0.02em}"
}

Auto Layout to Flexbox

Figma Auto Layout:

• Direction: Horizontal
• Gap: 24px
• Padding: 32px
• Align: Center

GenerateBlocks:

Copy{
  "styles": {
    "display": "flex",
    "flexDirection": "row",
    "gap": "1.5rem",
    "padding": "2rem",
    "alignItems": "center"
  },
  "css": ".gb-element-row001{display:flex;flex-direction:row;gap:1.5rem;padding:2rem;align-items:center}"
}

Grid Layout

Figma Grid (3 columns, 24px gap):

GenerateBlocks:

Copy{
  "styles": {
    "display": "grid",
    "gridTemplateColumns": "repeat(3, 1fr)",
    "gap": "1.5rem"
  },
  "css": ".gb-element-grid001{display:grid;grid-template-columns:repeat(3, 1fr);gap:1.5rem}@media(max-width:1024px){.gb-element-grid001{grid-template-columns:repeat(2, 1fr)}}@media(max-width:768px){.gb-element-grid001{grid-template-columns:1fr}}"
}

Shadow Conversion

Figma Shadow:

• X: 0, Y: 20px
• Blur: 60px
• Color: rgba(0, 0, 0, 0.15)

GenerateBlocks:

Copy{
  "styles": {
    "boxShadow": "0 20px 60px rgba(0,0,0,0.15)"
  },
  "css": ".gb-element-card001{box-shadow:0 20px 60px rgba(0,0,0,0.15)}"
}

Border Radius

Figma: Corner radius: 16px

GenerateBlocks:

Copy{
  "styles": {
    "borderRadius": "1rem"
  },
  "css": ".gb-element-card001{border-radius:1rem}"
}

Responsive Conversion

Figma designs are typically at desktop width. Add responsive breakpoints:

Breakpoint Strategy

Font Size Scaling

Convert fixed Figma sizes to fluid typography:

Spacing Scaling

Common Figma Patterns

Hero Section

Figma structure:

CopyFrame (Hero)
├── Frame (Content)
│   ├── Text (Tagline)
│   ├── Text (Headline)
│   ├── Text (Description)
│   └── Frame (Buttons)
│       ├── Button (Primary)
│       └── Button (Secondary)
└── Image (Hero Image)

GenerateBlocks:

Copy<!-- wp:generateblocks/element {"uniqueId":"hero001","tagName":"section","styles":{"paddingTop":"4rem","paddingBottom":"4rem"},"css":".gb-element-hero001{padding-top:4rem;padding-bottom:4rem}@media(max-width:768px){.gb-element-hero001{padding-top:2rem;padding-bottom:2rem}}"} -->
<section class="gb-element gb-element-hero001">
    <!-- wp:generateblocks/element {"uniqueId":"hero002","tagName":"div","styles":{"maxWidth":"1200px","marginLeft":"auto","marginRight":"auto","paddingLeft":"1rem","paddingRight":"1rem","display":"grid","gridTemplateColumns":"1fr 1fr","gap":"3rem","alignItems":"center"},"css":".gb-element-hero002{max-width:1200px;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}@media(max-width:768px){.gb-element-hero002{grid-template-columns:1fr;text-align:center}}"} -->
    <div class="gb-element gb-element-hero002">
        <!-- wp:generateblocks/element {"uniqueId":"hero003","tagName":"div","styles":{"display":"flex","flexDirection":"column","gap":"1.5rem"},"css":".gb-element-hero003{display:flex;flex-direction:column;gap:1.5rem}"} -->
        <div class="gb-element gb-element-hero003">
            <!-- Tagline, Headline, Description, Buttons -->
        </div>
        <!-- /wp:generateblocks/element -->
        <!-- wp:generateblocks/media ... -->
    </div>
    <!-- /wp:generateblocks/element -->
</section>
<!-- /wp:generateblocks/element -->

Card Component

Figma structure:

CopyFrame (Card)
├── Image
├── Frame (Content)
│   ├── Text (Title)
│   ├── Text (Description)
│   └── Link (Read more)

GenerateBlocks (clickable card):

Copy<!-- wp:generateblocks/text {"uniqueId":"card001","tagName":"a","htmlAttributes":{"href":"/link/"},"styles":{"display":"flex","flexDirection":"column","backgroundColor":"white","borderRadius":"1rem","overflow":"hidden","textDecoration":"none","border":"1px solid #e5e5e5"},"css":".gb-text-card001{display:flex;flex-direction:column;background-color:white;border-radius:1rem;overflow:hidden;text-decoration:none;border:1px solid #e5e5e5;transition:all 0.3s}.gb-text-card001:hover{transform:translateY(-6px);box-shadow:0 20px 60px rgba(0,0,0,0.15);border-color:transparent}"} -->
<a class="gb-text gb-text-card001" href="/link/">
    <!-- wp:generateblocks/media {"uniqueId":"card002","mediaType":"image","htmlAttributes":{"src":"image.jpg","alt":"Card image"},"styles":{"width":"100%","aspectRatio":"16/9","objectFit":"cover"},"css":".gb-media-card002{width:100%;aspect-ratio:16/9;object-fit:cover}"} -->
    <img class="gb-media gb-media-card002" src="image.jpg" alt="Card image" />
    <!-- /wp:generateblocks/media -->
    <!-- wp:generateblocks/element {"uniqueId":"card003","tagName":"div","styles":{"padding":"1.5rem","display":"flex","flexDirection":"column","gap":"0.75rem"},"css":".gb-element-card003{padding:1.5rem;display:flex;flex-direction:column;gap:0.75rem}"} -->
    <div class="gb-element gb-element-card003">
        <!-- Title, Description -->
    </div>
    <!-- /wp:generateblocks/element -->
</a>
<!-- /wp:generateblocks/text -->

Navigation Bar

Figma structure:

CopyFrame (Nav)
├── Logo
├── Frame (Links)
│   ├── Link
│   ├── Link
│   └── Link
└── Button (CTA)

GenerateBlocks:

Copy<!-- wp:generateblocks/element {"uniqueId":"nav001","tagName":"header","styles":{"display":"flex","justifyContent":"space-between","alignItems":"center","padding":"1rem 0"},"css":".gb-element-nav001{display:flex;justify-content:space-between;align-items:center;padding:1rem 0}"} -->
<header class="gb-element gb-element-nav001">
    <!-- Logo -->
    <!-- wp:generateblocks/element {"uniqueId":"nav002","tagName":"nav","styles":{"display":"flex","gap":"2rem"},"css":".gb-element-nav002{display:flex;gap:2rem}@media(max-width:768px){.gb-element-nav002{display:none}}"} -->
    <nav class="gb-element gb-element-nav002">
        <!-- Navigation links -->
    </nav>
    <!-- /wp:generateblocks/element -->
    <!-- CTA Button -->
</header>
<!-- /wp:generateblocks/element -->

Color Extraction

From Figma Dev Mode

If you have access to Figma Dev Mode, extract:

• Color variables/tokens
• Exact hex/rgba values
• Gradient definitions

From Screenshot

When analyzing a screenshot:

1. Identify primary brand color (usually buttons, links, accents)
2. Identify text colors (dark for body, lighter for secondary)
3. Identify background colors (white, off-white, dark sections)
4. Note any gradients or overlays

Default Fallbacks

When colors aren't clear, use these sensible defaults:

Light theme:

• Primary: #c0392b or #0073e6
• Text: #0a0a0a
• Muted: #5c5c5c
• Background: #ffffff
• Light background: #f5f5f3
• Border: #e5e5e5

Dark theme:

• Primary: #e74c3c or #3498db
• Text: #ffffff
• Muted: #a0a0a0
• Background: #0a0a0a
• Card background: #1a1a1a
• Border: #333333

Hover States

Figma designs often show only the default state. Add these hover effects:

Buttons

Copy.gb-text-btn001:hover{background-color:#a33024;transform:translateY(-2px);box-shadow:0 4px 12px rgba(192,57,43,0.3)}

Cards

Copy.gb-text-card001:hover{transform:translateY(-6px);box-shadow:0 20px 60px rgba(0,0,0,0.15);border-color:transparent}

Links

Copy.gb-text-link001:hover{color:#c0392b;text-decoration:underline}

Icons

Copy.parent:hover .gb-element-icon001{background-color:#c0392b;color:white;transform:scale(1.05)}

Critical Rules

1. No HTML Comments

Only WordPress block comments allowed:

Copy<!-- wp:generateblocks/element ... -->
<!-- /wp:generateblocks/element -->

2. Both styles AND css Required

Always include both attributes:

Copy{
  "styles": {"padding": "2rem"},
  "css": ".gb-element-id{padding:2rem}"
}

3. Minified CSS

No line breaks in css attribute:

Copy.gb-element-id{padding:2rem;background:#fff}.gb-element-id:hover{background:#f5f5f5}

4. Unique IDs

Format: {section}{number}{letter}

• hero001, hero001a, hero001b
• card023, card023a

5. Always Add Transitions

For interactive elements:

Copytransition:all 0.3s

6. Test Responsive

Always add media queries for:

• Tablet: @media(max-width:1024px)
• Mobile: @media(max-width:768px)

Image Handling

Placeholder Images

When Figma shows placeholder images, use:

Copy{
  "htmlAttributes": {
    "src": "https://placehold.co/800x600/f5f5f3/5c5c5c?text=Image",
    "alt": "Descriptive alt text",
    "width": "800",
    "height": "600",
    "loading": "lazy"
  }
}

Aspect Ratios

Common Figma image ratios:

Output Format

When converting, provide:

1. Complete block code - Ready to paste into WordPress
2. Section-by-section - For complex designs, break into chunks
3. Mobile considerations - Note any responsive adjustments made
4. Image placeholders - Indicate where user should replace images
5. Content placeholders - Mark text that needs customization