Figma Subzero Plugin

Convert Figma components to React components using Subzero Design System and Material-UI (MUI).

Features

• Transform Figma elements to Subzero/MUI React components
• Preserve styles and component variants
• Support for basic components (Button, Typography, Box, Stack)
• Auto-mapping of Figma styles to MUI style props
• Hot reload support for development
• TypeScript support

Prerequisites

• Node.js – v20
• Figma desktop app

Installation

1. Clone this repository:

git clone https://github.com/yourusername/figma-subzero-plugin.git
cd figma-subzero-plugin

2. Install dependencies:

npm install

3. Build the plugin:

npm run build

4. In Figma desktop app:
   • Go to Plugins > Development > Import plugin from manifest
   • Select the manifest.json file from this project

Development

Quick Start

# Watch mode with hot reload
npm run watch

# Production build
npm run build

# Lint code
npm run lint

Debugging

• Use console.log statements for debugging
• Access developer console in Figma via Quick Actions: Show/Hide Console
• Check build output in build/ directory
• Monitor hot reload logs in terminal

Component Mapping

Current supported mappings:

• Figma Rectangle → MUI Box
• Figma Text → MUI Typography
• Figma Group → MUI Stack
• Figma Component Instance → MUI Button

Project Structure

figma-subzero-plugin/
├── src/
│   ├── main.ts         # Plugin main logic
│   ├── ui.tsx          # Plugin UI components
│   ├── types.ts        # TypeScript definitions
│   └── utils/          # Utility functions
├── build/              # Build output (gitignored)
├── manifest.json       # Plugin manifest
└── package.json        # Project dependencies

Contributing

1. Fork the repository
2. Create feature branch (git checkout -b feature/amazing-feature)
3. Commit changes (git commit -m 'feat: Add some amazing feature')
4. Push to branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Resources

• Create Figma Plugin docs
• Figma Plugin API docs
• Material-UI docs

License

MIT

Development guide

This plugin is built with Create Figma Plugin.

Pre-requisites

• Node.js – v20
• Figma desktop app

Build the plugin

To build the plugin:

$ npm run build

This will generate a manifest.json file and a build/ directory containing the JavaScript bundle(s) for the plugin.

To watch for code changes and rebuild the plugin automatically:

$ npm run watch

Install the plugin

1. In the Figma desktop app, open a Figma document.
2. Search for and run Import plugin from manifest… via the Quick Actions search bar.
3. Select the manifest.json file that was generated by the build script.

Debugging

Use console.log statements to inspect values in your code.

To open the developer console, search for and run Show/Hide Console via the Quick Actions search bar.

See also

• Create Figma Plugin docs
• yuanqing/figma-plugins

Official docs and code samples from Figma:

• Plugin API docs
• figma/plugin-samples