/figma-plugin-ds

A small lightweight design system for use in Figma Plugins

Primary LanguageSCSSMIT LicenseMIT

Figma Plugin DS

A lightweight UI library for creating Figma plugins.

Contents

Intro

This package contains CSS and Javascript to closely match the look, feel and function of those found in Figma. It has been created without any frameworks (like React, Vue, etc.) and only leverages (native) javascript for components not possible without.

Getting started

You can install this package as a dependecy on your own project: npm install figma-plugin-ds

Styles To use the styles, you can use them via a link tag, or import them like a module using a CSS loader.

<!-- Standard link tag-->
<link rel="stylesheet" href="../../node_modules/figma-plugin-ds/dist/figma-plugin-ds.css">
//You could also inport the css via a CSS Loader in your JS environment (refer to syntax of whatever loader you are using)
import styles from 'figma-plugin-ds/dist/figma-plugin-ds.css'

To use the Select menu or Disclosure components, you will need to import the Javascript files as well. This package supports both standard IIFE (Immediately Invoked Function Expressions) and ES6 Modules. There are a number of ways to get started.

Scripts: IIFE hosted on CDN (quick and easy, I don't want to mess with npm packages)

<script src="https://cdn.jsdelivr.net/gh/thomas-lowry/figma-plugin-ds/dist/iife/figma-plugin-ds.js"></script>
<script>
    selectMenu.init(); //initiates the select menu component
    disclosure.init(); //initiates the disclosure component
<script>

Scripts: IIFE

<!-- Standard link tag-->
<script src="../node_modules/figma-plugin-ds/dist/iife/figma-plugin-ds.js"></script>

Scripts: ES6 Modules

import { selectMenu, disclosure } from 'figma-plugin-ds';

Roadmap

  • New documentation website
  • Improved support for keyboard nav in the select menu
  • Slider component

Components

Button

To use the button, use the following HTML markup. Each button has a destructive option. Teritary buttons are styled like hyperlinks.

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

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

<!-- Tertirary (Hyperlink style button) -->
<button class='button button--tertiary'>Label</button>
<button class='button button--tertiary-destructive'>Label</button>
<button class='button button--tertiary' disabled>Label</button>

Modifiers

Modifier class Description
button--primary Primary button
button--primary-destructive Primary button with red destructive variant for actions such as deleting something
button--secondary Secondary button with outline style
button--secondary-destructive Secondary button with red destructive variant for actions such as deleting something
button--tertiary Tertiary button with hyperlink style
button--tertiary-destructive Tertiary button with red destructive variant for actions such as deleting something

Checkbox

To use the checkbox, use the following HTML markup. Remember each checkbox should get a unique ID that is referenced in the label. This ensures the checkbox and the entire label are clickable.

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

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

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

Disclosure

To use a disclosure panel, you must use the following markup and also make sure you initialize the Javascript for the disclosure to work.

<!-- Disclosure -->
<ul class="disclosure">
  <li class="disclosure__item disclosure--expanded">
    <div class="disclosure__label disclosure--section">Disclosure heading</div> <!-- This item is styled as a section -->
    <div class="disclosure__content">Panel content here</div>
  </li>

  <li class="disclosure__item disclosure--expanded"> <!-- This item is expanded on load -->
    <div class="disclosure__label">Disclosure heading</div>
    <div class="disclosure__content">Panel content here</div>
  </li>

  <li class="disclosure__item">
    <div class="disclosure__label">Disclosure heading</div>
    <div class="disclosure__content">Panel content here</div>
  </li>
</ul>

To initialize with Javascript:

//initialize all disclosure panels
disclosure.init();

//uninitialize all disclosure panels
disclosure.destroy();

Modifiers

Modifier class Description
disclosure--section Add this class to the disclosure__label to style it like a heading
disclosure--expanded Add this class to the disclosure__item to have it expanded on load

Icon

To use the icon component, use the following markup. Apply the appropriate modifier class to select the item you wish to use, you can also add additional modifiers to change the color, or even spin the icon. You can also specify no icon name to use a text character as an icon (for example, like found in the width + height icon inputs in Figma)

<!-- Icon -->
<div class="icon icon--theme"></div>

<!-- Icon with blue modifier class to change color -->
<div class="icon icon--theme icon--blue"></div>

<!-- Spinner icon with spinning animation-->
<div class="icon icon--spinner icon--spin"></div>

<!-- Text icon -->
<div class="icon">W</div>

Modifiers

Modifier class Description
icon--iconName* Sepcify which icon to use. Ex: icon--adjust or icon--settings
icon--spin Causes the icon to spin in an endless loop (for example: a loader used with icon--spinner)
icon--colorName* Pass the name of any Figma color var to this prop. Ex: icon--blue or icon--black3

*Colors accepted: icon--blue, icon--purple, icon--purple4, icon--hot-pink, icon--green, icon--red, icon--yellow, icon--black, icon--black8, icon--black3, icon--white, icon--white8, icon--white4

Icons

To use an icon, add one of the following modifier classes (see markup example above).

Icon Modifier class
IconAdjust icon--adjust
IconAlert icon--alert
IconAngle icon--angle
IconArrowLeftRight icon--arrow-left-right
IconUpDown icon--updown
IconAutoLayoutHorizontal icon--auto-layout-horizontal
IconAutoLayoutVertical icon--auto-layout-vertical
IconBack icon--back
IconBlendEmpty icon--blend-empty
IconBlend icon--blend
IconBreak icon--break
IconCaretDown icon--caret-down
IconCaretLeft icon--caret-left
IconCaretRight icon--caret-right
IconCaretUp icon--caret-up
IconCheck icon--check
IconClose icon--close
IconComponent icon--component
IconCornerRadius icon--corner-radius
IconCorners icon--corners
IconDistributeHorizontalSpacing icon--distribute-horizontal-spacing
IconDistributeVerticalSpacing icon--distribute-vertical-spacing
IconDraft icon--draft
IconEffects icon--effects
IconEllipses icon--ellipses
IconEyedropper icon--eyedropper
IconForward icon--forward
IconFrame icon--frame
IconGroup icon--group
IconHidden icon--hidden
IconHorizontalPadding icon--horizontal-padding
IconHyperlink icon--hyperlink
IconImage icon--image
IconInstance icon--instance
IconKey icon--key
IconLayoutAlignBottom icon--layout-align-bottom
IconAlignHorizontalCenters icon--align-horizontal-centers
IconAlignLeft icon--align-left
IconAlignRight icon--align-right
IconAlignTop icon--align-top
IconAlignVerticalCenters icon--align-vertical-centers
IconLayoutGridColumns icon--layout-grid-columns
IconLayoutGridRows icon--layout-grid-rows
IconLayoutGridUniform icon--layout-grid-uniform
IconLibrary icon--library
IconLinkBroken icon--link-broken
IconLinkConnected icon--link-connected
IconListDetailed icon--list-detailed
IconListTile icon--list-tile
IconList icon--list
IconLockOff icon--lock-off
IconLockOn icon--lock-on
IconMinus icon--minus
IconPlay icon--play
IconPlus icon--plus
IconRandom icon--random
IconRecent icon--recent
IconResizeToFit icon--resize-to-fit
IconResolveFilled icon--resolve-filled
IconResolve icon--resolve
IconReverse icon--reverse
IconSearchLarge icon--search-large
IconSearch icon--search
IconSettings icon--settings
IconShare icon--share
IconSmiley icon--smiley
IconSortAlphaAsc icon--sort-alpha-asc
IconSortAlphaDsc icon--sort-alpha-dsc
IconSortTopBottom icon--sort-top-bottom
IconSpacing icon--spacing
IconSpinner icon--spinner
IconStarOff icon--star-off
IconStarOn icon--star-on
IconStrokeWeight icon--stroke-weight
IconStyles icon--styles
IconSwap icon--swap
IconTheme icon--theme
IconTidyUpGrid icon--tidy-up-grid
IconTidyUpListHorizontal icon--tidy-up-list-horizontal
IconTidyUpListVertical icon--tidy-up-list-vertical
IconTimer icon--timer
IconTrash icon--trash
IconVerticalPadding icon--vertical-padding
IconVisible icon--visible
IconWarningLarge icon--warning-large
IconWarning icon--warning

Icon button

The icon button is essentially a wrapper for the icon component. Refer to the icon component above for its usage.

<!-- Icon button with a blend icon -->
<div class="icon-button">
  <div class="icon icon--blend"></div>
</div>

<!-- Icon button with selected modifier -->
<div class="icon-button icon-button--selected">
  <div class="icon icon--blend"></div>
</div>

Input

To use the input, use the following markup. You can also insert an icon into the input (see Icon component for usage).

<!-- Input with placeholder -->
<div class="input">
  <input type="input" class="input__field" placeholder="Placeholder">
</div>

<!-- Input with initial value -->
<div class="input">
  <input type="input" class="input__field" value="Initial value">
</div>

<!-- Disabled input -->
<div class="input">
  <input type="input" class="input__field" value="Initial value" disabled>
</div>

<!-- Input with icon -->
<div class="input input--with-icon">
  <div class="icon icon--angle"></div>
  <input type="input" class="input__field" value="Value">
</div>

Modifiers

Modifier class Description
input--with-icon* Add this modifier class if you plan to include the icon component within the input

Labels and sections

To use a label or section, use the following markup.

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

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

Onboarding tip

To create an onboarding tip, use the following markup. The tip also makes use of the icon component (see Icon component for usage).

<div class="onboarding-tip">
  <div class="icon icon--styles"></div>
  <div class="onboarding-tip__msg">Onboarding tip goes here.</div>
</div>

Radio button

To create an radio button, use the following markup. Remember each group of radio buttons must share the same name so that they are related to one another. Each button should have a unique id so that its label is associated with it and remains part of the clickable hit area.

<!-- Radio button -->
<div class="radio">
    <input id="radioButton1"type="radio" class="radio__button" value="Value" name="radioGroup" >
    <label for="radioButton1" class="radio__label">Radio button</label>
</div>

<!-- Radio button checked -->
<div class="radio">
    <input id="radioButton2"type="radio" class="radio__button" value="Value" name="radioGroup" checked>
    <label for="radioButton2" class="radio__label">Radio button</label>
</div>

<!-- Radio button disabled-->
<div class="radio">
    <input id="radioButton3"type="radio" class="radio__button" value="Value" name="radioGroup" disabled>
    <label for="radioButton3" class="radio__label">Radio button</label>
</div>

Select menu

To create an select menu, use the following markup. The select menu also requires you to initalize it with Javascript. If your plugin requires you to add or remove items in the select menu, simply use Javascript to modify the select menu and the select will reinitialize.

The select menu will open and position the menu to the selected object. If there is no vertical room inside your plugin's iFrame, the position of the menu will be moved to ensure it fits inside the iframe. If you have a select menu with too many options to fit within the iFrame, the menu will scroll vertically.

<!-- Select menu, default behavior is for the initial item to get selected -->
<select id="uniqueId" class="select-menu">
  <option value="1" >Item 1</option>
  <option value="2" >Item 2</option>
  <option value="3" >Item 3</option>
</select>

<!-- Select menu, provide an initial item with no value to have no items selected -->
<select id="uniqueId" class="select-menu">
  <option>Please make a selection</option>
  <option value="2" >Item 2</option>
  <option value="3" >Item 3</option>
</select>

<!-- Disabled select menu -->
<select id="uniqueId" class="select-menu" disabled>
  <option value="1" >Item 1</option>
  <option value="2" >Item 2</option>
  <option value="3" >Item 3</option>
</select>

To initialize with Javascript:

//initialize all select menus
selectMenu.init();

//uninitialize all select menus
selectMenu.destroy();

Switch

To use the switch, use the following HTML markup. Remember each switch should get a unique ID that is referenced in the label. This ensures the switch and the entire label are clickable.

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

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

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

Textarea

To use the textarea, use the following HTML markup.

<!-- Textarea -->
<textarea class="textarea" rows="2">Initial value</textarea>

<!-- Disabled textarea -->
<textarea class="textarea" rows="2" disabled>Initial value</textarea>

Type

To use the typography that is styled like it is in the Figma UI, use the following markup plus additional modifier classes to modify the size, weight, and letterspacing that is optimized for positive (dark text on light background) and negative (light text on dark background) applications.

<div class="type">UI11, size: xsmall (default) weight: normal, positive</div>
<div class="type type--large type--bold">UI13, size: large, weight: bold, positive</div>
<div class="type type--small type--medium type--inverse">UI12, size: large, weight: medium, negative</div>

Modifiers

Modifier class Description
type--small Font size 12px
type--large Font size 13px
type--xlarge Font size 14px
type--medium Font weight medium
type--bold Font weight bold
type--inverse Inversed (negative) application where light text is on dark background with increased letterspacing

Defaults: Font size 11px, normal weight, positive application