react-figma-plugin-ds
React components of Figma design system based on thomas-lowry/figma-plugin-ds, and implements UI2: Figma Design System.
π Get Started
Follow these steps to start using React Figma components:
-
Installation:
# with npm npm i react-figma-plugin-ds # with yarn yarn add react-figma-plugin-ds
-
Usage:
import React from "react"; import { Disclosure, Tip, Title, Checkbox, Button } from "react-figma-plugin-ds"; import "react-figma-plugin-ds/figma-plugin-ds.css"; export default (props) => { return ( <> <Title size="large" weight="bold"> My plugin </Title> <Disclosure label="Getting started" isDefaultExpanded> <Tip iconName="resolve">Install</Tip> <Tip iconName="play">Start</Tip> <Tip iconName="library">Read the docs</Tip> </Disclosure> <Checkbox label="I promise to star this repo!" /> <Button>Start</Button> </> ); };
-
Discover all components with properties on demo page. Each of that has playground and as result in top right corner you can easily copy final code.