FigUI3

A lightweight, customizable web component library that uses Figmas UI3 style for modern web applications, but specifically for Figma plugins.

Features

• 🎨 Figma-inspired design system
• 📦 Zero dependencies
• 🚀 Lightweight and performant
• 🎯 Built with Web Components
• 🔧 Highly customizable
• 🌐 Framework agnostic

Components

The library includes the following components:

• <fig-button> - Versatile button component with multiple variants
• <fig-checkbox> - Checkbox input with indeterminate state support
• <fig-dialog> - Modal dialog component
• <fig-dropdown> - Customizable dropdown select
• <fig-field> - Form field wrapper with flexible layout options
• <fig-header> - Section header component
• <fig-input-color> - Color picker with hex/rgba support
• <fig-input-text> - Text/Number input with optional prefix/suffix slots
• <fig-slider> - Input slider with optional text input and units
• <fig-switch> - Toggle switch component
• <fig-tooltip> - Hover and click-triggered tooltips
• <fig-spinner> - Loading spinner component
• <fig-combo-input> - Combobox input
• <fig-chit> - Color/Gradient/Pattern/Image/Icon/Text chit component
• <fig-tabs> - Tabbed navigation component
• <fig-segmented-control> - Segmented control component
• <fig-image> - Image display or input component

Installation

npm install @rogieking/figui3

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

Or include directly in your HTML:

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

or

<link rel="stylesheet" href="https://esm.sh/@rogieking/figui3@latest/fig.css" />
<script src="https://esm.sh/@rogieking/figui3@latest/fig.js"></script>

Usage

<!-- Basic button -->
<fig-button>Click me</fig-button>

<!-- Slider with text input -->
<fig-field direction="horizontal">
  <label>Opacity</label>
  <fig-slider type="opacity" value="0.75" color="#ff0000" units="%" text="true">
  </fig-slider>
</fig-field>

Documentation

For detailed documentation and examples, visit our documentation site.

Browser Support

Fig.js supports all modern browsers that implement the Web Components standard:

• Chrome/Edge (Chromium) 67+
• Firefox 63+
• Safari 10.1+

Contributing

Contributions are welcome! Please read our contributing guidelines before submitting a pull request.

License

MIT License

Component Examples

Button (<fig-button>)

<!-- Basic button -->
<fig-button>Click me</fig-button>

<!-- Primary variant -->
<fig-button variant="primary">Primary Button</fig-button>

<!-- Secondary variant -->
<fig-button variant="secondary">Secondary Button</fig-button>

<!-- Ghost variant -->
<fig-button variant="ghost">Ghost Button</fig-button>

<!-- Ghost variant with icon -->
<fig-button variant="ghost" icon="true">
  <svg><!-- your icon svg --></svg>
</fig-button>

<!-- Link variant -->
<fig-button variant="link">Link Button</fig-button>

<!-- Disabled state -->
<fig-button disabled>Disabled</fig-button>

<!-- Toggle button -->
<fig-button type="toggle">Toggle Me</fig-button>

<!-- Submit button -->
<fig-button type="submit">Submit</fig-button>

<!-- Select list button -->
<fig-button type="select">
  Select Me
  <fig-dropdown>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </fig-dropdown>
</fig-button>

<!-- Default button -->
<fig-button type="button">Default</fig-button>

<!-- Upload button -->
<fig-button type="upload">
  Upload
  <input type="file" />
</fig-button>

Dropdown (<fig-dropdown>)

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

<!-- With default selection -->
<fig-dropdown value="2">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</fig-dropdown>

Tooltip (<fig-tooltip>)

<!-- Hover tooltip -->
<fig-tooltip text="This is a tooltip" action="hover">
  Hover over me
</fig-tooltip>

<!-- Click tooltip -->
<fig-tooltip text="Click tooltip" action="click"> Click me </fig-tooltip>

Popover (<fig-popover>)

<!-- Basic popover -->
<fig-popover>
  <button slot="trigger">Open Popover</button>
  <div slot="content">
    <h3>Popover Title</h3>
    <p>This is the popover content.</p>
  </div>
</fig-popover>

Dialog (<fig-dialog>)

<!-- Basic dialog -->
<fig-dialog>
  <fig-header>Dialog Title</fig-header>
  <div slot="content">
    <p>Dialog content goes here.</p>
  </div>
  <div slot="footer">
    <fig-button>Cancel</fig-button>
    <fig-button variant="primary">Confirm</fig-button>
  </div>
