FigmaKit Plugin UI Svelte

A comprehensive component library for Svelte-based Figma plugins, providing authentic Figma UI elements with Svelte 5 support. Built to deliver a familiar, high-quality experience that matches Figma's native interface.

Quick Start

Installation

npm install figmakit-plugin-ui-svelte

Basic Setup

<script lang="ts">
    import { Button, Input, Switch } from 'figmakit-plugin-ui-svelte';

    // Import required global styles
    import 'figmakit-plugin-ui-svelte/dist/css/resets.css';
    import 'figmakit-plugin-ui-svelte/dist/css/global.css';
</script>

<Button onclick={() => console.log('Clicked!')}>Click Me</Button>

CSS Variable Autocomplete (VS Code)

Add to .vscode/settings.json for CSS variable autocomplete:

{
    "cssVariables.lookupFiles": [
        "node_modules/figmakit-plugin-ui-svelte/dist/css/global.css",
        "node_modules/figmakit-plugin-ui-svelte/dist/css/resets.css",
        "node_modules/figmakit-plugin-ui-svelte/dist/css/figma-styles-for-testing.css"
    ]
}

Demo Page

Run npm run dev after cloning to see all components in action with usage examples.

---

Components

Button

Primary action component with multiple variants and states.

Prop	Type	Default	Description
variant	'primary' | 'secondary' | 'tertiary'	'primary'	Button style variant
size	'default' | 'large'	'default'	Button size
destructive	boolean	false	Applies destructive styling
disabled	boolean	false	Disables the button
icon	string	undefined	SVG icon string
onclick	(event: MouseEvent) => void	undefined	Click handler

<Button variant="primary" onclick={() => console.log('Primary clicked')}>Primary Action</Button>
<Button variant="secondary" size="large" icon={IconAdjust}>Secondary</Button>
<Button variant="tertiary" destructive>Delete</Button>

Input

Text input component with label, validation, and icon support.

Prop	Type	Default	Description
label	string	required	Input label text
showLabel	boolean	true	Show/hide label visually
placeholder	string	'Input something here...'	Placeholder text
disabled	boolean	false	Disables the input
invalid	boolean	false	Shows error state
errorMessage	string	'Error message'	Error message text
icon	string	undefined	Left-side icon
borders	boolean	true	Show/hide borders
value	string	''	Input value (bindable)

<Input label="Email" placeholder="Enter your email" />
<Input label="Search" icon={IconAdjust} />
<Input label="Name" invalid errorMessage="Name is required" />

Checkbox

Standard checkbox input with label support.

Prop	Type	Default	Description
checked	boolean	false	Checked state (bindable)
disabled	boolean	false	Disables the checkbox
value	string	undefined	Form value
onchange	(event: Event) => void	undefined	Change handler

<Checkbox onchange={(e) => console.log('Changed:', e.target.checked)}>
    Enable notifications
</Checkbox>
<Checkbox checked disabled>Read-only option</Checkbox>

Switch

Toggle switch component for binary options.

Prop	Type	Default	Description
checked	boolean	false	Switch state (bindable)
disabled	boolean	false	Disables the switch
onchange	(event: Event) => void	undefined	Change handler

<Switch checked onchange={() => console.log('Toggled')}>Dark mode</Switch>

Radio

Radio button component for single selection from a group.

Prop	Type	Default	Description
group	string | number	required	Bound group value
value	any	required	This radio's value
disabled	boolean	false	Disables the radio
onchange	(event: Event) => void	undefined	Change handler

<script>
    let selectedOption = 'option1';
</script>

<Radio bind:group={selectedOption} value="option1">Option 1</Radio>
<Radio bind:group={selectedOption} checked value="option2">Option 2</Radio>

Textarea

Multi-line text input component.

Prop	Type	Default	Description
label	string	required	Textarea label
showLabel	boolean	true	Show/hide label visually
rows	number	2	Number of visible rows
placeholder	string	'Input something here...'	Placeholder text
disabled	boolean	false	Disables the textarea
value	string	''	Textarea value (bindable)

<Textarea label="Description" rows={4} placeholder="Enter description..." />

IconButton

Compact button component with icon only. Label for acessibility.

