FigUI3

A lightweight, zero-dependency web components library for building Figma plugin and widget UIs with native look and feel.

Live Playground & Demos

• Figma UI3 design system
• Zero dependencies
• ~228 KB JS + ~102 KB CSS minified
• Built with Web Components
• Automatic light/dark theme support
• Accessible with ARIA attributes and keyboard navigation
• Framework agnostic (React, Vue, Svelte, or vanilla JS)

FigUI3 components are built to preserve native semantics where possible and add ARIA only where custom elements need extra state or naming.

• Form primitives forward accessible names and state to their native controls, including combo inputs, dropdowns, text, number, slider, checkbox, radio, switch, color, and fill inputs.
• Selection components use standard keyboard patterns: tabs use roving focus and aria-controls, segmented controls expose a radio-group pattern with focus following arrow selection, choosers expose listbox/options, and menus support trigger state, item focus, Escape close, and disabled items.
• Dialog, popup, tooltip, and toast surfaces expose names, close affordances, live-region behavior, Escape dismissal, and focus return behavior appropriate to their role.
• Media components render their visual surface inside fig-preview; image/video semantics stay on the native media element, upload controls remain keyboard reachable, slotted image overlays stay in light DOM for framework ownership, and generated video controls render below the preview instead of as an overlay.
• Display and pointer components expose useful semantics when interactive or informative: handles, swatches, color tips, layers, spinners, shimmers, and skeletons sync names, busy states, disabled states, keyboard movement, inert states, or hidden states as appropriate.
• Focus styling uses shared --figma-focus-outline, --figma-focus-outline-offset, and --figma-focus-outline-radius tokens so visible focus treatment stays consistent across components.
• Component contracts include Playwright keyboard/focus coverage plus an axe smoke suite for representative form, media, overlay, selection, and loading fixtures.

Install:

npm install @rogieking/figui3

Import:

import "@rogieking/figui3/fig.css";
import "@rogieking/figui3/fig.js";

Opt into <fig-layer> when you need collapsible layer lists:

import "@rogieking/figui3/fig-layer.css";
import "@rogieking/figui3/fig-layer.js";

Opt into editor components like the full Figma-style fill picker when you need them:

import "@rogieking/figui3/fig-editor.css";
import "@rogieking/figui3/fig-editor.js";

Or use a CDN:

<link rel="stylesheet" href="https://unpkg.com/@rogieking/figui3@latest/dist/fig.css" />
<script type="module" src="https://unpkg.com/@rogieking/figui3@latest/dist/fig.js"></script>

Minimal example:

<fig-field direction="horizontal">
  <label>Color</label>
  <fig-input-color value="#FF5733" text="true"></fig-input-color>
</fig-field>
<fig-button variant="primary">Save</fig-button>

<fig-button> — demo

<fig-button>Primary</fig-button>
<fig-button variant="secondary">Secondary</fig-button>
<fig-button variant="destructive">Delete</fig-button>
<fig-button variant="destructiveSecondary">Destructive secondary</fig-button>
<fig-button variant="destructiveGhost">Destructive ghost</fig-button>
<fig-button variant="destructiveLink">Destructive link</fig-button>
<fig-button type="toggle" selected="true">Toggle</fig-button>
<fig-button variant="ghost" icon>
  <svg><!-- icon --></svg>
</fig-button>

type="select" and type="upload" are visual wrappers for native select/file controls. They avoid nested native buttons, show the shared focus outline on the wrapper, and open the native picker from keyboard activation where supported.

<fig-dropdown> — demo

<fig-dropdown value="2">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</fig-dropdown>

Keyboard activation follows the native select pattern. Enter opens the closed picker.

<fig-combo-input> — demo

<fig-combo-input options="House, Apartment, Condo" placeholder="Residence type"></fig-combo-input>

<fig-checkbox> — demo

<fig-checkbox>Accept terms</fig-checkbox>
<fig-checkbox checked>Selected</fig-checkbox>
<fig-checkbox indeterminate>Parent option</fig-checkbox>

<fig-radio> — demo

<fig-radio name="size" value="small">Small</fig-radio>
<fig-radio name="size" value="medium" checked>Medium</fig-radio>
<fig-radio name="size" value="large">Large</fig-radio>

<fig-switch> — demo

<fig-switch>Enable notifications</fig-switch>
<fig-switch checked>Active feature</fig-switch>

<fig-slider> — demo

