Skip to content

Latest commit

 

History

History
72 lines (58 loc) · 1.61 KB

README.md

File metadata and controls

72 lines (58 loc) · 1.61 KB
Raw

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 awesome work on 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

yarn add figma-ui-kit
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 (
    <div className="figma-light">
      <Stack direction="column" space="medium">
        <Text>Hello Figma plugin</Text>

        <Stack direction="row" space="small">
          <Button>Get started</Button>
          <Button secondary>Go back</Button>
        </Stack>
      </Stack>
    </div>
  )
}

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