Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thomas-lowry/figma-plugin-ds
A small lightweight design system for use in Figma Plugins
https://github.com/thomas-lowry/figma-plugin-ds
figma-plugins
Last synced: about 1 month ago
JSON representation
A small lightweight design system for use in Figma Plugins
- Host: GitHub
- URL: https://github.com/thomas-lowry/figma-plugin-ds
- Owner: thomas-lowry
- License: mit
- Created: 2019-07-29T02:34:27.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-07-02T01:20:32.000Z (4 months ago)
- Last Synced: 2024-09-29T06:01:28.308Z (about 1 month ago)
- Topics: figma-plugins
- Language: SCSS
- Homepage:
- Size: 404 KB
- Stars: 696
- Watchers: 16
- Forks: 71
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - figma-plugin-ds - lowry | 334 | (SCSS)
- awesome-figma - figma-plugin-ds - A small lightweight design system for use in Figma Plugins. (Templates & UI Kits)
README
# Figma Plugin DS
A lightweight UI library for creating Figma plugins.
## Contents
* [Contents](#contents)
* [Intro](#intro)
* [Getting started](#getting-started)
* [Roadmap](#roadmap)
* [Components](#components)
+ [Button](#button)
+ [Checkbox](#checkbox)
+ [Disclosure](#disclosure)
+ [Icon](#icon)
+ [Icon button](#icon-button)
+ [Input](#input)
+ [Labels and sections](#labels-and-sections)
+ [Onboarding tip](#onboarding-tip)
+ [Radio button](#radio-button)
+ [Select menu](#select-menu)
+ [Switch](#switch)
+ [Textarea](#textarea)
+ [Type](#type)
## 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.
```HTML
```
```Javascript
//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)**
```HTML
selectMenu.init(); //initiates the select menu component
disclosure.init(); //initiates the disclosure component
<script>
```
**Scripts: IIFE**
```HTML
<!-- Standard link tag-->
<script src="../node_modules/figma-plugin-ds/dist/iife/figma-plugin-ds.js">
```
**Scripts: ES6 Modules**
```Javascript
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.
```HTML
Label
Label
Label
Label
Label
Label
Label
Label
Label
```
**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.
```HTML
Label
Label
Label
```
---
### 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.
```HTML
-
Disclosure heading
Panel content here
```
To initialize with Javascript:
```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)
```HTML
```
**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 |
|----------------------------------------------------------------------------------------|---------------------------------------|
|  | `icon--adjust` |
|  | `icon--alert` |
|  | `icon--angle` |
|  | `icon--arrow-left-right` |
|  | `icon--updown` |
|  | `icon--auto-layout-horizontal` |
|  | `icon--auto-layout-vertical` |
|  | `icon--back` |
|  | `icon--blend-empty` |
|  | `icon--blend` |
|  | `icon--break` |
|  | `icon--caret-down` |
|  | `icon--caret-left` |
|  | `icon--caret-right` |
|  | `icon--caret-up` |
|  | `icon--check` |
|  | `icon--close` |
|  | `icon--component` |
|  | `icon--corner-radius` |
|  | `icon--corners` |
|  | `icon--distribute-horizontal-spacing` |
|  | `icon--distribute-vertical-spacing` |
|  | `icon--draft` |
|  | `icon--effects` |
|  | `icon--ellipses` |
|  | `icon--eyedropper` |
|  | `icon--forward` |
|  | `icon--frame` |
|  | `icon--group` |
|  | `icon--hidden` |
|  | `icon--horizontal-padding` |
|  | `icon--hyperlink` |
|  | `icon--image` |
|  | `icon--instance` |
|  | `icon--key` |
|  | `icon--layout-align-bottom` |
|  | `icon--align-horizontal-centers` |
|  | `icon--align-left` |
|  | `icon--align-right` |
|  | `icon--align-top` |
|  | `icon--align-vertical-centers` |
|  | `icon--layout-grid-columns` |
|  | `icon--layout-grid-rows` |
|  | `icon--layout-grid-uniform` |
|  | `icon--library` |
|  | `icon--link-broken` |
|  | `icon--link-connected` |
|  | `icon--list-detailed` |
|  | `icon--list-tile` |
|  | `icon--list` |
|  | `icon--lock-off` |
|  | `icon--lock-on` |
|  | `icon--minus` |
|  | `icon--play` |
|  | `icon--plus` |
|  | `icon--random` |
|  | `icon--recent` |
|  | `icon--resize-to-fit` |
|  | `icon--resolve-filled` |
|  | `icon--resolve` |
|  | `icon--reverse` |
|  | `icon--search-large` |
|  | `icon--search` |
|  | `icon--settings` |
|  | `icon--share` |
|  | `icon--smiley` |
|  | `icon--sort-alpha-asc` |
|  | `icon--sort-alpha-dsc` |
|  | `icon--sort-top-bottom` |
|  | `icon--spacing` |
|  | `icon--spinner` |
|  | `icon--star-off` |
|  | `icon--star-on` |
|  | `icon--stroke-weight` |
|  | `icon--styles` |
|  | `icon--swap` |
|  | `icon--theme` |
|  | `icon--tidy-up-grid` |
|  | `icon--tidy-up-list-horizontal` |
|  | `icon--tidy-up-list-vertical` |
|  | `icon--timer` |
|  | `icon--trash` |
|  | `icon--vertical-padding` |
|  | `icon--visible` |
|  | `icon--warning-large` |
|  | `icon--warning` |
---
### Icon button
The icon button is essentially a wrapper for the icon component. Refer to the icon component above for its usage.
```HTML
```
---
### Input
To use the input, use the following markup. You can also insert an icon into the input (see Icon component for usage).
```HTML
```
**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.
```HTML
```
### 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).
```HTML
```
---
### 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.
```HTML
Radio button
Radio button
Radio button
```
---
### 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.
```HTML
Item 1
Item 2
Item 3
Please make a selection
Item 2
Item 3
Item 1
Item 2
Item 3
```
To initialize with Javascript:
```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.
```HTML
Label
Label
Label
```
---
### Textarea
To use the textarea, use the following HTML markup.
```HTML
Initial value
Initial value
```
---
### 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.
```HTML
```
**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_