https://github.com/sney-js/figma-powerset

Figma plugin that renders all permutations of a selected instance based on the values of its variant properties.
https://github.com/sney-js/figma-powerset

design-system documentation figma-plugin

Last synced: about 1 month ago
JSON representation

Figma plugin that renders all permutations of a selected instance based on the values of its variant properties.

• Host: GitHub
• URL: https://github.com/sney-js/figma-powerset
• Owner: sney-js
• License: mit
• Created: 2023-07-23T23:30:48.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-01-23T23:40:15.000Z (about 1 year ago)
• Last Synced: 2024-11-06T17:27:18.339Z (3 months ago)
• Topics: design-system, documentation, figma-plugin
• Language: TypeScript
• Homepage: https://www.figma.com/community/plugin/1273268862501005276/powerset
• Size: 494 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Powerset - Figma Plugin

Powerset is a powerful Figma plugin that renders all permutations of a selected instance based on the values of its variant properties. It's an invaluable tool for QA-ing your component library definitions or showcasing its permutations.

## Features

- **Permutation Rendering**: Generate all possible combinations of a selected instance.

- **Component Library QA**: Ensure your component library is robust and covers all possible scenarios.

- **Showcase Variants**: Easily demonstrate the versatility of your components.

## Quickstart

Follow these steps to get the plugin up and running:

1. Clone this repository to your local machine.

2. Run `npm i` in the project directory to install dependencies.

3. Run `npm run build:watch` to start webpack in watch mode.

4. Open Figma, navigate to `Plugins` -> `Development` -> `Import plugin from manifest...` and choose the `manifest.json` file from this repo.

## Development

### UI Development

To modify the UI of the plugin, make changes within the `src/app` directory. The entry point for the UI is [App.tsx](./src/app/components/App.tsx).

### Messaging and Rendering

To alter Messaging and Rendering in Figma, edit files within the `src/plugin` directory. The entry point for this is [controller.ts](./src/plugin/controller.ts).

For more information on how to work with the Figma API, refer to the [Figma API Overview](https://www.figma.com/plugin-docs/api/api-overview/).

## Tooling

This project uses the following tools and technologies:

- React + Webpack for UI development.

- TypeScript for type safety.

- Prettier precommit hook for code formatting.

## Contributing

We welcome contributions to Powerset! Please review our [contribution guidelines](CONTRIBUTING.md) before getting started.

## License

This project is licensed under the terms of the [MIT license](LICENSE).