Events: input (continuous), change (on release).

<fig-slider min="0" max="100" value="50" units="%"></fig-slider>
<fig-slider type="hue" value="180" text="false"></fig-slider>
<fig-slider type="opacity" value="75" color="#FF5733" units="%"></fig-slider>

For type="range", omitting value follows native range behavior and starts at the midpoint of min and max. Arrow keys move by step; hold Shift to move by a larger step.

<propskit-number>

Composes a <fig-field> and <fig-input-number> into a full-surface property control. Number attributes are forwarded to the inner input.

PropsKit controls use the compact default layout when size is omitted. Set size="large" for the 40px row layout.

All PropsKit inputs expose defaultValue, isDefault, and resetToDefault(). A propskit-group uses this shared contract to track its dirty state and reset each nested input to its own current default.

Events: input, change — forwarded from the inner number input.

Right-click and choose Reset, or call resetToDefault(), to restore default (falling back to the initial value).

<propskit-number label="Width" value="24" min="0" max="100" units="px"></propskit-number>

<propskit-color>

Composes a <fig-field> and <fig-input-color> into a full-surface property control. Color attributes are forwarded to the inner input and text editing remains enabled.

Attributes: label, value, default, alpha, disabled, size

Events: input, change — forwarded from the inner color input.

Right-click and choose Reset, or call resetToDefault(), to restore default or the initial color.

<propskit-color label="Fill" value="#0D99FF" alpha="true"></propskit-color>

<propskit-gradient>

Composes a <fig-field> and <fig-input-gradient> into a full-surface property control. The gradient is inline-editable by default.

Events: input, change — bubbling, composed events with { type: "gradient", gradient } in event.detail.

Methods and state: defaultValue, isDefault, and resetToDefault(). JSON defaults use structural equality, so object key order does not affect dirty state.

The first stop receives focus when the field is focused. Arrow keys move the selected stop, Shift+Arrow moves by 5%, Tab cycles stops, and Delete/Backspace removes a stop while preserving the two-stop minimum.

<propskit-gradient
  label="Fill"
  value='{"type":"gradient","gradient":{"type":"linear","angle":90,"interpolationSpace":"srgb","hueInterpolation":"shorter","stops":[{"position":0,"color":"#0D99FF","opacity":100},{"position":100,"color":"#9747FF","opacity":100}]}}'
  default='{"type":"gradient","gradient":{"type":"linear","angle":90,"interpolationSpace":"srgb","hueInterpolation":"shorter","stops":[{"position":0,"color":"#0D99FF","opacity":100},{"position":100,"color":"#9747FF","opacity":100}]}}'
></propskit-gradient>

<propskit-switch>

Composes a <fig-field> and an Off/On <fig-segmented-control> into a full-surface boolean property control.

Attributes: label, checked, default, disabled, name, value, size

Events: input, change — forwarded from the inner switch.

Right-click and choose Reset, or call resetToDefault(), to restore the default checked state.

<propskit-switch label="Visible" checked></propskit-switch>

<propskit-select>

Composes a <fig-field> and <fig-select> into a full-surface property control. Options come from the options attribute (same formats as fig-options: comma-separated, newline-delimited, or a JSON array).

Attributes: label, value, default, options, disabled, size

Events: input, change, optionhover — forwarded from the inner select. optionhover fires once when the pointer enters an enabled option, with the option value in event.detail, without changing the selection.

Right-click and choose Reset, or call resetToDefault(), to restore default or the initial selection.

<propskit-select label="Alignment" value="Center" options="Left,Center,Right"></propskit-select>

<propskit-text>

Composes a <fig-field> and <fig-input-text> into a full-surface, single-line property control. Text input attributes and adornment slots are forwarded to the inner control.

Attributes: label, value, default, placeholder, type, disabled, readonly, autoresize, size

Events: input, change — forwarded from the inner text input.

Right-click and choose Reset, or call resetToDefault(), to restore default or the initial text.

<propskit-text label="Name" value="Layer 1" placeholder="Enter a name"></propskit-text>

<propskit-slider>

Wraps a <fig-field> and <fig-slider> into a single labeled control. All slider attributes (except label, direction) are forwarded to the inner slider.

Events: input, change — forwarded from the inner slider.

Double-click or right-click and choose Reset to restore default, falling back to the initial value.

Methods: resetToDefault() triggers the same reset behavior.

<propskit-slider label="Opacity" min="0" max="100" value="75" units="%"></propskit-slider>

