{"id":14956365,"url":"https://github.com/bernaferrari/figmatocode","last_synced_at":"2025-05-13T21:04:38.335Z","repository":{"id":38363125,"uuid":"273585960","full_name":"bernaferrari/FigmaToCode","owner":"bernaferrari","description":"Generate responsive pages and apps on HTML, Tailwind, Flutter and SwiftUI.","archived":false,"fork":false,"pushed_at":"2025-04-24T23:50:52.000Z","size":12758,"stargazers_count":4126,"open_issues_count":42,"forks_count":363,"subscribers_count":56,"default_branch":"main","last_synced_at":"2025-04-28T12:13:42.776Z","etag":null,"topics":["conversion","figma","figma-plugins","flutter","html","responsive","svelte","swift","swiftui","tailwind","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"https://www.figma.com/community/plugin/842128343887142055","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bernaferrari.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-06-19T21:02:32.000Z","updated_at":"2025-04-27T11:25:00.000Z","dependencies_parsed_at":"2024-07-23T04:24:34.964Z","dependency_job_id":"79802e38-4009-4273-8a3a-c025db924455","html_url":"https://github.com/bernaferrari/FigmaToCode","commit_stats":{"total_commits":224,"total_committers":13,"mean_commits":17.23076923076923,"dds":0.0892857142857143,"last_synced_commit":"a783b5c8cab4e88a98e8988eb921dcab473e2153"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bernaferrari%2FFigmaToCode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bernaferrari%2FFigmaToCode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bernaferrari%2FFigmaToCode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bernaferrari%2FFigmaToCode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bernaferrari","download_url":"https://codeload.github.com/bernaferrari/FigmaToCode/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251311332,"owners_count":21569009,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["conversion","figma","figma-plugins","flutter","html","responsive","svelte","swift","swiftui","tailwind","tailwindcss","typescript"],"created_at":"2024-09-24T13:12:53.830Z","updated_at":"2025-04-28T12:13:53.916Z","avatar_url":"https://github.com/bernaferrari.png","language":"TypeScript","readme":"\u003c!-- \u003cp align=\"center\"\u003e\u003cimg src=\"assets/icon_256.png\" alt=\"Figma to Code\" height=\"128px\"\u003e\u003c/p\u003e --\u003e\n\n[![Figma to Code](assets/git_preview.png)](https://www.figma.com/community/plugin/842128343887142055)\n\n# Figma to Code\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://github.com/bernaferrari/FigmaToCode/actions/\"\u003e\u003cimg src=\"https://github.com/bernaferrari/FigmaToCode/workflows/CI/badge.svg\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://codecov.io/gh/bernaferrari/FigmaToCode\"\u003e\u003cimg src=\"https://codecov.io/gh/bernaferrari/FigmaToCode/branch/master/graph/badge.svg\" /\u003e\u003c/a\u003e\n\u003ca href=\"http://twitter.com/bernaferrari\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/Twitter-@bernaferrari-brightgreen.svg?style=flat\" alt=\"Twitter\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\u003cp align=\"center\"\u003e\n\u003ca href=\"https://www.figma.com/community/plugin/842128343887142055\"\u003e\u003cimg src=\"assets/badge.png\" height=\"60\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nConverting Figma designs into usable code can be a challenge, often requiring time-consuming manual work. Figma to Code simplifies that process. This plugin generates responsive layouts in `HTML`, `React (JSX)`, `Svelte`, `styled-components`, `Tailwind`, `Flutter`, and `SwiftUI` directly from your designs. Your feedback and ideas are always welcome.\n\n![Gif showing the conversion](assets/lossy_gif.gif)\n\n## How it works\n\nThe plugin uses a sophisticated multi-step process to transform your Figma designs into clean, optimized code:\n\n1. **Node Conversion**: First, the plugin converts Figma's native nodes into JSON representations, preserving all necessary properties while adding optimizations and parent references.\n\n2. **Intermediate Representation**: The JSON nodes are then transformed into `AltNodes` - a custom virtual representation that can be manipulated without affecting your original design.\n\n3. **Layout Optimization**: The plugin analyzes and optimizes layouts, detecting patterns like auto-layouts, responsive constraints and color variables.\n\n4. **Code Generation**: Finally, the optimized structure is transformed into the target framework's code, with special handling for each framework's unique patterns and best practices. If a feature is unsupported, the plugin will provide a warning.\n\n![Conversion Workflow](assets/workflow.png)\n\nThis intermediate representation approach allows for sophisticated transformations and optimizations before any code is generated, resulting in cleaner, more maintainable output.\n\n## Hard cases\n\nConverting visual designs to code inevitably encounters complex edge cases. Here are some challenges the plugin handles:\n\n1. **Complex Layouts**: When working with mixed positioning (absolute + auto-layout), the plugin has to make intelligent decisions about how to structure the resulting code. It detects parent-child relationships and z-index ordering to produce the most accurate representation.\n\n2. **Color Variables**: The plugin detects and processes color variables, allowing for theme-consistent output.\n\n3. **Gradients and Effects**: Different frameworks handle gradients and effects in unique ways, requiring specialized conversion logic.\n\n![Conversion Workflow](assets/examples.png)\n\n**Tip**: Instead of selecting the whole page, you can also select individual items. This can be useful for both debugging and componentization. For example: you can use the plugin to generate the code of a single element and then replicate it using a for-loop.\n\n### Todo\n\n- Vectors (possible to enable in HTML and Tailwind)\n- Images (possible to enable to inline them in HTML and Tailwind)\n- Line/Star/Polygon\n\n## How to build the project\n\n### Package Manager\n\nThe project is configured for [pnpm](https://pnpm.io/). To install, see the [installation notes for pnpm](https://pnpm.io/installation).\n\n### Monorepo\n\nThe plugin is organized as a monorepo. There are several packages:\n\n- `packages/backend` - Contains the business logic that reads the Figma API and converts nodes\n- `packages/plugin-ui` - Contains the common UI for the plugin\n- `packages/eslint-config-custom` - Config file for ESLint\n- `packages/tsconfig` - Collection of TSConfig files used throughout the project\n\n- `apps/plugin` - This is the actual plugin assembled from the parts in `backend` \u0026 `plugin-ui`. Within this folder it's divided between:\n  - `plugin-src` - loads from `backend` and compiles to `code.js`\n  - `ui-src` - loads the common `plugin-ui` and compiles to `index.html`\n- `apps/debug` - This is a debug mode plugin that is a more convenient way to see all the UI elements.\n\n### Development Workflow\n\nThe project uses [Turborepo](https://turborepo.com/) for managing the monorepo, and each package is compiled using [esbuild](https://esbuild.github.io/) for fast development cycles. Only modified files are recompiled when changes are made, making the development process more efficient.\n\n#### Running the Project\n\nYou have two main options for development:\n\n1. **Root development mode** (includes debug UI):\n\n   ```bash\n   pnpm dev\n   ```\n\n   This runs the plugin in dev mode and also starts a Next.js server for the debug UI. You can access the debug UI at `http://localhost:3000`.\n\n2. **Plugin-only development mode**:\n\n   ```bash\n   cd apps/plugin\n   pnpm dev\n   ```\n\n   This focuses only on the plugin without the Next.js debug UI. Use this when you're making changes specifically to the plugin.\n\n#### Where to Make Changes\n\nMost of your development work will happen in these directories:\n\n- `packages/backend` - For plugin backend\n- `packages/plugin-ui` - For plugin UI\n- `apps/plugin/` - The main plugin result that combines the backend and UI and is called by Figma.\n\nYou'll rarely need to modify files directly in the `apps/` directory, as they mostly contain build configuration.\n\n#### Commands\n\n`pnpm run ...`\n\n- `dev` - runs the app in dev mode. This can be run in the Figma editor.\n- `build` - builds the project for production\n- `build:watch` - builds and watches for changes\n- `lint` - runs ESLint\n- `format` - formats with prettier (warning: may edit files!)\n\n#### Debug mode\n\nWhen running the `dev` task, you can open `http://localhost:3000` to see the debug version of the UI.\n\n\u003cimg width=\"600\" alt=\"Screenshot 2024-12-13 at 16 26 43\" src=\"https://github.com/user-attachments/assets/427fb066-70e1-47bd-8718-51f7f4d83e35\" /\u003e\n\n## Issues\n\nThe Figma file for this README and icon is also open and welcome to changes! [Check it here.](https://www.figma.com/file/8buWpm6Mpq4yK9MhbkcdJB/Figma-to-Code)\n\nI took decisions thinking about how it would benefit the majority of people, but I can (and probably will!) be wrong many times. Found a bug? Have an idea for an improvement? Feel free to [add an issue](../../issues) or email me. Pull requests are also more than welcome.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbernaferrari%2Ffigmatocode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbernaferrari%2Ffigmatocode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbernaferrari%2Ffigmatocode/lists"}