Figblocks
An Open-source UI component library for building Figma plugins with svelte.
Installation
Install the figblocks in your project to get started.
npm i figblocks
If you don't have a developement setup, you can clone the template provide below.
git clone https://github.com/imohanvadivel/figma-template-svelte.git
cd figma-template-svelte
npm i
The following scripts can be used to automate the building process.
#Monitors changes in the UI files and rebuilds them automatically when changes happen
watch:ui
#Compiles the UI files for production use
build:ui
#Monitors changes in the Figma code file and rebuilds it automatically when changes happen
watch:code
#Compiles the Figma code file forproduction use
build:code
Import Global Styles
Import the global styles in your main.ts file and now you're all set to use the library.
import "figblocks/globalStyles";
Usage
Import the required components from figblocks and start crafting your figma plugin.
<script>
import { Button, Icon } from 'figblocks';
import { IconArrowRight } from 'figblocks/icons';
</script>
<Button>
Get Started <Icon slot="right-icon" iconSvg={IconArrowRight} />
</Button>