Figma Plugin UI
{{ pageName }}
T
100%

A design system for Figma plugins

An unofficially supported design system that closely mirrors the Figma UI for use in the development of Figma plugins.

The system is built with HTML, CSS and native Javascript with no dependencies. Simply include the minified JS + CSS inline within your plugin UI or as part of your build process. You can modify/recompile figma-plugin-ds.scss to include only the components you need for performance.

Created and maintained by Thomas Lowry

Components

Interact with the collection of components and their corresponding markup and javascript functions.

Buttons

Primary

Normal

Disabled

Destructive

Disabled

Secondary

Normal

Disabled

Destructive

Disabled

<!-- Primary -->
<button class='button button--primary'>Label</button>
<button class='button button--primary-destructive'>Label</button>

<!-- Secondary -->
<button class='button button--secondary'>Label</button>
<button class='button button--secondary-destructive'>Label</button>

Checkboxes and switches

Checkbox

<div class="checkbox">
    <input class="checkbox__box" type="checkbox" id="uniqueId">
    <label class="checkbox__label" for="uniqueId">Label</label>
</div>	

Switch

<div class="switch">
    <input class="switch__toggle" type="checkbox" id="uniqueId">
    <label class="switch__label" for="uniqueId">Label</label>
</div>

Disclosure

  • Disclosure
    Panel content here
  • Disclosure
    Panel content here
  • Disclosure
    Panel content here
  • Disclosure section
    Panel content here
  • Disclosure section
    Panel content here
  • Disclosure section
    Panel content here
<ul class="disclosure">
   <li class="disclosure__item">
       <div class="disclosure__label disclosure--section">Disclosure</div>
       <div class="disclosure__content">Panel content here</div>
   </li>
   <li class="disclosure__item">
       <div class="disclosure__label">Disclosure</div>
       <div class="disclosure__content">Panel content here</div>
   </li>
</ul>
//initialize javascript
disclosure.init();

Inputs

<input type="input" class="input" placeholder="Placeholder">
<input type="input" class="input" value="Value">
<input type="input" class="input" value="Value" disabled>

Icon Input

<div class="input-icon">
   <div class="input-icon__icon">
     <div class="icon icon--angle icon--black-3"></div>
     </div>
   <input type="input" class="input-icon__input" value="0°" placeholder="0°">
</div>
//initialize javascript
iconInput.init();

Components

A collection of components for use in Figma plugins.

--adjust

--adjust --blue

--adjust --black-3

--adjust --white

--adjust --button

--adjust --button --selected

W

--text

<!-- Icon -->
<div class="icon icon--adjust"></div>
<div class="icon icon--adjust icon--blue"></div>
<div class="icon icon--adjust icon--black-3"></div>
<div class="icon icon--adjust icon--white"></div>

<!-- Icon button -->
<div class="icon icon--adjust icon--button"></div>
<div class="icon icon--adjust icon--button icon--selected"></div>

<!-- Icon button -->
<div class="icon icon--text">W</div>

--adjust

--alert

--align-bottom

--align-middle

--align-top

--angle

--animated-fill

--arrow-left-right

--arrow-up-down

--blend-empty

--blend

--break

--close

--comment

--component

--corner-radius

--corners

--dist-horiz-spacing

--dist-vert-spacing

--draft

--effects

--ellipses

--eyedropper

--frame

--group

--hidden

--hyperlink

--image

--import

--instance

--layout-align-bottom

--layout-align-horiz-cent

--layout-align-left

--layout-align-right

--layout-align-top

--layout-align-vert-cent

--layout-grid-columns

--layout-grid-rows

--layout-grid-uniform

--library

--link-broken

--link-connected

--list-detailed

--list

--lock-unlocked

--lock

--mask

--minus

--node-connect

--play

--plus

--recent

--reset-instance

--resize-to-fit

--resolve-filled

--resolve

--restore

--return

--search-large

--search

--share

--smiley

--star-off

--star-on

--stroke-weight

--styles

--tidy-up-grid

--tidy-up-list-horiz

--tidy-up-list-vert

