figma-to-generateblocks

Files (1)

• SKILL.md

SKILL.md (first lines)

# Figma to GenerateBlocks Converter

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

## Output Requirements

**ALWAYS output converted blocks to a file, never inline in the chat.**

- Output filename: `{design-name}.html` (e.g., `homepage-hero.html`, `pricing-section.html`)
- For complex designs: Split into multiple files by section
- Include a brief summary in chat describing what was created

**Why file output?**
- Block code is often 100+ lines
- Easier to copy/paste into WordPress
- Prevents truncation and formatting issues
- Allows iterative refinement of design implementation

## Input Types

This skill handles multiple Figma input formats:

| Input Type | How to Process |
|------------|----------------|
| **Screenshot/Image** | Analyze visual layout, colors, typography, spacing |
| **Figma URL** | Extract design tokens if Dev Mode access available |
| **Copied CSS** | Parse Figma's generated CSS values |
| **Design specs** | Use provided measurements and colors |
| **Verbal description** | Infer from user's description of the design |

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

| Figma Element | GenerateBlocks Block |
|---------------|---------------------|
| Frame/Section | `generateblocks/element` with `tagName: "section"` |
| Auto Layout (horizontal) | `generateblocks/element` with `display: flex` |
| Auto Layout (vertical) | `generateblocks/element` with `display: flex; flex-direction: column` |
| Grid | `generateblocks/element` with `display: grid` |
| Text | `generateblocks/text` with appropriate `tagName` |
| Image (simple) | `generateblocks/media` |
| Icon/Vector | `generateblocks/shape` with inline SVG |
| Button (text only) | `generateblocks/text` with `tagName: "a"` (no `htmlAttributes` for href) |
| Button (with icon) | `generateblocks/element` with `tagName: "a"` wrapping `text` + `shape` blocks |
| Card (clickable, has inner blocks) | `generateblocks/element` with `tagName: "a"` + `htmlAttributes` for href |
| Card (non-clickable) | `generateblocks/element` with `tagName: "div"` |
| Link (plain text) | `generateblocks/text` with `tagName: "a"` (no `htmlAttributes` for href) |

### Step 2b: When to Use Core Blocks

Some Figma elements should convert to WordPress Core Blocks instead:

| Figma Element | Use Core Block | Reason |
|---------------|----------------|--------|
| Image with caption | `core/image` | Built-in caption support |
| Image gallery/grid | `core/gallery` | Lightbox, columns, captions |
| Video player | `core/video` | Native video controls |
| Embedded video (YouTube/Vimeo) | `core/embed` | oEmbed support |
| Audio player | `core/audio` | Native audio controls |
| Data table | `core/table` | Semantic table structure |
| Quote with attribution | `core/quote` | Semantic blockquote |
| Code snippet | `core/code` | Preformatted code display |
| Bulleted/numbered list | `core/list` | Semantic list structure |
| Hero with background image | `core/cover` | Background image, overlay, parallax |
| Horizontal divider | `core/separator` | Semantic hr element |
| Download link/file | `core/file` | Download button with filename |
| **Text with emojis** | `core/paragraph` | GenerateBlocks doesn't render emojis properly |

**Conversion rule:** Use GenerateBlocks for custom layouts and styled containers. Use Core Blocks for content types with built-in functionality (media players, embeds, tables, etc.).

### Step 3: Generate Block Code

Use this structure for each block:

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

From wpgaurav/WordPress-skills, MIT.

More from wpgaurav/WordPress-skills