figma-kit-plugin-ui v1.0.0-rc3

FigmaKit Plugin UI Svelte

A component library for Svelte 5 based Figma plugins. It provides a set of reusable components and utilities to help you build Figma plugin interfaces quickly and efficiently with Svelte 5.

Number one priority was to re-implement the original Figma UI elements as close as possible, so plugin users have a familiar and high quality experience.

This library is built on top of figma-plugin-ds-svelte, many thanks to the original author for providing this resource.

Usage

Setup

Install this library via npm install figma-kit-plugin-ui and import components like this

import { Button } from 'figma-plugin-ui-kit';

<Button onClick={() => console.log('Button clicked!')}>Click Me</Button>;

Inside '/routes' is a demo page with all the components and usage examples. After cloning this repo and installing the dependencies via npm install, run npm run dev to start a local server and the demo app. There you find some usage examples on how to use the components and which properties they have in action.

Styles

There are additional global styles needed for the components to work correctly. Import them somewhere in a Svelte file like this:

<script>
	import '../../node_modules/figma-kit-plugin-ui/dist/css/global.css';
</script>

Contributing

Contributions are welcome! If you have any suggestions or find any issues, please open an issue or submit a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Developing

To get started extending this UI kit, clone the repository and install the dependencies:

git clone https://github.com/KaiMagnusMueller/figma-plugin-ui-kit.git
cd figma-plugin-ui-kit
npm install

Once you've cloned the repository and installed everything, start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Everything inside src/lib is part of the library, everything inside src/routes is used for testing and preview.

Building

To build your library:

npm run package

To create a production version of your showcase app:

npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.

Publishing

To publish your library to npm:

npm publish