Skip to content
master
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 

Figma Plugin DS Svelte

WORK IN PROGRESS—This is a Svelte version of the Figma Plugin DS specifically for use in creating Figma Plugins. I decided to create this because Svelte seems like a great lightweight approach well suited for creating Figma plugins, and also improves the developer experience when compared to my vanilla JS Figma Plugin DS due to simplified markup.

You can also get started with Figsvelte, a boilerplate for Figma plugins that already has this library setup as a dependency.

Installation

To install into your own Svelte project. npm i -D figma-plugin-ds-svelte

To use

//import the global css which includes Figma color, spacing, and type vars
//also includes a basic set of utility classes
import { GlobalCSS } from 'figma-plugin-ds-svelte';

//import the desired components
import { Button, Input, SelectMenu } from 'figma-plugin-ds-svelte';

Components

All components can accept class props to add global or utility classes to each component


Button

import { Button } from 'figma-plugin-ds-svelte';
<Button on:click={funcName}>Label</Button>
<Button on:click={funcName} variant="secondary">Label</Button>
<Button on:click={funcName} variant="secondary" destructive>Label</Button>
<Button on:click={funcName} disabled>Label</Button>

Props

Prop Type Options/notes
on:click Func Assign a function to execute on click. Ex: on:click={funcName}
variant String Default: "primary", Options: "secondary", "tertiary"
disabled Boolean Default: false
destructive Boolean Default: false

Checkbox

import { Checkbox } from 'figma-plugin-ds-svelte';
<Checkbox>Label</Checkbox>
<Checkbox checked>Label</Checkbox>
<Checkbox disabled>Label</Checkbox>

Props

Prop Type Options/notes
on:change Func Funtion to execute on change. Ex: on:change={funcName}
value Boolean Default: false;
checked Boolean Default: false; You can bind the value when checked to a var. bind:checked={varName}
disabled Boolean Default: false

Disclosure

import { Disclosure, DisclosureItem } from 'figma-plugin-ds-svelte';
<Disclosure>
  <DisclosureItem title="Item 1" open>Content here</DisclosureItem>
  <DisclosureItem title="Item 2">Content here</DisclosureItem>
  <DisclosureItem title="Item 3">Content here</DisclosureItem>
</Disclosure>

Props

Prop Type Options/notes
title String Title of disclosure item
open Boolean Default: false; Only one disclosure item can be opened at once
section Boolean Default: false; Bold section header for disclosure title

Icon

//You need to import the icon component + whatever icons you want to use,
//pass the names of your icon modules to the iconName prop in the Icon component
import { Icon, IconName } from 'figma-plugin-ds-svelte';

//You can also import your own svg icon (32x32) and pass it to the icon component
import SvgName from './src/directory/image.svg';

//Example
import { Icon, IconVisible, IconSpinner } from 'figma-plugin-ds-svelte';
<Icon iconName={IconVisible} color="black"/>
<Icon iconName={IconSpinner} color="blue" spin/>
<Icon iconText="W" color="blue"/>

Props

Prop Type Options/notes
iconName Var Pass an imported SVG to this prop. iconName={IconImport}
iconText String Pass a text character to use instead of an icon. Ex: width and height inputs iconText="W"
color String Pass the name of any Figma color var to this prop. color="blue"
spin Boolean Default: false; This will rotate the icon in an endless loop.

Icons

