-Most _design to code_ plugins are bad, some are even paid. This project aims to raise the bar by generating **responsive** layouts in [Tailwind](https://tailwindcss.com/), [Flutter](https://flutter.github.io/) and [SwiftUI](https://developer.apple.com/xcode/swiftui/). The plan is to eventually add support for [Jetpack Compose](https://developer.android.com/jetpack/compose) and possibly standard HTML or other frameworks like [React Native](https://reactnative.dev/), [Bootstrap](https://getbootstrap.com/) or [Fluent](https://www.microsoft.com/design/fluent/). Feedback, ideas and partnerships are appreciated!
+Converting 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.
## How it works
-This plugin takes an unconventional approach to improve code quality: it optimizes the layout before the conversion to code even begins. The standard Figma [Nodes](https://www.figma.com/plugin-docs/api/nodes/) (what represents each layer) is a joy to work with, but it can't modify a layer without modifying the user project. For this reason, I decided to virtualize it, remaking the official implementation and naming them `AltNodes`. During the process of converting a `Node` into an `AltNode`, the plugin does the following:
+The plugin uses a sophisticated multi-step process to transform your Figma designs into clean, optimized code:
+
+1. **Node Conversion**: First, the plugin converts Figma's native nodes into JSON representations, preserving all necessary properties while adding optimizations and parent references.
+
+2. **Intermediate Representation**: The JSON nodes are then transformed into `AltNodes` - a custom virtual representation that can be manipulated without affecting your original design.
+
+3. **Layout Optimization**: The plugin analyzes and optimizes layouts, detecting patterns like auto-layouts, responsive constraints and color variables.
+
+4. **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.
-That process can also be seen as an [Intermediate Representation](https://en.wikipedia.org/wiki/Intermediate_representation) and might allow this plugin to, one day, live outside Figma.
+This intermediate representation approach allows for sophisticated transformations and optimizations before any code is generated, resulting in cleaner, more maintainable output.
## Hard cases
-When finding the unknown (a `Group` or `Frame` with more than one child and no vertical or horizontal alignment), Tailwind mode uses [insets](https://tailwindcss.com/docs/top-right-bottom-left/#app) for best cases and `left`, `top` from standard CSS for the worst cases. Flutter mode uses `Stack` and `Positioned.fill`. Both are usually not recommended and can easily defeat the responsiveness. In many scenarios, just wrapping some elements in a `Group` or `Frame` can solve:
+Converting visual designs to code inevitably encounters complex edge cases. Here are some challenges the plugin handles:
+
+1. **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.
+
+2. **Color Variables**: The plugin detects and processes color variables, allowing for theme-consistent output.
+
+3. **Gradients and Effects**: Different frameworks handle gradients and effects in unique ways, requiring specialized conversion logic.
@@ -35,24 +49,80 @@ When finding the unknown (a `Group` or `Frame` with more than one child and no v
### Todo
-- Vectors (tricky in HTML, unsupported in Flutter)
-- Images (they are local, how to support them?)
-- Line/Star/Polygon (todo. Rectangle and Ellipse were prioritized and are more common)
-- The source code is fully commented and there are more than 30 "todo"s there
+- Vectors (possible to enable in HTML and Tailwind)
+- Images (possible to enable to inline them in HTML and Tailwind)
+- Line/Star/Polygon
-### Tailwind limitations
+## How to build the project
-- **Width:** Tailwind has a maximum width of 384px. If an item passes this, the width will be set to `w-full` (unless it is already relative like `w-1/2`, `w-1/3`, etc). This is usually a feature, but be careful: if most layers in your project are larger than 384px, the plugin's result might be less than optimal.
+### Package Manager
-### Flutter limits and ideas
+The project is configured for [pnpm](https://pnpm.io/). To install, see the [installation notes for pnpm](https://pnpm.io/installation).
-- **Stack:** in some simpler cases, a `Stack` could be replaced with a `Container` and a `BoxDecoration`. Discover those cases and optimize them.
-- **Material Styles**: text could be matched to existing Material styles (like outputting `Headline6` when text size is 20).
-- **Identify Buttons**: the plugin could identify specific buttons and output them instead of always using `Container` or `Material`.
+### Monorepo
-## How to build the project
+The plugin is organized as a monorepo. There are several packages:
+
+- `packages/backend` - Contains the business logic that reads the Figma API and converts nodes
+- `packages/plugin-ui` - Contains the common UI for the plugin
+- `packages/eslint-config-custom` - Config file for ESLint
+- `packages/tsconfig` - Collection of TSConfig files used throughout the project
+
+- `apps/plugin` - This is the actual plugin assembled from the parts in `backend` & `plugin-ui`. Within this folder it's divided between:
+ - `plugin-src` - loads from `backend` and compiles to `code.js`
+ - `ui-src` - loads the common `plugin-ui` and compiles to `index.html`
+- `apps/debug` - This is a debug mode plugin that is a more convenient way to see all the UI elements.
+
+### Development Workflow
+
+The 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.
+
+#### Running the Project
+
+You have two main options for development:
+
+1. **Root development mode** (includes debug UI):
+
+ ```bash
+ pnpm dev
+ ```
+
+ 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`.
+
+2. **Plugin-only development mode**:
+
+ ```bash
+ cd apps/plugin
+ pnpm dev
+ ```
+
+ This focuses only on the plugin without the Next.js debug UI. Use this when you're making changes specifically to the plugin.
+
+#### Where to Make Changes
+
+Most of your development work will happen in these directories:
+
+- `packages/backend` - For plugin backend
+- `packages/plugin-ui` - For plugin UI
+- `apps/plugin/` - The main plugin result that combines the backend and UI and is called by Figma.
+
+You'll rarely need to modify files directly in the `apps/` directory, as they mostly contain build configuration.
+
+#### Commands
+
+`pnpm run ...`
+
+- `dev` - runs the app in dev mode. This can be run in the Figma editor.
+- `build` - builds the project for production
+- `build:watch` - builds and watches for changes
+- `lint` - runs ESLint
+- `format` - formats with prettier (warning: may edit files!)
+
+#### Debug mode
+
+When running the `dev` task, you can open `http://localhost:3000` to see the debug version of the UI.
-The project is configured to be built with Webpack or Rollup. The author couldn't find a way to correctly configure Svelte in Webpack, so Rollup was added. But Rollup is a lot less stable than Webpack and crashes regularly in watch mode when editing Typescript files. So, if you are going to work with Typescript only, I recommend sticking with Webpack. If you are going to make changes in the UI, you **need** to use Rollup for now.
+username
-gradient
-username
-+ Preview your Figma to Code plugin in both light and dark modes +
+ +Debug Mode
- - -Nothing is selected
-Try selecting a layer, any layer
-- Code -
- -- Learn how to use our Figma plugin and explore its features in detail by - visiting our documentation website. -
- - Visit Documentation Website → - -+ This plugin is completely private. All of your design data is + processed locally in your browser and never leaves your computer. + No analytics, no data collection, no tracking. +
++ Figma to Code is completely open-source. Contributions, bug + reports, and feature requests are welcome! +
+ ++ Have feedback, questions, or need help? Open a GitHub issue: +
+ ++ Having an issue? Help me debug by copying the JSON of your + selected elements. This can be attached when reporting issues. +
+ + + {/* Hidden setting for using old plugin version */} ++ The new version is up to 100x faster, but might still cause some + issues. If you encounter problems, you can switch to the old + version (and please report issues so they can be fixed). +
++ © {new Date().getFullYear()} Bernardo Ferrari. All rights reserved. +
++ Code +
+ {!isCodeEmpty && ( ++ {selectedFramework} Options +
+ {selectableSettingsFiltered.map((preference) => { + // Regular toggle buttons for other options + return ( +