Hello,
I was wondering how happens all the stack children are a single comma thus getting hundreds of errors

thank you!

can you support flex-wrap and hug content( without fixed width and height)

This is my Figma prototype:

https://www.figma.com/file/PhoprUwbK2cJM2BIjyLIKk/Edu-Conference?type=design&mode=design&t=SePaRDEaaMqJhrbS-0

I want to generate HTML code, and I got like this:

The style of alll the HTML elements is like this: position: absolute; top: XXXpx; left: XXXpx;.

It is not standard layout. It's hard to extend.

How can I get better code, like flex, grid or just normal layout?

Hi @bernaferrari thank's for your great work on this library. I think adding support for React would be "relatively easy":
the idea would be to leverage the use of a naming convention on the Figma Nodes we want to "transpile" into components. For example : public:type="text" data-component="Input" element="input" will generate Html that looks something like this <input class="shadow appearance-none border border-red-500 rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" public:type="text" id="input" data-component="Input" />. Note the custom attributes here and the default div element that has been overridden by the input element. We could then use this html to react components library on a second pass to generate the component from the generated Html, which will be a react component called Input with a type prop. Note that the idea can later be refined for other usages like Flutter too (the behavior would slightly differ: instead of overriding the generated code it will wrap the Column or Row with the specific element for example element="listview" with a ListView builder). What do you think ?

Also, it's further better if not inserting <div style="width: --px"></div> empty div between real items when primaryAxisAlignItems = SPACE_BETWEEN because flexbox will handle that.

However, space-between still causes a problem for one single item in parent div. See this.
I don't like margin: 0 auto; solution.
One solution may be if there is only 1 item in the parent div, use center rather than space-between.(but it doesn't work for dynamic children)

Please let me know if you need examples to demonstrate this.
Thanks a lot for this project!

I am using this plugin in Figma to generate Flutter code. The issue is that there are a lot necessary Row widgets are column widgets being generated by plugin the the suggested code.

Following is the Figma design that i want to implement.

And this is the code suggested for it , by this plugin:
Container( width: 720, height: 216, padding: const EdgeInsets.symmetric(horizontal: 36, vertical: 18), child: Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( width: 144, height: 180, child: Column( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( padding: const EdgeInsets.symmetric(vertical: 18), child: Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( width: 144, height: 144, child: Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( padding: const EdgeInsets.only(top: 27, bottom: 18), decoration: ShapeDecoration( color: Color(0xFFCDE5FF), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(36), ), ), child: Column( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( width: 36, height: 36, child: Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Text( '', textAlign: TextAlign.center, style: TextStyle( color: Color(0xFF001D32), fontSize: 36, fontFamily: 'Segoe Fluent Icons', fontWeight: FontWeight.w400, height: 0.03, ), ), ], ), ), const SizedBox(height: 9), SizedBox( width: 144, child: Text( '25', textAlign: TextAlign.center, style: TextStyle( color: Color(0xFF001D32), fontSize: 36, fontFamily: 'Segoe UI', fontWeight: FontWeight.w400, height: 0.04, ), ), ), ], ), ), ], ), ), ], ), ), ], ), ), const SizedBox(width: 24), Container( width: 144, height: 180, child: Column( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( padding: const EdgeInsets.symmetric(vertical: 18), child: Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( width: 144, height: 144, child: Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( padding: const EdgeInsets.only(top: 27, bottom: 18), decoration: ShapeDecoration( color: Color(0xFFCDE5FF), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(36), ), ), child: Column( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( width: 36, height: 36, child: Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Text( '', textAlign: TextAlign.center, style: TextStyle( color: Color(0xFF001D32), fontSize: 36, fontFamily: 'Segoe Fluent Icons', fontWeight: FontWeight.w400, height: 0.03, ), ), ], ), ), const SizedBox(height: 9), SizedBox( width: 144, child: Text( '11', textAlign: TextAlign.center, style: TextStyle( color: Color(0xFF001D32), fontSize: 36, fontFamily: 'Segoe UI', fontWeight: FontWeight.w400, height: 0.04, ), ), ), ], ), ), ], ), ), ], ), ), ], ), ), const SizedBox(width: 24), Container( width: 144, height: 180, child: Column( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( padding: const EdgeInsets.symmetric(vertical: 18), child: Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( width: 144, height: 144, child: Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( padding: const EdgeInsets.only(top: 27, bottom: 18), decoration: ShapeDecoration( color: Color(0xFFCDE5FF), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(36), ), ), child: Column( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( width: 36, height: 36, child: Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Text( '', textAlign: TextAlign.center, style: TextStyle( color: Color(0xFF001D32), fontSize: 36, fontFamily: 'Segoe Fluent Icons', fontWeight: FontWeight.w400, height: 0.03, ), ), ], ), ), const SizedBox(height: 9), SizedBox( width: 144, child: Text( '5', textAlign: TextAlign.center, style: TextStyle( color: Color(0xFF001D32), fontSize: 36, fontFamily: 'Segoe UI', fontWeight: FontWeight.w400, height: 0.04, ), ), ), ], ), ), ], ), ), ], ), ), ], ), ), const SizedBox(width: 24), Container( width: 144, height: 180, child: Column( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( padding: const EdgeInsets.symmetric(vertical: 18), child: Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( width: 144, height: 144, child: Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( padding: const EdgeInsets.only(top: 27, bottom: 18), decoration: ShapeDecoration( color: Color(0xFFCDE5FF), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(36), ), ), child: Column( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( width: 36, height: 36, child: Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Text( '', textAlign: TextAlign.center, style: TextStyle( color: Color(0xFF001D32), fontSize: 36, fontFamily: 'Segoe Fluent Icons', fontWeight: FontWeight.w400, height: 0.03, ), ), ], ), ), const SizedBox(height: 9), SizedBox( width: 144, child: Text( '5', textAlign: TextAlign.center, style: TextStyle( color: Color(0xFF001D32), fontSize: 36, fontFamily: 'Segoe UI', fontWeight: FontWeight.w400, height: 0.04, ), ), ), ], ), ), ], ), ), ], ), ), ], ), ), ], ), )