<fig-input-text> — demo

<fig-input-text value="Hello" placeholder="Enter text..."></fig-input-text>
<fig-input-text multiline placeholder="Enter description..."></fig-input-text>

<fig-input-number> — demo

<fig-input-number value="100" units="px"></fig-input-number>
<fig-input-number value="50" units="%" min="0" max="100"></fig-input-number>

<fig-input-angle> — demo

Angle/rotation input with circular dial, optional text input, multi-unit support, and unbounded winding past 360deg. Accepts unit suffixes in text input (90deg, 3.14rad, 0.5turn).

Events: input (continuous), change (on release).

<fig-input-angle value="90" text="true"></fig-input-angle>
<fig-input-angle text="true" units="rad" value="3.14159"></fig-input-angle>
<fig-input-angle text="true" rotations value="1080"></fig-input-angle>

<propskit-oscillator>

Waveform oscillator input with composable wave functions, live SVG waveform preview, draggable parameter handles, and direct numeric controls.

Supported type values: "sine", "square", "sawtooth", "triangle".

Properties: value returns a normalized JSON string. data returns { waves }. Single-wave JSON values are still accepted and normalized into waves.

Right-click and choose Reset, or call resetToDefault(), to restore the oscillator value.

Events:

<propskit-oscillator
  value='{"waves":[{"type":"sine","frequency":1,"amplitude":1,"phase":0,"offset":0},{"type":"triangle","frequency":2,"amplitude":0.5,"phase":0,"offset":0}]}'
></propskit-oscillator>

<fig-swatch> — demo

A color/gradient/image swatch element with checkerboard background for alpha.

<fig-swatch background="#FF5733"></fig-swatch>
<fig-swatch background="linear-gradient(90deg, #FF0000, #0000FF)" size="large"></fig-swatch>

<fig-color-tip> — demo

A compact solid-color swatch. Uses <fig-fill-picker> when the optional picker is registered, otherwise falls back to the native color input.

Events:

<fig-color-tip value="#FF5733"></fig-color-tip>
<fig-color-tip value="#00AAFF" alpha="true"></fig-color-tip>

<fig-input-color> — demo

Events:

value, hex, and rgba retain their legacy values. The additive aliases use opaque #RRGGBB for color, 0–1 for alpha, and 0–100 for opacity.

<fig-input-color value="#FF5733" text="true"></fig-input-color>

When fig-editor.js is imported, swatch activation opens <fig-fill-picker>. Without it, the native color input is used.

<fig-input-palette>

An editable palette of solid colors, each rendered as a <fig-input-color> swatch with add/remove support.

Events:

<fig-input-palette value='["#FF0000","#00FF00","#0000FF"]'></fig-input-palette>
<fig-input-palette value='[{"color":"#FF0000","alpha":0.5},{"color":"#00FF00","alpha":1}]' open></fig-input-palette>

The collapsed palette is a single tab stop. Enter or Space expands it, and focus styling uses the shared focus outline tokens on the visible swatch row.

<fig-input-gradient>

A gradient editor with draggable stops. With edit="picker" and the optional picker registered, it opens <fig-fill-picker> locked to gradient mode; otherwise it falls back to inline stop editing.

Supported interpolation spaces: srgb, srgb-linear, display-p3, oklab, oklch (with hueInterpolation: shorter, longer, increasing, decreasing).

Events:

<fig-input-gradient
  value='{"type":"gradient","gradient":{"type":"linear","angle":90,"interpolationSpace":"oklab","stops":[{"position":0,"color":"#FF0000","opacity":100},{"position":100,"color":"#0000FF","opacity":100}]}}'
></fig-input-gradient>

<fig-input-fill> — demo

A comprehensive fill input supporting solid, gradient, image, and video fills. Without the optional picker, it renders a passive preview.

Add aria-label to name the generated picker, hex field, and opacity field as one fill control group.

Events:

<fig-input-fill value='{"type":"solid","color":"#FF5733","opacity":100}'></fig-input-fill>

<fig-fill-picker> — demo

Optional full fill picker dialog supporting solid, gradient, image, video, and webcam. Import fig-editor.js and fig-editor.css to register and style it.

Events:

<fig-fill-picker value='{"type":"solid","color":"#FF5733"}'>
  <fig-swatch></fig-swatch>
</fig-fill-picker>

<fig-tabs> / <fig-tab> — demo

