figma-ui-components

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

figma-ui-components

★ 39 Open GitHub ↗

Unofficial set of Figma UI components

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# figma-ui-components

[![npm version](https://img.shields.io/npm/v/figma-ui-components.svg)](https://www.npmjs.com/package/figma-ui-components)

An unofficial set of Figma UI components for creating plugins and other purposes. 
Based on [Tom Lowry's Figma UI JS/CSS files](https://www.dropbox.com/s/iar45s6h22nupom/figma-plugin-ui-css-0.5.zip?dl=0).

* Uses React ⚛️, styled-components 💅, TypeScript.
* Stateful components, fully controlled outside.
* All components showed at [Storybook](https://figma-ui.lessmess.dev/).

## Installation

Install it with yarn:

```
yarn add figma-ui-components
```

Or with npm:

```
npm i figma-ui-components --save
```

## Usage

### Global styles

```javascript
import * as React from 'react'
import {TypographyStyles, BaseStyles} from "figma-ui-components"

const App = () => {
    return <>
        <BaseStyles />
        <TypographyStyles />
        ...
    </>
};
```

### Components

```javascript
import * as React from 'react'
import {PrimaryButton, SecondaryButton} from "figma-ui-components"

export const Component = () => {
    return <>
        <PrimaryButton onClick={...}>Create</PrimaryButton>
        <SecondaryButton onClick={...}>Cancel</SecondaryButton>
    </>
};
```

## Sponsored

figma-ui-components

Today's picks

Was this content helpful?

Recent Feedback

figma-ui-components

Today's picks

Was this content helpful?

Recent Feedback

Download README