Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jb1905/react-figma-ui
🏗️ React implementation for figma-plugin-ds
https://github.com/jb1905/react-figma-ui
components design figma library patterns react system ui
Last synced: 2 months ago
JSON representation
🏗️ React implementation for figma-plugin-ds
- Host: GitHub
- URL: https://github.com/jb1905/react-figma-ui
- Owner: JB1905
- License: mit
- Created: 2020-05-19T20:27:44.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-08-30T04:50:25.000Z (over 1 year ago)
- Last Synced: 2024-10-11T23:16:31.732Z (3 months ago)
- Topics: components, design, figma, library, patterns, react, system, ui
- Language: TypeScript
- Homepage: https://jb1905.github.io/react-figma-ui/
- Size: 2.82 MB
- Stars: 41
- Watchers: 2
- Forks: 7
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# [React Figma UI](https://github.com/JB1905/react-figma-ui)
[](https://www.npmjs.com/package/react-figma-ui)
[](https://www.npmjs.com/package/react-figma-ui)
[](https://www.npmjs.com/package/react-figma-ui)
[](https://codecov.io/gh/JB1905/react-figma-ui)
[](https://app.travis-ci.com/github/JB1905/react-figma-ui)
[](https://bundlephobia.com/result?p=react-figma-ui)
## About
React implementation for [figma-plugin-ds](https://github.com/thomas-lowry/figma-plugin-ds/) by [Tom Lowry](https://github.com/thomas-lowry/)
### Demo
[**Playground – play with the library in Storybook**](https://jb1905.github.io/react-figma-ui/)
### Alternatives
- [react-figma-plugin-ds](https://github.com/alexandrtovmach/react-figma-plugin-ds/) by [Alexandr Tovmach](https://github.com/alexandrtovmach/)
- [Figma Styled Components](https://github.com/jhardy/figma-styled-components/) by [Jared](https://github.com/jhardy/)
- [figma-ui-components](https://github.com/lessmess-dev/figma-ui-components/) by [lessmess](https://github.com/lessmess-dev/)
- [Figma React UI Kit](https://github.com/LiamMartens/figma-react-ui-kit/) by [Liam Martens](https://github.com/LiamMartens/)
## Contents
- [How to Install](#how-to-install)
- [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)
## How to Install
First, install the library in your project by npm:
```sh
$ npm install react-figma-ui
```
Or Yarn:
```sh
$ yarn add react-figma-ui
```
## Components
### Button
To use the button, use the following component. Each button has a destructive option. Tertiary buttons are styled like hyperlinks.
```jsx
import { Button } from 'react-figma-ui';
// Primary
Label
Label
Label
// Secondary
Label
Label
Label
// Tertiary (Hyperlink style button)
Label
Label
Label
```
#### Available options
[HTML button element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes) and dedicated params
| Param | Description |
| ------------- | -------------------------------------------------------------------------------------- |
| `tint` | Display style for button: primary (filled), secondary (outlined), tertiary (hyperlink) |
| `destructive` | Add red destructive variant for actions such as deleting something |
---
### Checkbox
To use the checkbox, use the following component. Remember each checkbox should get a unique ID.
```jsx
import { Checkbox } from 'react-figma-ui';
// Checkbox unchecked
Label
// Checkbox checked
Label
// Checkbox disabled
Label
```
#### Available options
[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params
| Param | Description |
| ----------------------------------------------------------------------------------------------------------------- | ---------------------------- |
| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for checkbox container |
| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes) | Props for label element |
---
### Disclosure
To use a disclosure panel, you must use the following component.
```jsx
import { Disclosure, DisclosureItem } from 'react-figma-ui';
// Example items
const items = [
{ heading: 'Heading 1', content: 'Content 1', id: 1 },
{ heading: 'Heading 2', content: 'Content 2', id: 2 },
{ heading: 'Heading 3', content: 'Content 3', id: 3 },
];
(
)}
/>
```
#### Available options
**Disclosure**
[HTML ul element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params
| Param | Description |
| -------- | ------------------------------- |
| `items` | Array with disclosure items |
| `render` | Render props for DisclosureItem |
**DisclosureItem**
[HTML li element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li#attributes) and dedicated params
| Param | Description |
| --------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |
| `heading` | Heading text value |
| `content` | Content text value |
| `section` | Style label like a heading |
| `expanded` | Add this option to have item expanded on load |
| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for label element |
| [`contentProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for content element |
---
### Icon
To use the icon, use the following component. Apply the appropriate icon name to select the item you wish to use, you can also add option 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)
```jsx
import { Icon } from 'react-figma-ui';
// Icon
// Icon with blue colorName to change color
// Spinner Icon with spinning animation
// Text Icon
W
```
#### Available options
[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params
| Param | Description |
| ------------- | ---------------------------------------------------------------------------------- |
| `iconName` | Specify which icon to use (e.g.: `alert`, `draft`, `settings`) |
| `spin` | Causes the icon to spin in an endless loop (e.g.: loader used with `spinner` icon) |
| `colorName`\* | Pass the name of any Figma color var to this prop (e.g.: `blue`, `black3`) |
\*Colors accepted: `blue`, `purple`, `purple4`, `hot-pink`, `green`, `red`, `yellow`, `black`, `black8`, `black3`, `white`, `white8`, `white4`
[Preview available icons here](https://github.com/thomas-lowry/figma-plugin-ds/#icon)
---
### Icon button
The icon button is essentially a wrapper for the icon component.
```jsx
import { IconButton } from 'react-figma-ui';
// Icon button with a blend icon
// Icon button with selected option
```
#### Available options
[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params
| Param | Description |
| ----------------------------------- | ------------------------------------------------- |
| `selected` | Add this option to have selected style for button |
| [`iconProps`](#available-options-3) | Props for icon component |
---
### Input
To use the input, use the following component.
```jsx
import { Input } from 'react-figma-ui';
// Input with placeholder
// Input with initial value
// Disabled input
// Input with icon
```
#### Available options
[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params
| Param | Description |
| ----------------------------------------------------------------------------------------------------------------- | -------------------------- |
| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for switch container |
| [`iconProps`](#available-options-3) | Props for icon component |
---
### Labels and sections
To use a label or section, use following components.
```jsx
import { Label, SectionTitle } from 'react-figma-ui';
// Label
Label
// Section title
Section title
```
#### Available options
[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes)
---
### Onboarding tip
To create an onboarding tip, use the following component.
```jsx
import { OnboardingTip } from 'react-figma-ui';
Onboarding tip goes here.
```
#### Available options
[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params
| Param | Description |
| ----------------------------------------------------------------------------------------------------------------- | -------------------------- |
| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for switch container |
| [`iconProps`](#available-options-3) | Props for icon component |
---
### Radio button
To create an radio button, use the following component. 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.
```jsx
import { Radio } from 'react-figma-ui';
// Radio button
Radio button
// Radio button checked
Radio button
// Radio button disabled
Radio button
```
#### Available options
[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params
| Param | Description |
| ----------------------------------------------------------------------------------------------------------------- | ------------------------- |
| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for radio container |
| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes) | Props for label element |
---
### Select menu
To create an select menu, use following components.
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.
```jsx
import { SelectMenu, SelectMenuOption } from 'react-figma-ui';
// Example options
const options = [
{ value: 1, label: 'Option 1' },
{ value: 2, label: 'Option 2' },
{ value: 3, label: 'Option 3' },
];
() => (
(
{label}
)}
/>
);
```
#### Available options
**SelectMenu**
[HTML select element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params
| Param | Description |
| --------- | --------------------------------- |
| `options` | Array with select menu options |
| `render` | Render props for SelectMenuOption |
**SelectMenuOption**
[HTML option element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes)
---
### Switch
To use the switch, use the following component. Remember each switch should get a unique ID that is referenced in the label. This ensures the switch and the entire label are clickable.
```jsx
import { Switch } from 'react-figma-ui';
// Switch
Label
// Switch checked
Label
// Switch disabled
Label
```
#### Available options
[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params
| Param | Description |
| ----------------------------------------------------------------------------------------------------------------- | -------------------------- |
| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for switch container |
| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes) | Props for label element |
---
### Textarea
To use the textarea, use the following component.
```jsx
import { Textarea } from 'react-figma-ui';
// Textarea
// Textarea disabled
```
#### Available options
[HTML textarea element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes)
---
### Type
To use the typography that is styled like it is in the Figma UI, use the following component plus additional options 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.
```jsx
import { Type } from 'react-figma-ui';
UI11, size: xsmall (default) weight: normal, positive
UI13, size: large, weight: bold, positive
UI12, size: large, weight: medium, negative
```
#### Available options
[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params
| Param | Description |
| --------- | --------------------------------------------------------------------------------------------------- |
| `size` | Font size: **small** - 12px, **large** - 13px, **xlarge** - 14px |
| `weight` | Font weight: medium, bold |
| `inverse` | Inverted (negative) application where light text is on dark background with increased letterspacing |
_Defaults: Font size 11px, normal weight, positive application_
## License
This project is licensed under the MIT License © 2020-present Jakub Biesiada