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>

Useful links

• Plugin Documentation
• Figma Community Forum
• Plugin and widget review guidelines
• Figma brand guidelines