Icon Var
IconAdjust IconAdjust
IconAlert IconAlert
IconAngle IconAngle
IconArrowLeftRight IconArrowLeftRight
IconUpDown IconUpDown
IconAutoLayoutHorizontal IconAutoLayoutHorizontal
IconAutoLayoutVertical IconAutoLayoutVertical
IconBack IconBack
IconBlendEmpty IconBlendEmpty
IconBlend IconBlend
IconBreak IconBreak
IconCaretDown IconCaretDown
IconCaretLeft IconCaretLeft
IconCaretRight IconCaretRight
IconCaretUp IconCaretUp
IconCheck IconCheck
IconClose IconClose
IconComponent IconComponent
IconCornerRadius IconCornerRadius
IconCorners IconCorners
IconDistributeHorizontalSpacing IconDistributeHorizontalSpacing
IconDistributeVerticalSpacing IconDistributeVerticalSpacing
IconDraft IconDraft
IconEffects IconEffects
IconEllipses IconEllipses
IconEyedropper IconEyedropper
IconForward IconForward
IconFrame IconFrame
IconGroup IconGroup
IconHidden IconHidden
IconHorizontalPadding IconHorizontalPadding
IconHyperlink IconHyperlink
IconImage IconImage
IconInstance IconInstance
IconKey IconKey
IconLayoutAlignBottom IconLayoutAlignBottom
IconAlignHorizontalCenters IconAlignHorizontalCenters
IconAlignLeft IconAlignLeft
IconAlignRight IconAlignRight
IconAlignTop IconAlignTop
IconAlignVerticalCenters IconAlignVerticalCenters
IconLayoutGridColumns IconLayoutGridColumns
IconLayoutGridRows IconLayoutGridRows
IconLayoutGridUniform IconLayoutGridUniform
IconLibrary IconLibrary
IconLinkBroken IconLinkBroken
IconLinkConnected IconLinkConnected
IconListDetailed IconListDetailed
IconListTile IconListTile
IconList IconList
IconLockOff IconLockOff
IconLockOn IconLockOn
IconMinus IconMinus
IconPlay IconPlay
IconPlus IconPlus
IconRandom IconRandom
IconRecent IconRecent
IconResizeToFit IconResizeToFit
IconResolveFilled IconResolveFilled
IconResolve IconResolve
IconReverse IconReverse
IconSearchLarge IconSearchLarge
IconSearch IconSearch
IconSettings IconSettings
IconShare IconShare
IconSmiley IconSmiley
IconSortAlphaAsc IconSortAlphaAsc
IconSortAlphaDsc IconSortAlphaDsc
IconSortTopBottom IconSortTopBottom
IconSpacing IconSpacing
IconSpinner IconSpinner
IconStarOff IconStarOff
IconStarOn IconStarOn
IconStrokeWeight IconStrokeWeight
IconStyles IconStyles
IconSwap IconSwap
IconTheme IconTheme
IconTidyUpGrid IconTidyUpGrid
IconTidyUpListHorizontal IconTidyUpListHorizontal
IconTidyUpListVertical IconTidyUpListVertical
IconTimer IconTimer
IconTrash IconTrash
IconVerticalPadding IconVerticalPadding
IconVisible IconVisible
IconWarningLarge IconWarningLarge
IconWarning IconWarning

Icon button

//use this component as you would an Icon, it accepts the same props (except color)
import { IconButton } from 'figma-plugin-ds-svelte';
<IconButton on:click={funcName} iconName={IconVisible}/>
<IconButton on:click={funcName} iconName={IconVisible} selected/>
<IconButton on:click={funcName} iconText="@"/>

Props

Prop Type Options/notes
on:click Func Assign a function to execute on click. Ex: on:click={funcName}
selected Boolean Default: false
iconName String See Icon component for usage.
IconText String See Icon component for usage.
spin Boolean See Icon component for usage.

Input

import { Input } from 'figma-plugin-ds-svelte';

//var to define and store value
var inputValue = 'Default value'; 
<Input bind:value={inputValue}/>
<Input bind:value={inputValue} disabled/>
<Input placeholder="Enter some info..."/>

<!-- You can also pass Icon props to use the icon component inside the input -->
<Input iconName={IconName} />
<Input iconName={IconSpinner} spin placeholder="Fetching data..." />

<!-- Force borders on the input -->
<Input value="Value" borders/>

Props

Prop Type Options/notes
on:change Func Funtion to execute on change. Ex: on:change={funcName}
value String Value that will get populated by user or specify predefined value. You can also bind this to a variable.
placeholder String Placeholder text.
borders Boolean Default: false; Force a border on the input field.
disabled Boolean Default: false
iconName Var See Icon component for usage.
iconText String See Icon component for usage.
spin Boolean See Icon component for usage.

