@tokilabs/figma-plugin-ds-svelte

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

• Figma Plugin DS Svelte
  • Installation
  • To use
  • Components
    • Button
    • Checkbox
    • Disclosure
    • Icon
    • Icon button
    • Input
    • Labels and sections
    • Onboarding tip
    • Radio button
    • Select menu
    • Switch
    • Textarea
    • Type
  • Tokens

---

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