Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kazuyaseki/code-transformer-for-figma

Figma plugin to generate code using OpenAI API
https://github.com/kazuyaseki/code-transformer-for-figma

figma openai openai-api plugin

Last synced: 3 days ago
JSON representation

Figma plugin to generate code using OpenAI API

Host: GitHub
URL: https://github.com/kazuyaseki/code-transformer-for-figma
Owner: kazuyaseki
Created: 2023-04-20T15:15:23.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2024-11-12T19:20:56.000Z (8 days ago)
Last Synced: 2024-11-12T20:24:45.288Z (8 days ago)
Topics: figma, openai, openai-api, plugin
Language: TypeScript
Homepage:
Size: 492 KB
Stars: 64
Watchers: 2
Forks: 17
Open Issues: 11
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

[![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://github.com/kazuyaseki/figma-to-react/graphs/commit-activity)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/kazuyaseki/figma-to-react/pulls)
[![Tweeting](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=figma-code-transformer%20is%20awesome%20https://github.com/kazuyaseki/figma-code-transformer/)

Figma Code Transformer logo

# code-transformer for Figma

Figma Plugin to generate code using OpenAI API.

NOTE: as of right now, OpenAI API does not seem to generate code in good quality with gpt-3.5-turbo.

https://user-images.githubusercontent.com/6080698/234930449-b5b0f3cb-2d82-454c-be57-4dd4f969942f.mp4

## To Develop

First create .env file and set your OpenAI API key and GitHub API key, repository owner and name where you would want to push result code.

```
$ cp .env.sample .env
```

Build Plugin with the following commands

```
$ npm install --legacy-peer-deps
$ npm run build
```

To watch for code changes and rebuild the plugin automatically:

```
$ npm run watch
```

Then install the plugin in Figma

1. In the Figma desktop app, open a Figma document.
2. Search for and run `Import plugin from manifest…` via the Quick Actions search bar.
3. Select the `manifest.json` file that was generated by the `build` script.

## Resources

- [Plugin API docs](https://figma.com/plugin-docs/)
- [`figma/plugin-samples`](https://github.com/figma/plugin-samples#readme)

## Credits

This plugin is made with [Create Figma Plugin](https://yuanqing.github.io/create-figma-plugin/)

This plugin is sponsered by [Gaudiy](https://gaudiy.com/)