Labels and sections

import { Label, SectionHeader } from 'figma-plugin-ds-svelte';
<Label>Label name</Label>
<Section>Section name</Section>

Onboarding tip

import { OnboardingTip } from 'figma-plugin-ds-svelte';
<OnboardingTip iconName={IconStyles}>
  Tip text goes here
</OnboardingTip>

Props

Prop Type Options/notes
iconName Var See Icon component for usage.
iconText String See Icon component for usage.
spin Boolean See Icon component for usage.

Radio button

import { Radio } from 'figma-plugin-ds-svelte';

//use bind:group, with a var to create a radio group and store the value of selected item
//set value if this var to same value as radio item to set initial selection
var radioValue;
<Radio bind:group={radioValue} value="a">Label</Radio>
<Radio bind:group={radioValue} value="b">Label</Radio>

Props

Prop Type Options/notes
on:change Func Funtion to execute on change. Ex: on:change={funcName}
group Var Pass name of var to store selected item from radio group.
value String Value of radio item.
disabled Boolean Default: false

Select menu

import { SelectMenu } from 'figma-plugin-ds-svelte';

//You will need to pass and bind an array of menu items to this
//Note: it is up to you to sort this array however you want
let menuItemArray = [
  { 'value': 'item1', 'label': 'Menu item 1', 'group': null, 'selected': false },
  { 'value': 'item2', 'label': 'Menu item 2 ', 'group': null, 'selected': false }
];

//use bind:value, with a var bind the data of the selected item
var selectedItem;
<SelectMenu bind:menuItems={menuItemArray} bind:value={selectedItem}/>
<SelectMenu bind:menuItems={menuItemArray} bind:value={selectedItem} showGroupLabels/>
<SelectMenu bind:menuItems={menuItemArray} bind:value={selectedItem} iconName={IconBlend}/>
<SelectMenu bind:menuItems={menuItemArray} bind:value={selectedItem} disabled/>

Props

Prop Type Options/notes
on:change Func Function to execute on change. Ex: on:change={funcName}
menuItems Var Pass in array of menu item objects. See example above for format. If you want to use option groups, update the group keys to a string.
value Var Bind the value of the selected item to a var. Ex: bind:value={selectedItem}
placeholder String Override default placeholder text with a string when there is no item selected.
showGroupLabels Boolean Default: false; If you are using option groups, this will show the group labels.
disabled Boolean Default: false
macOSBlink Boolean Default: false; Easter egg, old school Mac OS triple blink on select.
iconName Var See Icon component for usage.
iconText String See Icon component for usage.

Switch

import { Switch } from 'figma-plugin-ds-svelte';

//use bind:group, with a var to create a radio group and store the value of selected item
//set value if this var to same value as radio item to set initial selection
var switchValue;
<Switch value="value" bind:checked={switchValue}>Label</Switch>

Props

Prop Type Options/notes
on:change Func Funtion to execute on change. Ex: on:change={funcName}
value Boolean Default: false;
checked Boolean Default: false; You can bind the value when checked to a var. bind:checked={varName}
disabled Boolean Default: false

Textarea

import { Textarea } from 'figma-plugin-ds-svelte';
<Textarea placeholder="Enter some text"></Textarea>

Props

Prop Type Options/notes
on:change Func Function to execute on change. Ex: on:change={funcName}
value String Value of textarea. Can bind to a variable. Ex: bind:value={someVar}
placeholder String Override default placeholder text with a string.
rows Int Default: 2; Number of rows (height) to display.
disabled Boolean Default: false

Type

import { Type } from 'figma-plugin-ds-svelte';
<Type size="large" weight="bold">Content here</Type>

Props