Prop	Type	Default	Description
icon	string	required	SVG icon string
label	string	undefined	Accessibility label
disabled	boolean	false	Disables the button
onclick	(event: MouseEvent) => void	undefined	Click handler

<IconButton icon={IconClose} label="Close" onclick={handleClose} />

ToggleButton

Button with checked state.

Prop	Type	Default	Description
checked	boolean	false	Toggle state (bindable)
disabled	boolean	false	Disables the button
icon	string	undefined	Optional icon
onchange	(checked: boolean) => void	undefined	State change handler

<ToggleButton onchange={(checked) => console.log('Toggled:', checked)}>Favorite</ToggleButton>
<ToggleButton icon={IconAdjust} />

MultiMenu

Advanced dropdown menu with nested groups, single/multi-select, and actions.

Prop	Type	Default	Description
groups	MenuGroup[]	required	Menu structure array
triggerType	'button' | 'select'	'button'	Trigger button style
showSelectedValues	boolean	false	Display selected items in trigger
icon	string	undefined	Trigger icon
disabled	boolean	false	Disables the menu
onclick	(action: string) => void	undefined	Action click handler

<MultiMenu
    groups={[
        {
            name: 'file',
            label: 'File',
            children: [
                { label: 'New', action: 'new' },
                { label: 'Open', action: 'open' }
            ]
        }
    ]}
    triggerType="select"
    showSelectedValues
/>

Dialog

Modal dialog component with header and customizable content.

Prop	Type	Default	Description
title	string	required	Dialog title
dialog	HTMLDialogElement	undefined	Dialog element reference (bindable)
onclose	(event: Event) => void	undefined	Close handler

<script>
    let myDialog;
</script>

<Button onclick={() => myDialog?.showModal()}>Open Dialog</Button>

<Dialog bind:dialog={myDialog} title="Confirmation">
    <p>Are you sure you want to continue?</p>
    <Button onclick={() => myDialog?.close()}>Close</Button>
</Dialog>

Disclosure

Collapsible sections with expand/collapse functionality.

Prop	Type	Default	Description
multiple	boolean	false	Allow multiple sections open

DisclosureItem Props:

Prop	Type	Default	Description
title	string	required	Section title
expanded	boolean	false	Initial expanded state (bindable)
section	boolean	false	Bold section styling

<Disclosure multiple>
    <DisclosureItem title="Section 1" expanded>Content for section 1</DisclosureItem>
    <DisclosureItem title="Section 2">Content for section 2</DisclosureItem>
</Disclosure>

Icon

Flexible icon component for displaying SVG icons.

Prop	Type	Default	Description
icon	string	required	SVG icon string
size	number	24	Icon size in pixels
color	string	undefined	CSS color variable
spin	boolean	false	Continuous rotation animation

<Icon icon={IconAdjust} size={16} />
<Icon icon={IconCheck} color="--figma-color-icon-success" />

Other Components

Label: Text labels for form sections Type: Typography component with size and weight variants
OnboardingTip: Informational tips with icons as seen in the right sidebar

---

Icons

The library includes essential Figma UI icons for the above components. You can also copy SVG icons directly from Figma and import them in your project:

1. Open the Figma console/dev tools
2. Navigate to an SVG icon in the UI with the element picker
3. Save it as SVG file
4. Use with Icon component: <Icon icon={copiedSvgString} />

Development

Getting Started

git clone https://github.com/KaiMagnusMueller/figmakit-plugin-ui.git
cd figmakit-plugin-ui
npm install
npm run dev

Everything inside src/lib is the library, src/routes contains the demo page.

Building & Publishing

# Build library
npm run package

# Build demo site
npm run build

# Publish to npm
npm publish
# or for beta releases
npm publish --tag beta

Version Management

npm version patch      # 2.0.0 → 2.0.1
npm version minor      # 2.0.0 → 2.1.0
npm version major      # 2.0.0 → 3.0.0
npm version prerelease --preid=beta  # → 2.0.1-beta.1

---

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any suggestions or improvements.

License

MIT License - see LICENSE for details.

---

Built on top of figma-plugin-ds-svelte - thanks to the original author Thomas Lowry!