A Svelte 5 fork of Rogie King's FigUI3 · Alpha · 13 of ~51 components ported

FigUI3, rebuilt for Svelte 5.

We love FigUI3, but we don't love web components. This is a version of Rogie King's FigUI3 library, rewritten from the ground up in Svelte 5 — runes instead of imperative DOM plumbing, snippets instead of slots. Same look. Same feel. Better to build with.

View on npm View on GitHub

Install

npm install @obra-studio/figui3-svelte@alpha

<script>
  import { Button, TextInput } from '@obra-studio/figui3-svelte';
  import '@obra-studio/figui3-svelte/styles.css';

  let name = $state('');
</script>

<TextInput bind:value={name} placeholder="Your name" />
<Button onclick={() => console.log(name)}>Say hi</Button>

Requires Svelte 5.56+. Every example on this page is this library, running live — not screenshots.

See it, don't just read about it

This is a real, working plugin window built entirely out of the components on this page — try it.

Export settings

File name

Format

Scale

Quality

Export

Selection All frames

Include background

Notify when done

Why this exists

rogie/figui3 is a fantastic, native-feeling UI kit for Figma plugins and widgets, built as framework-agnostic Web Components. That framework-agnosticism is also its cost: authoring Custom Elements means imperative DOM manipulation, manual attribute/property syncing, and none of the ergonomics Svelte developers are used to.

This fork drops the Custom Element output entirely and rewrites every component as a native Svelte 5 component — runes for state, snippets for composition, real <label>/control associations instead of manual ARIA wiring. It's a deliberate breaking change from the original, maintained by Obra Studio for teams building Figma plugin UIs in Svelte. Visual design and API shape are unchanged — credit for both belongs to Rogie King's original.

Component status

Shipped

Coming next

Form controls

Color & fill

Selection

Spatial controls

Layout & feedback