Publish as production Figma plugin

[MiguelFranken]

Summary

The built production Onyx bundle should be published as production Figma plugin so that other Fima users can use the plugin in Figma without building the project!

Details

https://help.figma.com/hc/en-us/articles/360042293394-Publish-plugins-to-the-Figma-Community

Each Figma plugin can be showcased via a Figma Community Plugin page. It shows a description and some metadata. We need to gather this metadata for the Onyx project.

Example community plugin page:
https://www.figma.com/community/plugin/1037108608720448600/figma-to-html-with-framer

TODOs

• Submit plugin for review
• Gather information for community plugin page

Metadata

• Category: Software Development templates
• Name: Onyx ◆ Design System to Code
• Tagline: Components & Design Tokens → Vue & UnoCSS

Project Description

# Onyx ◆ Design System to Code



## Overview



Onyx is designed to simplify the workflow between design and development by automating the conversion of your Figma Design System into ready-to-use Vue components. Its ability to handle multiple selected component variants and integrate design tokens provided via the Tokens Studio for Figma plugin makes it a powerful tool for modern web development.



Onyx is a Figma plugin designed to efficiently translate Figma Design Systems into Vue components, utilizing UnoCSS utility classes. This tool targets developers and designers looking to streamline the conversion of their design systems into functional, reactive UI components directly usable in Vue projects.



## What It Does



- **Figma Components to Vue Components:** Onyx allows users to select components within Figma and generate corresponding Vue components. Design properties are translated to UnoCSS utility classes.

  

- **Support for Design Tokens:** The plugin integrates with Tokens Studio, another Figma plugin, to convert design tokens into CSS variables. These variables are then passed to the UnoCSS utility classes (e.g., background color design token named `primary.bg.hover` generates the `bg-$primary.bg.hover` UnoCSS utility class)



- **Multi-Variant Component Support:** Users can select multiple variants of a component (such as `default`, `hover`, and `focused`) and Onyx will generate a single Vue component. Onyx automatically applies the correct UnoCSS variants (e.g., `bg-red-600 hover:bg-red-700 focus:bg-red-800`



- **Live Preview:** Onyx provides a real-time preview of the generated Vue components within Figma via an iframe. This feature ensures that components are visually and functionally in sync with the Figma design.



## How to Use It



1. **Select Components:** Start by selecting one or multiple components within your Figma design system.

2. **Open the Onyx Figma plugin**: Open the Onyx Figma plugin in Figma's plugin panel.

3. **Generate Code:** Onyx automatically generates Vue components for the selected Figma components.

4. **Implement in Project:** Copy the generated Vue component into your Vue project.



## Limitations



- **Work in Progress:** As the plugin is still under development, some design properties may not convert perfectly into UnoCSS utility classes. At the moment not all design tokens types can be applied.

- **Design Compatibility:** There may be limitations in how certain Figma design properties translate to UnoCSS utility classes, potentially requiring manual adjustments.

[MiguelFranken]

Status:
Plugin is In Review in Figma

See here:
https://www.figma.com/community/plugin/1363542562381428983/onyx-design-system-to-code