You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
description: "If applicable, add screenshots or screen recordings to help explain the issue."
53
-
placeholder: "Drag and drop images here or paste them from your clipboard."
55
+
description: "If applicable, add screenshots or provide links to videos to help explain the issue. You can drag and drop images here or paste them from your clipboard."
56
+
placeholder: "Drag and drop images or videos here"
54
57
validations:
55
58
required: false
56
-
57
-
- type: textarea
58
-
id: environment
59
-
attributes:
60
-
label: "Environment"
61
-
description: "Optionally provide details about your development environment."
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!
16
+
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.
17
17
18
18
19
19
20
20
## How it works
21
21
22
-
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:
22
+
The plugin uses a sophisticated multi-step process to transform your Figma designs into clean, optimized code:
23
+
24
+
1.**Node Conversion**: First, the plugin converts Figma's native nodes into JSON representations, preserving all necessary properties while adding optimizations and parent references.
25
+
26
+
2.**Intermediate Representation**: The JSON nodes are then transformed into `AltNodes` - a custom virtual representation that can be manipulated without affecting your original design.
27
+
28
+
3.**Layout Optimization**: The plugin analyzes and optimizes layouts, detecting patterns like auto-layouts, responsive constraints and color variables.
29
+
30
+
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.
23
31
24
32
25
33
26
-
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.
34
+
This intermediate representation approach allows for sophisticated transformations and optimizations before any code is generated, resulting in cleaner, more maintainable output.
27
35
28
36
## Hard cases
29
37
30
-
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:
31
-
32
-
38
+
Converting visual designs to code inevitably encounters complex edge cases. Here are some challenges the plugin handles:
33
39
34
-
**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.
40
+
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.
35
41
36
-
### Todo
42
+
2.**Color Variables**: The plugin detects and processes color variables, allowing for theme-consistent output.
37
43
38
-
- Vectors (tricky in HTML, unsupported in Flutter)
39
-
- Images (they are local, how to support them?)
40
-
- Line/Star/Polygon (todo. Rectangle and Ellipse were prioritized and are more common)
41
-
- The source code is fully commented and there are more than 30 "todo"s there
44
+
3.**Gradients and Effects**: Different frameworks handle gradients and effects in unique ways, requiring specialized conversion logic.
42
45
43
-
### Tailwind limitations
46
+
44
47
45
-
-**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.
48
+
**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.
46
49
47
-
### Flutter limits and ideas
50
+
### Todo
48
51
49
-
-**Stack:** in some simpler cases, a `Stack` could be replaced with a `Container`and a `BoxDecoration`. Discover those cases and optimize them.
50
-
-**Material Styles**: text could be matched to existing Material styles (like outputting `Headline6` when text size is 20).
51
-
-**Identify Buttons**: the plugin could identify specific buttons and output them instead of always using `Container` or `Material`.
52
+
-Vectors (possible to enable in HTML and Tailwind)
53
+
-Images (possible to enable to inline them in HTML and Tailwind)
54
+
-Line/Star/Polygon
52
55
53
56
## How to build the project
54
57
@@ -70,16 +73,49 @@ The plugin is organized as a monorepo. There are several packages:
70
73
-`ui-src` - loads the common `plugin-ui` and compiles to `index.html`
71
74
-`apps/debug` - This is a debug mode plugin that is a more convenient way to see all the UI elements.
72
75
73
-
The plugin is built using Turbo which in turn builds the internal packages.
76
+
### Development Workflow
77
+
78
+
The project uses [Turborepo](https://turbo.build/) 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.
79
+
80
+
#### Running the Project
81
+
82
+
You have two main options for development:
83
+
84
+
1.**Root development mode** (includes debug UI):
85
+
86
+
```bash
87
+
pnpm dev
88
+
```
89
+
90
+
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`.
91
+
92
+
2.**Plugin-only development mode**:
93
+
94
+
```bash
95
+
cd apps/plugin
96
+
pnpm dev
97
+
```
98
+
99
+
This focuses only on the plugin without the Next.js debug UI. Use this when you're making changes specifically to the plugin.
100
+
101
+
#### Where to Make Changes
102
+
103
+
Most of your development work will happen in these directories:
104
+
105
+
-`packages/backend` - For plugin backend
106
+
-`packages/plugin-ui` - For plugin UI
107
+
-`apps/plugin/` - The main plugin result that combines the backend and UI and is called by Figma.
108
+
109
+
You'll rarely need to modify files directly in the `apps/` directory, as they mostly contain build configuration.
74
110
75
111
#### Commands
76
112
77
113
`pnpm run ...`
78
114
79
115
-`dev` - runs the app in dev mode. This can be run in the Figma editor.
80
-
-`build`
81
-
-`build:watch`
82
-
-`lint`
116
+
-`build` - builds the project for production
117
+
-`build:watch` - builds and watches for changes
118
+
-`lint` - runs ESLint
83
119
-`format` - formats with prettier (warning: may edit files!)
0 commit comments