alexandrtovmach / react-figma-plugin-ds

React components of Figma design system

react-figma-plugin-ds

React components of Figma design system based on thomas-lowry/figma-plugin-ds, and implements UI2: Figma Design System.

DEMO HERE

🚀 Get Started

Follow these steps to start using React Figma components:

1. Installation:

   # with npm
   npm i react-figma-plugin-ds
   
   # with yarn
   yarn add react-figma-plugin-ds

2. 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>
       </>
     );
   };

3. 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.

📝 License

MIT