figma-plugin-ds-svelte v1.4.3

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
• Checkbox
• Disclosure panel
• 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

Checkbox

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

<Checkbox>Label</Checkbox>
<Checkbox checked>Label</Checkbox>
<Checkbox disabled>Label</Checkbox>

Props

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

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

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

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

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

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

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

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

Textarea

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

<Textarea placeholder="Enter some text"></Textarea>

Props

Type

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

<Type size="large" weight="bold">Content here</Type>

Props

Tokens

Color

Type

Border Radius

Shadows

Sizes