Events: input, change with selected tab value.

Tabs use role="tablist" / role="tab" and roving focus. Use content="#panel-id" on each <fig-tab> to associate generated tab panels. Focus-visible tabs use the shared focus outline tokens.

<fig-tabs value="tab1">
  <fig-tab value="tab1">General</fig-tab>
  <fig-tab value="tab2">Advanced</fig-tab>
</fig-tabs>

<fig-segmented-control> / <fig-segment> — demo

Events: input, change — detail contains the selected value.

Segmented controls expose a radio-group pattern. Arrow keys, Home, and End move selection between enabled segments and move focus to the selected segment.

<fig-segmented-control>
  <fig-segment value="left" selected="true">Left</fig-segment>
  <fig-segment value="center">Center</fig-segment>
  <fig-segment value="right">Right</fig-segment>
</fig-segmented-control>

<fig-chooser> / <fig-choice>

A selection list controller. <fig-choice> elements are selectable options within a <fig-chooser>. When app code rebuilds a chooser by setting fig-chooser.innerHTML, the chooser restores its overflow buttons automatically. Choices remain direct light-DOM children (React-safe).

fig-chooser attributes:

fig-choice attributes:

Events (on fig-chooser): input, change — detail is the selected value string.

<fig-chooser value="opt1">
  <fig-choice value="opt1">Option 1</fig-choice>
  <fig-choice value="opt2">Option 2</fig-choice>
  <fig-choice value="opt3">Option 3</fig-choice>
</fig-chooser>

<fig-joystick>

A 2D position input control with optional X/Y fields.

Events:

<fig-joystick value="50% 50%" fields="true" precision="2"></fig-joystick>

Keyboard focus lands on the internal handle. Arrow keys move the handle and keep focus on it during interaction.

<fig-origin-grid>

A transform-origin grid control with a draggable handle and optional X/Y percentage fields.

Events:

<fig-origin-grid value="50% 50%" drag="true" fields="true"></fig-origin-grid>

The internal handle uses the shared focus outline and supports Arrow, Shift+Arrow, Home, and End keyboard movement.

<fig-easing-curve>

An interactive bezier or spring easing curve editor with a preset dropdown and manual value input.

Static: FigEasingCurve.PRESETS — built-in preset array. FigEasingCurve.curveIcon(value) — SVG icon helper.

Events:

<fig-easing-curve value="0.42, 0, 0.58, 1"></fig-easing-curve>
<fig-easing-curve value="spring(200, 15, 1)" edit="false"></fig-easing-curve>

Editable bezier and spring handles are keyboard operable. Bezier handles keep tab order aligned with the visual handle order.

<fig-3d-rotate>

An interactive 3D cube for setting rotation values. Supports drag interaction and optional X/Y/Z number fields.

Events:

<fig-3d-rotate value="rotateX(20deg) rotateY(-35deg) rotateZ(0deg)" fields="true"></fig-3d-rotate>

<fig-handle>

A draggable handle element. Positioned on a drag-surface container with axis constraints and snapping. Used internally by gradient editors and spatial controls, but also available standalone.

Events:

<div style="position: relative; width: 200px; height: 200px; background: #eee;">
  <fig-handle drag="true" value="50% 50%"></fig-handle>
</div>

When drag="true", focused handles support Arrow key movement, Home/End jumps, and a tokenized focus outline with a 1px offset.

<fig-canvas-control> — demo

A composite point control with optional radius circle, angle handle, or second point. Place inside a positioned container; the component uses display: contents and does not create its own box.

Value shapes by type:

Events:

For type="color", color edits add { color, alpha, opacity } to the positional value object.

For point-point, both handles support direct drag (with a dynamic directional resize cursor) and rotation via their hit area (dragging from the hit area rotates around the opposite handle at fixed distance, with a rotate cursor).

<div style="position: relative; width: 200px; height: 200px; background: #eee;">
  <fig-canvas-control
    type="point-point"
    name="Start, End"
    value='{"x":25,"y":25,"x2":75,"y2":75}'
    snapping="modifier"
  ></fig-canvas-control>
</div>

<fig-field> — demo

A form field wrapper with flexible layout. Automatically links <label> to the first fig-* child for accessibility.

<fig-field direction="horizontal" columns="thirds">
  <label>Opacity</label>
  <fig-slider value="50" units="%"></fig-slider>
</fig-field>

<fig-dialog> — demo