--timer

--trash

--type

--vector-handles

--visible

--warning

Labels, sections, and dividers

Label
Section
<!-- Label -->
<div class="label">Label</div>

<!-- Section -->
<div class="section-title">Section title</div>

<!-- Divider -->
<div class="divider"></div>

Inputs

Your onboarding tip goes here. This is like the tip shows you how to create local styles.
This component also uses the icon component, simply change the modifier class to select the icon you wish to use or create your own.
<div class="onboarding-tip">
    <div class="onboarding-tip__icon">
        <div class="icon icon--visible"></div>
    </div>
    <div class="onboarding-tip__msg">Onboarding tip goes here.</div>
</div>

Select menu

Menu with initial selection

Menu with no selection

Menu with option groups

Menu with labeled option groups

<select name="" id="select-menu1" class="select-menu">
    <option value="1" selected="selected">Item 1</option>
    <option value="2" >Item 2</option>
</select>
//initialize javascript
selectMenu.init();

//settings
selectMenu.init({
    position: 'positionToSelection' //other options: 'under', 'overlap'
});

//destroy
selectMenu.destroy();

Textarea

Normal

Disabled

<textarea rows="2" class="textarea">Some text inside a textarea</textarea>

Visual bell

Something was successful

Normal / informational

Saving data...

Loading

There was an error

Error

<!-- Normal / informational -->
<div class="visual-bell">
    <span class="visual-bell__msg">Something was successful</span>
</div>

<!-- Loading -->
<div class="visual-bell">
    <div class="visual-bell__spinner-container">
         <span class="visual-bell__spinner"></span>
    </div>
    <span class="visual-bell__msg">Saving data...</span>
</div>

<!-- Error -->
<div class="visual-bell visual-bell--error">
    <span class="visual-bell__msg">There was an error</span>
</div>

Tokens

Variables and mixins for reusable properties such as colors, drop shadows, border radius, and typography.

Colors

Accent

$figma-blue
$figma-purple
$figma-hot-pink
$figma-green
$figma-red
$figma-yellow

Foreground

$figma-black
$figma-black-8
$figma-black-3
$figma-white
$figma-white-8
$figma-white-4

Background

$figma-white
$figma-grey
$figma-silver
$figma-black
$figma-hud
$figma-toolbar

Special

$figma-blue-3
$figma-selection-a
$figma-selection-b
$figma-black-1
$figma-hover-fill
$figma-hover-pruple-4
$figma-hover-white-2

Border radius and shadows

Border radius

2px

$border-radius-small

5px

$border-radius-med

6px

$border-radius-large

Shadows

$shadow-floating-window

$shadow-hud

Typography

The type system has 4 type sizes: small (11px), medium (12px), large (13px), and xlarge (14px). There are three different weights: normal, medium, and bold. There are versions optimized for positive and negative applications.

Positive

UI Pos 11 Normal
UI Pos 11 Medium
UI Pos 11 Bold
UI Pos 12 Normal
UI Pos 12 Medium
UI Pos 12 Bold
UI Pos 13 Normal
UI Pos 13 Medium
UI Pos 13 Bold
UI Pos 14 Normal
UI Pos 14 Medium
UI Pos 14 Bold

Negative

UI Neg 11 Normal
UI Neg 11 Medium
UI Neg 11 Bold
UI Neg 12 Normal
UI Neg 12 Medium
UI Neg 12 Bold
UI Neg 13 Normal
UI Neg 13 Medium
UI Neg 13 Bold
UI Neg 14 Normal
UI Neg 14 Medium
UI Neg 14 Bold

Use the negative or positive type mixin to use in your own components:

@include font-ui-pos('small','normal') // Positive, 11px, Normal
@include font-ui-neg('medium','bold')  // Negative, 12px, Bold
// Sizes: small (11px), medium (12px), large (13px), xlarge (14px)
// Weights: normal, medium, bold

Or you can use the type component/class with the same size weight variations as above:

<p class='type type--pos-small-normal'>Some type<p>
<p class='type type--neg-medium-bold'>Some type<p>