https://github.com/imohanvadivel/figblocks
An Open-source UI component library for building Figma plugins with svelte.
https://github.com/imohanvadivel/figblocks
figma figma-components figma-components-library figma-library figma-plugin figma-svelte figma-svelte-library figmadesign svelte svelte-components svelte-components-library sveltekit
Last synced: 5 months ago
JSON representation
An Open-source UI component library for building Figma plugins with svelte.
- Host: GitHub
- URL: https://github.com/imohanvadivel/figblocks
- Owner: imohanvadivel
- Created: 2024-06-25T16:13:11.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-07-06T08:21:13.000Z (12 months ago)
- Last Synced: 2024-11-15T13:46:09.871Z (8 months ago)
- Topics: figma, figma-components, figma-components-library, figma-library, figma-plugin, figma-svelte, figma-svelte-library, figmadesign, svelte, svelte-components, svelte-components-library, sveltekit
- Language: Svelte
- Homepage: https://figblocks.mohanvadivel.com
- Size: 92.8 KB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Figblocks
An Open-source UI component library for building Figma plugins with svelte.
## Installation
Install the `figblocks` in your project to get started.
```bash
npm i figblocks
```
If you don't have a developement setup, you can clone the template provide below.
```bash .sdfs
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.
```bash
#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.
```bash
import "figblocks/globalStyles";
```
## Usage
Import the required components from `figblocks` and start crafting your figma plugin.
```svelte example
import { Button, Icon } from 'figblocks';
import { IconArrowRight } from 'figblocks/icons';
Get Started
```
## Useful links
- [Plugin Documentation](https://www.figma.com/plugin-docs)
- [Figma Community Forum](https://forum.figma.com/)
- [Plugin and widget review guidelines](https://help.figma.com/hc/en-us/articles/360039958914-Plugin-and-widget-review-guidelines)
- [Figma brand guidelines](https://www.figma.com/using-the-figma-brand/)