Prop Type Options/notes
size String Default: "small"; Also accepts "xsmall","large", "xlarge"
weight String Default: "normal"; Also accepts "medium","bold"
color String Default: "black8"; Pass the name of any Figma color var to this prop. color="blue", Default color is white when inverse is true and no value specified
inverse Boolean Default: false; Optimizes letter-spacing for light on dark applications.

Tokens

Color

Name Var Type Notes
blue --blue Accent Ex: primary button, hyperlinks, focus/selected states
purple --purple Accent Ex: components/instances
hot-pink --hot-pink Accent Ex: smart selection handles
green --green Accent Ex: Toolbar selections
red --red Accent Ex: Error
yellow --yellow Accent Ex: Caution/warning
black --black Basic foreground Ex: active states
black8 --black8 Basic foreground 80% black, ex: most common black used in UI text and icons
black8-opaque --black8-opaque Basic foreground Opaque version of black8
black3 --black3 Basic foreground 30% black, ex: lower priority messages, disabled states
black3-opaque --black3-opaque Basic foreground Opaque version of black3
white --white Basic foreground Used in same way as black8, but on dark backgrounds
white8 --white8 Basic foreground Rarely used, only in toolbar
white4 --white4 Basic foreground Used in same way as black3, Ex: option group headers in menus
white --white Basic background (Duplicate) White is also the most common background color
grey --grey Basic background Used behind controls in active state
silver --silver Basic background Ex: horizontal separators, default canvas background
hud --hud Basic background Ex: background for menus
toolbar --toolbar Basic background Ex: background for the toolbar
black1 --black1 Special Ex: input placeholder underline, textarea border
blue3 --blue3 Special Ex: text range selection in inputs
purple4 --purple4 Special Ex: disabled components/instances
hover-fill --hover-fill Special Hover state for items without borders, ex: icon button
selection-a --selection-a Special Selected cells, ex: selected top level layer
selection-b --selection-b Special Selected cells, ex: selected child layers
white2 --white2 Special Ex: menu separators

Type

Property Var Value Notes
font-family --font-stack 'Inter', sans-serif Default font everywhere
font-size --font-size-xsmall 11px Most common font size
font-size --font-size-small 12px Used in menus
font-size --font-size-large 13px Rarely used in editor
font-size --font-size-xlarge 14px Rarely used in editor
font-weight --font-weight-normal 400
font-weight --font-weight-medium 500
font-weight --font-weight-bold 600
line-height --font-line-height 16px For use with xsmall and small font sizes
line-height --font-line-height-large 24px For use with large and xlarge font sizes
letter-spacing --font-letter-spacing-pos-xsmall .005em Optimized letter spacing for xsmall text on light background
letter-spacing --font-letter-spacing-neg-xsmall .01em Optimized letter spacing for xsmall text on dark background
letter-spacing --font-letter-spacing-pos-small 0 Optimized letter spacing for small text on light background
letter-spacing --font-letter-spacing-neg-small .005em Optimized letter spacing for small text on dark background
letter-spacing --font-letter-spacing-pos-large -.0025em Optimized letter spacing for large text on light background
letter-spacing --font-letter-spacing-neg-large .0025em Optimized letter spacing for large text on dark background
letter-spacing --font-letter-spacing-pos-xlarge -.001em Optimized letter spacing for xlarge text on light background
letter-spacing --font-letter-spacing-neg-xlarge -.001em Optimized letter spacing for xlarge text on dark background

Border Radius

Var Value Notes
--border-radius-small 2px Ex: menus, input borders, icon button
--border-radius-med 5px Ex: visual bell, toasts
--border-radius-large 6px Ex: buttons

Shadows

Var Notes
--shadow-hud Ex: menus, tooltips, toasts
--shadow-floating-window: Ex: modal, dialog

Sizes

Var Value
--size-xxxsmall 4px
--size-xxsmall 8px
--size-xsmall 16px
--size-small 24px
--size-medium 32px
--size-large 40px
--size-xlarge 48px
--size-xxlarge 64px
--size-huge 80px

About

Figma Plugin DS components made with Svelte

Resources

License

Releases

No releases published

Packages

No packages published