A modal/non-modal dialog. Uses is="fig-dialog" on a native <dialog> element.

<dialog is="fig-dialog" id="myDialog" modal drag handle="fig-header" position="center center">
  <fig-header>Dialog Title</fig-header>
  <fig-content padding><p>Content here.</p></fig-content>
</dialog>

Use padding on fig-content for prose-only content. Leave it off when rendering fig-field or fig-group children, which provide their own gutters.

Dialog close paths restore focus to the element that opened the dialog.

<fig-popup> — demo

An anchored floating surface built on <dialog> with collision-aware positioning.

<dialog is="fig-popup" anchor="#my-button" position="center right" variant="popover">
  <fig-header><h3>Popup</h3></fig-header>
</dialog>

Popups restore focus on close. Escape dismissal is scoped so nested menu and overlay behavior can keep its own keyboard handling.

<fig-toast> — demo

A toast notification. Uses is="fig-toast" on a native <dialog>. Defaults to role="status", aria-live="polite", and aria-atomic="true". Use live="assertive" or theme="danger" for assertive announcements.

<dialog is="fig-toast" id="myToast" theme="brand" duration="3000">
  Settings saved!
</dialog>
<fig-button onclick="document.getElementById('myToast').showToast()">Show</fig-button>

<fig-tooltip> — demo

Contextual tooltip on hover or click. Auto-repositions when the child element moves.

<fig-tooltip text="Helpful info">
  <fig-button>Hover me</fig-button>
</fig-tooltip>

Escape dismisses an open tooltip and returns focus to its trigger.

<fig-separator> — demo

A visual divider between content groups. The optional label attribute adds a group label and accessible name. Add borderless to hide the separator line.

<fig-separator></fig-separator>
<fig-separator label="More"></fig-separator>
<fig-separator label="First group" borderless></fig-separator>

<fig-menu> / <fig-menu-item> / <fig-separator> — demo

Triggered menu with native keyboard patterns. The trigger gets aria-haspopup="menu", aria-expanded, and aria-controls; menu items use role="menuitem" and disabled items are skipped by keyboard navigation.

Keyboard: Arrow keys move between enabled items, Home/End jump to edges, Enter/Space selects, Escape closes and returns focus to the trigger.

Methods: showAt(x, y) opens the menu at viewport coordinates, useful for custom context menu behavior.

<fig-menu position="bottom left">
  <fig-button fig-menu-trigger>Actions</fig-button>
  <fig-menu-item value="copy">Copy</fig-menu-item>
  <fig-menu-item value="paste">Paste</fig-menu-item>
  <fig-separator></fig-separator>
  <fig-menu-item value="delete" disabled>Delete</fig-menu-item>
  <fig-separator label="More"></fig-separator>
  <fig-menu-item value="settings">Settings</fig-menu-item>
</fig-menu>

fig-separator accepts optional label — renders the rule, then secondary group text underneath.

<fig-header> — demo

A section header component.

<fig-header>Section Title</fig-header>

<fig-layer> — demo

A collapsible layer list item with expand/collapse and visibility toggling. Supports nesting and exposes role="treeitem", aria-expanded, aria-hidden, aria-disabled, and a keyboard-toggleable chevron button. Import fig-layer.js and fig-layer.css to register and style it. fig-editor.js also includes the layer registration.

Events: openchange (detail: { open }), visibilitychange (detail: { visible }).

<fig-layer open="true">
  <div class="fig-layer-row">
    <span class="fig-layer-icon"></span>
    <span class="fig-layer-name">Group 1</span>
  </div>
  <fig-layer>
    <div class="fig-layer-row">
      <span class="fig-layer-icon"></span>
      <span class="fig-layer-name">Child 1</span>
    </div>
  </fig-layer>
</fig-layer>

<fig-preview>

A thin styled layer for arbitrary visual content. Use it for generated previews, canvas output, SVG, images, or other custom rendered surfaces when you do not need media upload behavior.

Set --fig-preview-background to customize the surface color, including transparent to remove it.

<fig-preview full style="height: 96px">
  <canvas width="320" height="180"></canvas>
</fig-preview>

<fig-preview checkerboard>
  <img src="photo.png" alt="Preview">
</fig-preview>

<fig-media>

Unified media component that supports image/video modes and shared sizing/upload behavior. The media surface is rendered inside a fig-preview; generated video controls render below that preview rather than as an overlay. Set size for a token-sized square, or aspect-ratio to fill the container width with a fixed ratio.

