https://github.com/jhardy/figma-styled-components

Figma UI styled components
https://github.com/jhardy/figma-styled-components

Last synced: 3 months ago
JSON representation

Figma UI styled components

• Host: GitHub
• URL: https://github.com/jhardy/figma-styled-components
• Owner: jhardy
• License: isc
• Created: 2019-07-31T16:40:18.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T16:18:49.000Z (over 1 year ago)
• Last Synced: 2023-11-20T16:22:12.716Z (8 months ago)
• Language: TypeScript
• Homepage: https://figma-styled-components.netlify.com/
• Size: 9.42 MB
• Stars: 58
• Watchers: 2
• Forks: 6
• Open Issues: 26
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELONG.MD
  • License: LICENSE

Lists

• awesome-figma - figma-styled-components - Figma UI styled components. (Templates & UI Kits)

README

        
# Figma Styled Components

A set of styled components modeled after the Figma UI

![image](https://user-images.githubusercontent.com/170681/62256697-2b65f500-b3b7-11e9-9937-7673ab072c84.png)

## Usage

```npm i figma-styled-components --save```

To test this library I've created this Figma plugin: [fig-ui](https://github.com/jhardy/fig-ui), that uses the components to recreate the Figma sidebar. You can clone the repo and checkout the code to see some example of the components in an actual Figma plugin.

```

import {Button, Checkbox, Input, Label, SectionTitle, Select, Switch, Text} from 'figma-styled-components`

 I am a button

...

```

## Documentation

Current documentation is in [storybook project here](https://determined-borg-d1ccaa.netlify.com/)

#### Locally

Install dependency with `yarn` and then run `yarn storybook` to build the storybook for this project

##### Build

You can build the project with `yarn build`

### Todo

* Refactor to functional components

* Refactor select, handle default option better,

* Document component interfaces better, with code examples (maybe switch away from storybook)

* Expand demo plugin that uses components

* Use a theme wrapper

* Handle OptionStrip default selection better

* Tabs

* Decide if Text components should accept color

* Select with Icon, in Select trigger as well as in select option