react-figma-plugin-ds

React ui framework based on Figma design system

Usage no npm install needed!

<script type="module">
  import reactFigmaPluginDs from 'https://cdn.skypack.dev/react-figma-plugin-ds';
</script>

README

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