onyx-gen / onyx

A Figma plugin that helps to transform Figma Design Systems to Vue components with UnoCSS utility classes.

Onyx

A Figma plugin that helps to transform Figma Design Systems to Code

Generate Vue components with UnoCSS utility classes

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

Features

• Translate Figma design system to Vue with UnoCSS utility classes
• Multi-component variant selection support
  • Select multiple component variants and generate a single Vue component with all the selected variants (.e.g., default, hover & focused)
• Preview the generated code right in the Figma plugin

Development

Prerequisites

• Node Version Manager (NVM)

Verify

To ensure correct installation, execute the nvm -v bash command and expect no errors.

Install Node & PNPM

# Install Node
$ nvm install

# Install PNPM
$ corepack enable

# Prepare PNPM cache
$ pnpm setup
$ source ~/.zshrc

# Prepare .env files
$ sh setup.sh

# Install project dependencies
$ pnpm install

# Build the project
$ pnpm dev

License

MIT License © 2024 Miguel Franken