If we look at this code there are unnecessary Row widgets in each Button component.
Then there is unnecessary Row widgets with encloses the all 4 button.
The above code generates following output

The output UI height is less than the expected height also. Please check once

data-options='{"Size": "lg", "Color": "primary"}'

This would be amazing. I'm already heavily using the "Layer names" feature.

Hey! Thanks for the amazing plugin!

I have a feature idea: it would be cool to be able to respect our Tailwind config so that the resulting code uses our custom colors and such.

There are two possible implementations (as I see it):

1) Upload config file

Using this approach, I'd provide a config file to the plugin before doing anything. It'd then match my config values against my styles. So if I have a color style called "Light Blue" with the HEX value of #BFDBFE and a color in my config file called "blue-faint" with the same HEX code, then the plugin would generate .bg-blue-faint whenever it sees an element that has "Light Blue" applied as the fill style.

2) Respect style names

If I have a button with a fill color style called lightBlue, then the code should give me .bg-lightBlue. It would be my responsibility to make sure my Tailwind config file defines a lightBlue color.

Now, how would it work with text styles? For the first option, if I have a text style defined in my config file as such:

// tailwind.config.js module.exports = { theme: { fontSize: { 'small': ['11px', { letterSpacing: '0em', lineHeight: '14px', }], } } }

The plugin would apply the .text-small class to my generated code whenever it sees a text element that has 11px size, 0% spacing, and 14px line-height. Be it due to an applied style or not.

For the second option, the plugin would look at the text style I've applied to the element and just use that name for the Tailwind code. So if my text style is called Small, it would apply the .text-small class to my generated code. Although text styles have font weight applied to them as well, Tailwind text presets don't support that. The plugin already recognizes this and applies .font-{weight} beautifully.

A fancy option would be ignoring any words or numbers that allude to the weight when extracting text styles from the element. So if my applied text style is called "Small Semibold" or "Small 700", the plugin would just create .text-small and ignore "Semibold" or "700".

Again, thanks for the amazing plugin! I'd help myself but I'm primarily a designer and don't have the skills required to achieve this!

since there is now an official svelte-loader for webpack, i could take a stab at migrating the bundling to webpack 5
the advantage is that there is only one bundler to worry about

It seems that vectors are not supported now.
An easy way to support vectors is if the node's type === "VECTOR" and also has export settings, convert it to <img src="IMAGE_HOST/name.ext" />

