Figma Plugin Design System

A Figma Plugin design system and component library in Marko made by CVA Plugin Team

Installation

pnpm install

Overview

This project is powered by @marko/run.

• Run pnpm run dev to start the development server
• Run pnpm run build to build a production-ready node.js server
• Run pnpm run preview to run the production server

Adding Components

Pages map to the directory structure. You can add additional pages by creating files/directories under src/routes with +page.marko files. Learn more in the @marko/run docs.

To Do

Configure Addons

Documentation

• @storybook/addon-docs:

  Document component usage and properties in Markdown

• storybook-addon-docs-tabs:

  A Storybook addon that adds tabs to the Docs Addon.

  

• @storybook/addon-storysource:

  View a story’s source code to see how it works and paste into your app

  

Versioning and Publishing

• Configure component statuses for @etchteam/storybook-addon-status

Prototyping

• Configure @storybook/addon-links

  The Storybook Links addon can be used to create links that navigate between stories in Storybook.

Speeding up Development

• Create a custom ChatGPT to create stories

• storybook-vscode-component

  A simple Storybook addon to open the component source in VS Code

• @storybook/addon-designs

  Storybook addon for embedding your design preview in addon panel