Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/greeeg/figma-ui-kit
A set of React components that replicate the Figma UI for plugins
https://github.com/greeeg/figma-ui-kit
Last synced: about 1 month ago
JSON representation
A set of React components that replicate the Figma UI for plugins
- Host: GitHub
- URL: https://github.com/greeeg/figma-ui-kit
- Owner: greeeg
- License: mit
- Created: 2023-03-12T08:48:30.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-11-03T05:14:10.000Z (about 2 months ago)
- Last Synced: 2024-11-05T15:57:25.335Z (about 2 months ago)
- Language: TypeScript
- Size: 226 KB
- Stars: 8
- Watchers: 1
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Figma UI kit
> A set of React components that replicate the Figma UI for plugins
## The problem
As stated by the Figma team in their developers docs, _it's good practice to make a plugin's UI consistent, to the degree that it is possible, with the rest of the Figma UI. This almost always leads to a better experience for users_.
However, there's no official set of React components to quickly build Figma plugins.
This project is a fork of [@yuanqinglim](https://twitter.com/yuanqinglim) awesome work on [`create-figma-plugin`](https://github.com/yuanqing/create-figma-plugin).
It intends to extract the UI aspect of it while making it compatible with React.js (originally made with Preact).
## Getting started
```sh
yarn add figma-ui-kit
```
```tsx
import React from 'react'
import { Stack, Text, Button } from 'figma-ui-kit'
import 'figma-ui-kit/lib/css/theme.css'
import 'figma-ui-kit/lib/css/base.css'
import 'figma-ui-kit/lib/css/menu.module.css'
const App = () => {
return (
Hello Figma plugin
Get started
Go back
)
}
```
## Supported components
- Box
- Banner
- Button
- Checkbox
- Disclosure
- Divider
- Dropdown
- File upload
- Icon
- Icon button
- Icon toggle button
- Layer
- Loading indicator
- Preview
- Properties section
- Radio buttons
- Range slider
- Search textbox
- Section
- Segmented control
- Selectable item
- Stack
- Tabs
- Text
- Textbox
- Toggle