Onyx ◆ Design System to Code
Components & Design Tokens → Vue & UnoCSS
Plugin Preview
About this plugin
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.
Project is open source:
https://github.com/onyx-gen/onyx
◆ 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 thebg-$primary.bg.hover
UnoCSS utility class)
- Multi-Variant Component Support: Users can select multiple variants of a component (such as
default
,hover
, andfocused
) 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
- Select Components: Start by selecting one or multiple components within your Figma design system.
- Open the Onyx Figma plugin: Open the Onyx Figma plugin in Figma's plugin panel.
- Generate Code: Onyx automatically generates Vue components for the selected Figma components.
- 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.
Plugin Details
Version | 2 |
---|---|
Created | April 20, 2024 |
Last Updated | April 23, 2024 |
Category | Software development |
Creator | Miguel Franken |
Stats | 11 installs, 7 likes |
Pricing | Free |
Technical Details
- API:1.0.0
- UI:packages/ui/dist/index.html
- main:packages/code/dist/code.js
- Document Access:dynamic-page
- Network Access:
MyPlugin queries external resources.
- Editor Types:dev
- Allowed Domains:
- *
More Like This
Discover other plugins in the Software development category.