Skip to content

alexandrtovmach/react-figma-plugin-ds

Repository files navigation

react-figma-plugin-ds

npm npm bundle size npm

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