-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:
-**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.
+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.
-### Todo
+2. **Color Variables**: The plugin detects and processes color variables, allowing for theme-consistent output.
-- 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
+3. **Gradients and Effects**: Different frameworks handle gradients and effects in unique ways, requiring specialized conversion logic.
-### Tailwind limitations
+
-- **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.
+**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.
-### Flutter limits and ideas
+### Todo
-- **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`.
+- Vectors (possible to enable in HTML and Tailwind)
+- Images (possible to enable to inline them in HTML and Tailwind)
+- Line/Star/Polygon
## How to build the project
@@ -70,16 +73,49 @@ The plugin is organized as a monorepo. There are several packages:
- `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.
-The plugin is built using Turbo which in turn builds the internal packages.
+### 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`
-- `build:watch`
-- `lint`
+- `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
diff --git a/apps/debug/README.md b/apps/debug/README.md
index 4fae62af..e6d38f06 100644
--- a/apps/debug/README.md
+++ b/apps/debug/README.md
@@ -1,4 +1,4 @@
-## Getting Started
+# Getting Started
First, run the development server:
diff --git a/apps/debug/app/layout.tsx b/apps/debug/app/layout.tsx
new file mode 100644
index 00000000..cf057a8a
--- /dev/null
+++ b/apps/debug/app/layout.tsx
@@ -0,0 +1,21 @@
+
+import type { Metadata } from "next";
+import "../styles/globals.css";
+
+export const metadata: Metadata = {
+ title: "v0 App",
+ description: "Created with v0",
+ generator: "v0.dev",
+};
+
+export default function RootLayout({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/apps/debug/app/page.tsx b/apps/debug/app/page.tsx
new file mode 100644
index 00000000..1bc02a9f
--- /dev/null
+++ b/apps/debug/app/page.tsx
@@ -0,0 +1,84 @@
+"use client";
+
+import { Framework } from "types";
+import * as React from "react";
+import { PluginUI } from "plugin-ui";
+
+export default function Web() {
+ const [selectedFramework, setSelectedFramework] =
+ React.useState+ Preview your Figma to Code plugin in both light and dark modes +
+ +Debug Mode
- - -+ 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
- {isEmpty === false && ( - + /> )}+ {selectedFramework} Options +
+ {selectableSettingsFiltered.map((preference) => { + // Regular toggle buttons for other options + return ( +