Nobs CodeGen is a powerful Figma plugin that bridges the gap between design and development by automatically generating CSS and HTML code from your Figma designs. It extracts properties from various Figma node types and produces corresponding code, making the transition from design to implementation smoother and more efficient.
Nobs CodeGen offers a range of features to streamline your design-to-code workflow:
- Multi-node Selection: Extract code from multiple Figma nodes simultaneously.
- Comprehensive Property Extraction: Captures a wide range of design properties, including:
- Position and size
- Colors and gradients
- Typography styles
- Borders and shadows
- Layout properties (for auto layout frames)
- Customizable Output: Choose between pixel (px) and relative (rem) units.
- Batch Processing: Efficiently handles large selections with progress reporting.
- Structure Export: Option to export the design structure as HTML, XML, or JSON.
- Code Dividers: Clear commented dividers for each root node in the generated code.
- User-friendly Interface: Easy-to-use plugin UI for configuration and code generation.
- Open the Figma desktop app
- Navigate to
Plugins > Development > New Plugin - Choose "Link existing plugin"
- Select the
manifest.jsonfile from this project
- Select one or more nodes in your Figma design
- Run the Nobs CodeGen plugin from the Plugins menu
- In the plugin UI, configure your preferences (units, included properties, etc.)
- Click the "Generate Code" button
- Review the generated code in the plugin window
- Copy the code to use in your project
-
Node Selection:
- Single node: Click on any node in your Figma design
- Multiple nodes: Hold Shift and click on multiple nodes, or drag to select an area
-
Running the Plugin:
- Go to
Plugins > Nobs CodeGenin the Figma menu - If you've used it recently, you can also find it under
Plugins > Recent
- Go to
-
Configuration:
- Units: Choose between 'px' and 'rem'
- Include Position: Toggle to include/exclude position properties
- Include Size: Toggle to include/exclude size properties
- Include Font Styles: Toggle to include/exclude typography properties
- REM Base: Set the base pixel value for rem calculations (default is 16)
- Export Structure Format: Choose between None, HTML, XML, or JSON
-
Generating Code:
- Click "Generate Code" to start the code generation process
- For large selections, you'll see a progress bar indicating the status
-
Reviewing and Using the Code:
- The generated code will appear in the plugin window
- CSS and HTML code will be separated with clear headings
- Each root node (page) will have commented dividers for easy navigation
- If selected, the structure export (HTML, XML, or JSON) will be included at the end
- Use the copy button or manually select and copy the code
- Paste the code into your project files as needed
For a design with multiple components, Nobs CodeGen might generate CSS and HTML like this:
/* CSS */
/* -------------------- Header (Start) -------------------- */
.header {
width: 100%;
height: 80px;
background-color: #f8f8f8;
}
.header .logo {
font-size: 24px;
font-weight: bold;
color: #333;
}
/* -------------------- Header (End) -------------------- */
/* -------------------- Main Content (Start) -------------------- */
.main-content {
padding: 20px;
display: flex;
flex-direction: column;
}
.main-content .title {
font-size: 32px;
margin-bottom: 16px;
}
/* -------------------- Main Content (End) -------------------- */<!-- HTML -->
<!-- -------------------- Header (Start) -------------------- -->
<div class="figma-node figma-frame header" data-id="1:2">
<span class="node-name">Header</span>
<div class="figma-node figma-text logo" data-id="1:3">
<span class="node-name">Logo</span>
</div>
</div>
<!-- -------------------- Header (End) -------------------- -->
<!-- -------------------- Main Content (Start) -------------------- -->
<div class="figma-node figma-frame main-content" data-id="1:4">
<span class="node-name">Main Content</span>
<div class="figma-node figma-text title" data-id="1:5">
<span class="node-name">Title</span>
</div>
</div>
<!-- -------------------- Main Content (End) -------------------- -->Nobs CodeGen offers several configuration options to tailor the output to your needs:
- Units: Choose between pixels (px) or relative units (rem)
- Include Position: When enabled, generates
position,top, andleftproperties - Include Size: When enabled, generates
widthandheightproperties - Include Font Styles: When enabled, generates typography-related properties
- REM Base: Set the pixel equivalent of 1rem (default is 16px)
- Export Structure Format: Choose between None, HTML, XML, or JSON for additional structure export
These options can be adjusted in the plugin UI before generating the code.
To set up the project for development:
-
Clone this repository:
git clone https://github.com/yourusername/nobs-codegen.git cd nobs-codegen -
Install dependencies:
npm install -
Build the plugin:
npm run build -
To watch for changes and rebuild automatically:
npm run watch
Contributions to Nobs CodeGen are welcome! Please refer to the CONTRIBUTING.md file for guidelines on how to contribute to this project.
This project is licensed under the MIT License - see the LICENSE.md file for details.
If you encounter any issues or have questions about using Nobs CodeGen, please:
- Check the Troubleshooting section in this README
- Look through existing issues on the GitHub repository
- If your problem isn't addressed, please open a new issue with a clear description and steps to reproduce the problem
- Added commented dividers for each root node in generated code
- Improved structure export options (HTML, XML, JSON)
- Enhanced batch processing for large selections
- Initial release of Nobs CodeGen
- Features include CSS and HTML generation for multiple node types, configurable units, and batch processing
Nobs CodeGen is developed and maintained by [Your Name/Organization]. We'd like to thank all contributors who have helped shape and improve this plugin.
Made with ❤️ by Ei Eye