• Stars
    star
    119
  • Rank 297,930 (Top 6 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created almost 5 years ago
  • Updated 7 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

React components of Figma design system

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