</fig-dialog>

Tabs (<fig-tabs>)

<fig-tabs>
  <fig-tab label="Tab 1">Content 1</fig-tab>
  <fig-tab label="Tab 2">Content 2</fig-tab>
  <fig-tab label="Tab 3">Content 3</fig-tab>
</fig-tabs>

Segmented Control (<fig-segmented-control>)

<fig-segmented-control>
  <button value="1">Option 1</button>
  <button value="2">Option 2</button>
  <button value="3">Option 3</button>
</fig-segmented-control>

Slider (<fig-slider>)

<!-- Basic range slider -->
<fig-slider min="0" max="100" value="50"></fig-slider>

<!-- Slider with text input and units -->
<fig-slider min="0" max="100" value="75" text="true" units="%"> </fig-slider>

<!-- Hue slider -->
<fig-slider type="hue" value="55"></fig-slider>

<!-- Stepper slider with discrete snapping values-->
<fig-slider type="stepper" value="25" default="50" step="25">
  <datalist id="markers">
    <option value="0"></option>
    <option value="25"></option>
    <option value="50"></option>
    <option value="75"></option>
    <option value="100"></option>
  </datalist>
</fig-slider>

<!-- Delta slider  -->
<fig-slider type="delta" value=".25" default="0" step="0.25" min="-5" max="5">
  <datalist id="markers">
    <option value="0"></option>
  </datalist>
</fig-slider>

<!-- Opacity slider with color -->
<fig-slider type="opacity" value="0.75" color="#ff0000" units="%" text="true">
</fig-slider>

<!-- Number slider with number transform and percentage units -->
<fig-slider
  min="0"
  max="1"
  transform="100"
  units="%"
  step="0.01"
  text="true"
  value="0.5"
>
</fig-slider>

Text Input (<fig-input-text>)

<!-- Basic text input -->
<fig-input-text value="Hello World"></fig-input-text>

<!-- With placeholder -->
<fig-input-text placeholder="Enter text..."></fig-input-text>

<!-- With prepend and append slots -->
<fig-input-text>
  <span slot="prepend">$</span>
  <span slot="append">.00</span>
</fig-input-text>

Field (<fig-field>)

<!-- Vertical layout -->
<fig-field>
  <label>Username</label>
  <fig-input-text></fig-input-text>
  <span class="help">Enter your username</span>
</fig-field>

<!-- Horizontal layout -->
<fig-field direction="horizontal">
  <label>Volume</label>
  <fig-slider min="0" max="100" value="50"></fig-slider>
</fig-field>

Color Input (<fig-input-color>)

<!-- Basic color picker -->
<fig-input-color value="#ff0000"></fig-input-color>

<!-- With text input and alpha channel -->
<fig-input-color value="#ff0000" text="true" alpha="true"> </fig-input-color>

Checkbox (<fig-checkbox>)

<!-- Basic checkbox -->
<fig-checkbox>Accept terms</fig-checkbox>

<!-- Checked state -->
<fig-checkbox checked>Selected option</fig-checkbox>

<!-- Indeterminate state -->
<fig-checkbox indeterminate>Parent option</fig-checkbox>

Switch (<fig-switch>)

<!-- Basic switch -->
<fig-switch></fig-switch>

<!-- With label -->
<fig-switch>Enable notifications</fig-switch>

<!-- Checked state -->
<fig-switch checked>Active</fig-switch>

Spinner (<fig-spinner>)

<!-- Basic spinner -->
<fig-spinner></fig-spinner>

Combo Input (<fig-combo-input>)

<!-- Basic combo input -->
<fig-combo-input
  options="House, Apartment, Condo, Other"
  placeholder="Type of residence"
></fig-combo-input>

Chit (<fig-chit>)

<!-- Basic chit -->
<fig-chit type="color" value="#ff0000"></fig-chit>

Image (<fig-image>)

<!-- Basic image -->
<fig-image src="https://via.placeholder.com/150"></fig-image>

Header (<fig-header>)

<!-- Basic header -->
<fig-header>
  <h3>Header</h3>
</fig-header>

fig-segmented-control (<fig-segmented-control>)

<!-- Basic segmented control -->
<fig-segmented-control>
  <fig-segment value="1" selected="true">Option 1</fig-segment>
  <fig-segment value="2">Option 2</fig-segment>
</fig-segmented-control>