https://github.com/marcosmoreiraui/figma-to-typescript
This project is a simple tool to extract the Typescript types from all components in a file.
https://github.com/marcosmoreiraui/figma-to-typescript
figma figma-components figma-plugin react typescript
Last synced: 3 months ago
JSON representation
This project is a simple tool to extract the Typescript types from all components in a file.
- Host: GitHub
- URL: https://github.com/marcosmoreiraui/figma-to-typescript
- Owner: marcosmoreiraui
- Created: 2024-02-16T12:05:30.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-02-16T15:25:16.000Z (over 1 year ago)
- Last Synced: 2024-12-28T06:27:55.136Z (5 months ago)
- Topics: figma, figma-components, figma-plugin, react, typescript
- Language: JavaScript
- Homepage:
- Size: 186 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Figma to typescript
This project is a simple tool to extract the Typescript types from all the published components in a file.
## Getting Started
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
### Prerequisites
Add the following environment variables to a `.env` file in the root of the project:
```
FIGMA_FILE_KEY=the_file_key
FIGMA_PERSONAL_ACCESS_TOKEN=your_personal_access_token
```
Get your `FIGMA_FILE_KEY` from the URL of the file you want to extract the components from. It's the last part of the URL, after the `/file/` part.
Get your `FIGMA_PERSONAL_ACCESS_TOKEN` in settings > Personal access token.
### Installing
A step by step series of examples that tell you how to get a development environment running:
$ git clone [repository url]
$ cd [project directory]
$ npm install
### Build
After installing all the prerequisites and setting up, you can run the following command to build the .ts files:
$ npm run build
If everything goes well, you should see a new folder called `types` with all the files with the same name of your components.
## Built With
- [TypeScript](http://www.typescriptlang.org/) - The main programming language
- [dotenv](https://www.npmjs.com/package/dotenv) - Environment variable manager
- [axios](https://axios-http.com/) - Promise based HTTP client for the browser and node.js