Figma to Gutenberg Blocks Converter

A comprehensive Figma plugin that converts your Figma designs directly into WordPress Gutenberg blocks with PHP and CSS code.

🎯 Overview

This project includes:

• Figma Plugin: Convert Figma designs to Gutenberg blocks
• WordPress Plugin Template: Ready-to-use WordPress plugin structure
• Documentation Site: 11ty + Tailwind CSS static site (optional)

🚀 Quick Start

1. Install Dependencies

npm install

2. Build the Figma Plugin

npm run build:plugin-once

3. Load Plugin in Figma

1. Open Figma Desktop App
2. Go to Plugins → Development → Import plugin from manifest...
3. Select manifest.json from this directory
4. The plugin is now available in your Plugins menu

📦 Project Structure

├── manifest.json              # Figma plugin manifest
├── code.ts                    # Main plugin logic (TypeScript)
├── code.js                    # Compiled plugin code (generated)
├── ui.html                    # Plugin user interface
├── tsconfig.json             # TypeScript configuration
├── FIGMA_PLUGIN_README.md    # Detailed plugin documentation
├── wordpress-plugin-template/ # WordPress plugin template
│   ├── figma-blocks.php      # Main plugin file
│   ├── style.css             # Frontend styles
│   └── editor.css            # Editor styles
└── src/                      # Static site (optional)

🎨 Using the Figma Plugin

Step 1: Design in Figma

• Use Frames for containers/sections
• Use Text layers for headings and paragraphs
• Use Auto Layout for flex containers
• Name layers descriptively (they become CSS classes)

Step 2: Convert to Blocks

1. Select elements in Figma
2. Open plugin: Plugins → Figma to Gutenberg Blocks
3. Click "Convert to Blocks"
4. Copy the generated code

Step 3: Use in WordPress

1. Copy the generated PHP code
2. Paste into wordpress-plugin-template/figma-blocks.php
3. Copy the CSS to style.css
4. Upload to WordPress wp-content/plugins/
5. Activate the plugin

✨ Features

Smart Conversion

• Converts Frames, Groups, Components → Group blocks
• Converts Text layers → Heading or Paragraph blocks
• Extracts all styling (colors, typography, spacing)
• Preserves layout properties (Flexbox/Auto Layout)

Style Extraction

• ✅ Colors and opacity
• ✅ Typography (font family, size, weight, line-height)
• ✅ Borders and border radius
• ✅ Shadows and effects
• ✅ Padding and spacing
• ✅ Flexbox layouts

Output Formats

• PHP Code: WordPress block registration
• JSON Structure: Block data structure
• CSS Styles: Extracted styles

🛠️ Development

Build Commands

# Build Figma plugin once
npm run build:plugin-once

# Build plugin in watch mode (auto-recompile)
npm run build:plugin

# Build static site (optional)
npm run build

# Run static site dev server (optional)
npm run dev

Plugin Development

1. Make changes to code.ts
2. Run npm run build:plugin (watch mode)
3. Reload plugin in Figma: Plugins → Development → Reload

📖 Documentation

For detailed documentation, see:

• FIGMA_PLUGIN_README.md - Complete plugin guide
• wordpress-plugin-template/README.md - WordPress integration

🎯 Supported Figma Features

✅ Fully Supported

• Frames and Auto Layout
• Text layers with styling
• Groups and Components
• Solid fills and strokes
• Drop shadows
• Border radius
• Opacity
• Padding and spacing

⚠️ Partially Supported

• Gradients (first color used)
• Multiple fills (first fill used)
• Effects (drop shadows only)

❌ Not Yet Supported

• Images (coming soon)
• Blend modes
• Advanced vector shapes
• Masks
• Boolean operations

🔧 Troubleshooting

Plugin doesn't appear

• Use Figma Desktop (not browser)
• Run npm run build:plugin-once
• Verify code.js exists

Conversion fails

• Ensure elements are selected
• Check console for errors
• Some complex nodes may not be supported

Styles not matching

• Use solid fills (not gradients)
• Check supported features list
• Complex styles may need manual adjustment

📝 Best Practices

Naming

• Use descriptive layer names
• Names become CSS classes
• Use kebab-case for best results

Layout

• Use Auto Layout for containers
• Set proper alignment and spacing
• Use padding on frames

Typography

• Font sizes determine heading levels:
  • 32px+ → H1
  • 24px+ → H2
  • 20px+ → H3
  • Below 20px → Paragraph

🤝 Contributing

Contributions are welcome! Feel free to:

• Report bugs
• Suggest features
• Submit pull requests

📄 License

MIT License - free to use in your projects!

🌟 Credits

Built with:

• TypeScript
• Figma Plugin API
• WordPress Gutenberg Block API
• 11ty + Tailwind CSS (for documentation site)