Use meaningful alt text for informative images. Use alt="" only when the image is decorative or already described by nearby text.

<fig-media type="image" src="photo.jpg" alt="Selected image"></fig-media>
<fig-media type="image" src="photo.jpg" alt="Cover image" aspect-ratio="16 / 9" fit="cover"></fig-media>
<fig-media type="video" src="clip.mp4" aria-label="Product demo video" caption="Looping product demo" controls muted></fig-media>
<fig-media type="image" src="photo.jpg" alt="Selected image">
  <figcaption>Selected image from the current document.</figcaption>
</fig-media>

Use the caption attribute for a plain-text caption, or a direct <figcaption> child for authored caption content.

Native load lifecycle events are re-emitted from the fig-media host as bubbling, composed CustomEvents. Image mode emits load and error. Video mode forwards loadstart, progress, suspend, abort, error, emptied, stalled, loadedmetadata, loadeddata, canplay, canplaythrough, playing, waiting, seeking, seeked, durationchange, timeupdate, ratechange, resize, and volumechange; existing play, pause, and ended events remain available. Event detail includes src, media, and originalEvent, plus video timing and readiness state.

For generated images, a spinner appears when loading exceeds 150ms and is removed on load or error. The host reflects aria-busy="true" while pending. Authored media or preview content does not receive an automatic spinner.

<fig-image> — demo

An image display component with optional upload, aspect ratio, and object-fit control. Renders a real <img> inside a fig-preview.

Use meaningful alt text for informative images. Use alt="" for decorative previews, thumbnails with visible labels, or upload placeholders.

The generated image's native load and error events are re-emitted from fig-image as bubbling, composed CustomEvents with src, media, and originalEvent in event.detail.

<fig-image src="photo.jpg" alt="Selected image"></fig-image>
<fig-image src="photo.jpg" alt="Cover image" aspect-ratio="16 / 9" fit="cover" caption="Cover image"></fig-image>
<fig-image upload label="Upload Image" alt=""></fig-image>
<fig-image src="photo.jpg" alt="Selected image">
  <figcaption>Selected image from the current document.</figcaption>
  <fig-input-file slot="overlay" variant="overlay" label="Change image"></fig-input-file>
</fig-image>

Use slot="overlay" for custom overlay controls. Slotted overlays stay as direct light-DOM children so frameworks like React keep ownership of their nodes, while CSS places them over the preview and keeps them visible on hover, focus, and active interaction.

<fig-card> — demo

A media card with a truncated label and attribute-only selection chrome. With src, it composes a generated fig-image. The label and sublabel attributes render inside a generated fig-footer.

<fig-card src="photo.jpg" label="Autumn field"></fig-card>
<fig-card src="photo.jpg" label="Large card" size="large"></fig-card>
<fig-card src="photo.jpg" label="Shader pill" sublabel="Generative tools/effects" selected></fig-card>
<fig-card src="photo.jpg" label="Wide card" aspect-ratio="16/9" full></fig-card>
<fig-card label="Custom preview">
  <fig-preview>...</fig-preview>
</fig-card>
<fig-card>
  <fig-preview>...</fig-preview>
  <fig-footer><label>Authored footer</label></fig-footer>
</fig-card>

When src is omitted, authored direct children such as fig-image, fig-media, or fig-preview remain direct children of the card. An authored fig-footer is preserved; when no label, text, or sublabel attributes are present, the card does not generate another footer.

Place cards in a CSS grid for multi-column layouts — there is no built-in columns attribute. Prefer full in fluid layouts for consistency with other FigUI controls.

<fig-video>

Video display/upload component with the same preview styling model as fig-image. Renders a real <video> inside a fig-preview; generated playback controls tack onto the bottom.

Prefer controls for videos that play motion. Use native <track> text tracks when the video includes speech or essential audio.

<fig-video src="clip.mp4" aria-label="Product demo video" caption="Product demo" controls></fig-video>
<fig-video src="clip.mp4" aria-label="Product demo video" aspect-ratio="16 / 9" controls></fig-video>
<fig-video upload label="Upload Video" aria-label="Uploaded video preview" controls muted>
  <figcaption>Uploaded video preview.</figcaption>
</fig-video>

<fig-avatar> — demo

Profile image or initials fallback.

<fig-avatar src="https://example.com/photo.jpg" name="John Doe"></fig-avatar>
<fig-avatar name="Jane Smith" size="large"></fig-avatar>

