Identity is a design system generator by Figr Design.

Identity has a figma plugin using which you can generate an entire design system in figma.

Identity Code Library offer production ready React component for the components that we offer in the design system generated via our Identity Figma plugin.

Installation

npm i @figr-design/identity-code-lib

yarn add @figr-design/identity-code-lib

How to use?

Step 1

Generate a design system via our figma plugin - Identity.

Side note: If you just want to try our components before creating a full design system then please visit our docs and follow the instruction mentioned there.

Step 2

Copy the CSS styles from our plugin and paste in in your root css file.

If you don't have an root CSS file then follow these steps:

1: cd /path/to/your-project-directory

2: touch index.css

3: Open main.tsx or root component and import the root css file in it.

4: import "./index.css"

5: Paste your copied CSS styles in "index.css".

Step 3

Use your required components.

import { Button } from "@figr-design/identity-code-lib";
import "@figr-design/identity-code-lib/dist/index.css";

export default function App() {
  return <Button>Submit</Button>;
}

License

This project is licensed under the terms of the MIT license.