For example (the following json is from https://api.figma.com/v1/files/ downloaded json file because I don't set up a Figma plugin dev environment)

{
  "id": "6:3",
  "name": "Camera",
  "type": "BOOLEAN_OPERATION", // not sure if there is this type in plugin environment
  "blendMode": "PASS_THROUGH",
  // ...
  "exportSettings": [
    {
      "suffix": "",
      "format": "PNG",
      "constraint": { "type": "SCALE", "value": 1.0 }
    },
    {
      "suffix": "@2x",
      "format": "PNG",
      "constraint": { "type": "SCALE", "value": 2.0 }
    },
    {
      "suffix": "@3x",
      "format": "PNG",
      "constraint": { "type": "SCALE", "value": 3.0 }
    }
  ],
}

and covert it to <img src="IMAGE_HOST/Camera.png" />.
Then users can download exported images from Figma and place them into a folder, and then replace all IMAGE_HOST with the correct path.

Proposal: react-native / react-figma / react-primitives supporting

The react-primitives family has several universal interfaces:

• View
• Text
• StyleSheet (with Yoga Layout-like properties)
• Platform

In native figma code convertor, they show name of typography and color. For example

color: var(--black, #000000);

/* Material/label/large */
font-size: 18px;
font-weight: 500;
line-height: 24px;

Therefore, it would be good if the name comes out as an �comments in the flutter code, like

Text(
    'Example',
    // Material/label/large
    style: TextStyle(
        color: Color(0xFF000000), // black
        fontSize: 18,
        fontWeight: FontWeight.w500,
        height: 24,
    ),
)

I found out that this Adobe XD plugin which takes a SVG Path and transform it into a Flutter Path works pretty well with Flutter, maybe you can take some inspirations.

According to the Flutter documentation of the TextStyle class (https://api.flutter.dev/flutter/painting/TextStyle/height.html):
height - "The height of this text span, as a multiple of the font size."

Currently, when the user sets a Line height parameter of the font, the plugin just uses this value for the height of the TextStyle, which is wrong.

I propose to do the next:

1. Line height unit == AUTO: skip it in TextStyle;
2. Line height unit == PIXELS: set value as lineHeight.value / fontSize in TextStyle;
3. Line height unit == PERCENT: set value as lineHeight.value / 100 in TextStyle.

Your plugin is impressive ! Thank you.

Could you guide us how we could make it work as a CLI command line similar to this tool ?
https://github.com/marcomontalbano/figma-export

We would like to integrate the retrieve of the CSS in our CI CD process.

Thanks in advance for your help.

Hi, any plan to make this plugin standalone i mean without the need of dev feature ?
Since the dev feature is missing now in free plans u absolutely need it to use this free plugin can we solve this by making this plugin a separate window in figma ?

Ty

The code pointer is https://github.com/bernaferrari/FigmaToCode/blob/master/src/html/htmlMain.ts#L61
It's more a preference, but normally when we write html/css to add spacing, I believe we will use margin-bottom or margin-right rather than adding empty div.

I love this tool so much! But, is there a way to add positioning like X and Y? I'm not very good with HStacks, ZStacks, and VStacks so that would be a great feature!

Currently there is an option to get the name of the figma node as a class name.

Would it be possible to have a similar option to directly have a custom html node name?
In that case, we would be able to directly use your html as our Angular template file.

Thanks in advance for your answer.

Benjamin

I installed the plugin after logging into Figma web. I tried the plugin on multiple art boards, some of them very simple (e.g. iOS application for a photo gallery, a vertically scrollable list with photos and basic metadata, screenshot attached below) but I can't generate any code -

Is there any steps required before using the plugin?

Thank you for your help.

If not using auto layout, css will set the parent position: relative; with the child position: absolute;. But if it's nested non-auto layout, it generates things like

<div
  style="
    width: 57px;
    height: 57px;
    left: 11px;
    top: 4px;
    position: absolute;
    position: relative;">

It should not add position: relative; when there is position: absolute;.

1

Text elements under auto layout parent with "Fill container" width doesn't have width: 100% in generated codes.

2

Corner radius in Figma doesn't produce border-radius: in generated codes.

3

Text's color generates something like<p class="Location" style="font-size: 11.50px; text: rgba(37.78, 188.06, 13.32, 1);">Text</p>. It should be color: rgba(37.78, 188.06, 13.32, 1);

4

In auto layout, the bottom empty spacing div's height of a Text should = parent's spacing + Text's height - Text's font size to be more accurate.

is there any option export images as svg base64 string ?
just assigned to src property of img tag

Right now, it seems to use hard coded frame sizes based on Figma sizes. Is it possible to use the proportion between the components, and scale it up or down accordingly to make the SwiftUI code adaptive to all screen sizes?

I'm not getting any code where there are containers with image backgrounds. Is it possible to this in even is the file name of the image can just be a placeholder.

thanks a lot

<img class="flex flex-col items-end justify-start w-full flex-1 p-2" src="https://via.placeholder.com/380x300"> <img class="w-8 h-8 rounded-lg" src="https://via.placeholder.com/32.000030517578125x32"/> </img>

the only markup problem I found in generated code is these two:

• size is better to be int
• no img inside img, please

This plugin is amazing, I love it!

I tried using it to add in some HTML for me with Tailwind, and the output for the plugin is mostly minified. I have to then go back into the code and then format it. Ideally, there should be an option to deliver the output for Tailwind in a way that is more readable.

This runs with Turborepo.
Is there a recommended version?
Can you run this w/ NPM as well?

Docs were a bit vague on runtime/build requirements

https://github.com/bernaferrari/FigmaToCode/blob/master/src/html/builderImpl/htmlSize.ts#L19

if (typeof size.width === "number") {
} else if (size.width === "full") {
  w += formatWithJSX("width", isJsx, "100%");
}

In flexbox, width: 100%; makes fixed width of neighbors wrong. Their fixed width won't be the assigned value.
flex: 1; solves the issue.

Hi! Awesome plugin. Could you please modify generated <div .../> to <div ...></div>, so it will work in pure HTML without React in Chrome and other browsers

I think that seperating the transform logic from the rest of the code is a good idea, just expose the transformed IR, and then a module with the transformation logic is called for each type of transformation, and people can contribute writing their own transformation logic, I'm working on something very similar here https://github.com/figmatools/figma2css-app, but you're way ahead of me, I already use something like that in production where I work, but I'm trying to make a nice frontend so more people can use it, If you give me the go ahead I'm gonna try to implement my transformer idea and write a transformer for vanilla css, which is what I use.
My usecase is:
I Already have the HTML structure, I just need the styles

I know that Markdown is not a proper code, but I think that the idea is pretty ok for this export, since it can generate HTML in the final too.

Would you accept a PR for exporting Pug templates? I prefer using Pug over HTML and I'm willing to create a PR for it.

Great plugin btw

Forgive my ignorance, not super familiar with Figma plugins.

I don't unterstand how to run this plugin.

1. Installed the plugin
2. Plugin is listed on manage plugins
3. Plugin is not listed anywhere else in Figma as far as I have seen.
4. x Don't get how to display the Figma To Code window as displayed in introduction video in the readme

Alternate path:

1. Checked out the repo
2. npm install, npm run build, npm run start
3. working local server with a web ui similar to the Figma To Code window at localhost:5000
4. x No connection to Figma whatsoever.

I have the feeling I'm missing something super obvious here. :)

Appreciate your help/feedback!

I've noticed font family is not currently supported with Tailwind CSS.

Per https://github.com/bernaferrari/FigmaToCode/blob/main/packages/backend/src/tailwind/tailwindTextBuilder.ts#L98

  // todo fontFamily
  //  fontFamily(node: TextNode): this {
  //    return this;
  //  }

In Tailwind the default configuration is https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/config.full.js#L302-L323

    fontFamily: {
      sans: [
        'ui-sans-serif',
        'system-ui',
        'sans-serif',
        '"Apple Color Emoji"',
        '"Segoe UI Emoji"',
        '"Segoe UI Symbol"',
        '"Noto Color Emoji"',
      ],
      serif: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
      mono: [
        'ui-monospace',
        'SFMono-Regular',
        'Menlo',
        'Monaco',
        'Consolas',
        '"Liberation Mono"',
        '"Courier New"',
        'monospace',
      ],
    },

where

• ui-sans-serif is used by default but can be applied via font-sans class
• ui-serif can be applied via font-serif class
• ui-monospace can be applied via font-mono class

and we can add custom fonts e.g. in tailwind.config.ts

  theme: {
    extend: {
      fontFamily: {
        mon: ['Montserrat', '"Open Sans"', ...defaultTheme.fontFamily.sans],
      },
    }
  },

allows us to use font-mon class to apply the Montserrat font.

In other for Figma To Code to correctly support font's, it would need a way of mapping the current fonts to the correct Tailwind classes based on the tailwind config.

Alternative ideas:

• Allow the Figma text styles to somehow contain the correct classname e.g. within the name.
• Add a checkbox option for including 'assumed font class' and just assume the class required is the name of the font dasherized (e.g. if a text element has the font family 'Open Sans', Figma to Code appends the class name font-open-sans)

Is there some kind of plan/preferred approach here?