<fig-icon> — demo

Masked icon using --icon-16-* and --icon-24-* design tokens (SVG artboard size). Display size is controlled separately via the size attribute.

<fig-icon name="close"></fig-icon>
<fig-icon name="send"></fig-icon>
<fig-icon name="chevron" size="small"></fig-icon>

Legacy: <span class="fig-mask-icon" style="--icon: var(--icon-24-add)"></span> still works.

<fig-spinner> — demo

A loading spinner.

Defaults to role="status" and aria-label="Loading"; override the label when the loading target needs a more specific name.

<fig-spinner></fig-spinner>

<fig-shimmer> — demo

A shimmer loading placeholder.

Shimmer and skeleton placeholders are hidden from assistive tech unless you add aria-label or aria-labelledby; named placeholders expose role="status" and aria-busy.

<fig-shimmer style="width: 200px; height: 20px;"></fig-shimmer>

<fig-skeleton>

Extends <fig-shimmer> for structured loading placeholders. Skeletons are inert by default, so any placeholder inputs or buttons inside them are removed from tab focus while loading.

<fig-skeleton style="width: 100%; height: 1rem; border-radius: 4px;"></fig-skeleton>

FigUI3 adapts to light and dark themes via CSS custom properties using Figma's naming convention:

--figma-color-bg
--figma-color-bg-secondary
--figma-color-bg-hover
--figma-color-text
--figma-color-text-secondary
--figma-color-border
--figma-color-icon
/* ... and more */

In Figma plugins, these variables are provided automatically. For standalone usage, the library includes fallback values that respond to prefers-color-scheme.

Force a theme manually:

<body style="color-scheme: dark;">
  <!-- Forces dark theme -->
</body>

Focus indicators are controlled with shared tokens:

--figma-focus-outline
--figma-focus-outline-offset
--figma-focus-outline-radius

--figma-focus-outline-radius defaults to inherit, so focused controls can inherit their component radius unless a component overrides it for a specific shape.

import { useRef, useEffect } from 'react';
import '@rogieking/figui3/fig.css';
import '@rogieking/figui3/fig.js';

function ColorPicker({ value, onChange }) {
  const ref = useRef(null);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const handleChange = (e) => onChange(e.detail);
    el.addEventListener('change', handleChange);
    return () => el.removeEventListener('change', handleChange);
  }, [onChange]);

  useEffect(() => {
    if (ref.current) ref.current.setAttribute('value', value);
  }, [value]);

  return <fig-input-color ref={ref} text="true" alpha="true" />;
}

Note: Avoid setting value directly in JSX during re-renders — use refs to prevent infinite loops from attributeChangedCallback.

SSR (Next.js/Remix/Astro): Import fig.js only on the client to keep server rendering safe.

<template>
  <fig-input-color :value="color" text="true" alpha="true" @input="onInput" @change="onChange" />
</template>

<script setup>
import { ref } from 'vue';
import '@rogieking/figui3/fig.css';
import '@rogieking/figui3/fig.js';

const color = ref('#FF5733');
const onInput = (e) => { color.value = e.detail.color; };
const onChange = (e) => { console.log('Final:', e.detail); };
</script>

<script>
  import '@rogieking/figui3/fig.css';
  import '@rogieking/figui3/fig.js';
  let color = '#FF5733';
</script>

<fig-input-color value={color} text="true" alpha="true"
  on:input={(e) => color = e.detail.color}
  on:change={(e) => console.log('Saved:', e.detail)} />

git clone https://github.com/rogie/figui3.git
cd figui3
bun install
bun dev                # Component docs at http://localhost:3000
npm run dev:playground # Playground at http://localhost:5173 (/figui3, /propkit, /sandbox)
npm run build          # Build minified dist/ (JS + CSS)
npm run build:css      # Build minified CSS only

npm run build produces minified files in dist/:

Default imports resolve to minified dist/ files. Unminified source is available via @rogieking/figui3/src/*:

import "@rogieking/figui3/fig.css";      // minified (default)
import "@rogieking/figui3/src/fig.css";  // unminified source

The playground is the fastest way to explore and validate component markup:

• /figui3 — component examples with attribute controls
• /propkit — property panel patterns
• /sandbox — styled React sample app

• Chrome/Edge 67+
• Firefox 63+
• Safari 10.1+

MIT License © Rogie King