bernaferrari / figmatocode Goto Github PK

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.

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.

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.

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.

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

Hey,

Just wondering what the purpose of the responsive preview is.

It doesn't seem to simulate anything that might be relatable (i.e. phones, screens, etc) in the real world that I can tell.

And it cannot simulate the result of any of the targets other than HTML.

Am I missing something?

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.

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!

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

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

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.

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

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.

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?

Your extension is very good, thank you btw!!

In figma, the designers on my team use this functionality a lot to place the text with sub or sup text, but when I copy the text of it, it never works:

If you could export this on HTML, it would be amazing not to have to do the manual work of placing each of these by hand 😅

In HTML the tags used for this are <sub> and <sup>, and in CSS, the equivalent is to use the "vertical-align: sub;font-size: 0.9em;" and "vertical-align: super;font-size: 0.9em;" respectively.

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

The FigmaToCode Plugin not correctly converting figma UX into swift UI code.

1. When FIgma UX has input field still its converting input field to text in swiftUI.
2. Same for Button also it is coming as text components.
3. And every component has static hight and width.

Above are the issue i found while converting figma ux into swiftUI using figma to code plugin.

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.

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

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?

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,
    ),
)

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;.

👋 FigmaToCode is very useful software👍 and I think it could be made even better by combining two approaches: designToCode and LowCode🚀

As a low-code approach, I suggest considering Lowder for flutter and Reka for js/html.

I mean to make it possible to generate a "solution model" for Lowder from figma files...

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

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.

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

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!

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

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 ?

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

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

thanks a lot

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

<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

Hey!

It seems that Tailwind classes generated in the app are different from the "recommended" order that plugins like prettier and Tailwind Playground use.

App:

<div class="w-96 h-80 bg-white justify-center items-center inline-flex ">
  <div class="w-44 h-40 p-2.5 border border-black justify-start items-end gap-2.5 flex flex-wrap">
    <div class="w-10 h-10 bg-cyan-100"></div>
    <div class="w-10 h-10 bg-blue-200"></div>
    <div class="w-10 h-10 bg-lime-400"></div>
    <div class="w-10 h-10 bg-teal-500"></div>
  </div>
</div>

Playground:

<div class="inline-flex h-80 w-96 items-center justify-center bg-white">
  <div class="flex h-40 w-44 flex-wrap items-end justify-start gap-2.5 border border-black p-2.5">
    <div class="h-10 w-10 bg-cyan-100"></div>
    <div class="h-10 w-10 bg-blue-200"></div>
    <div class="h-10 w-10 bg-lime-400"></div>
    <div class="h-10 w-10 bg-teal-500"></div>
  </div>
</div>

I researched how this could be done, but it appears that the official Prettier plugin can only be used with Prettier.

However, it appears that a few other folks have tried to do this but the best starting point might be the VSCode plugin Headwind which has a list of classes that could be leveraged for any sort function.

Obviously the new Figma variables functionality would mean that some extra work would need to be done to sort variables, but that shouldn't be too hard.

I'm happy to PR this after the work I'm doing on Flexbox.

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.

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!

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

thank you!

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?

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.

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!

Hey,

Great plugin! Clearly lots of work too, thank you.

It seems we're having similar issues to #102 as our Tailwind config is also customised. I explained it more in the Figma Discord thinking it might be a general probem.

Even though adding TW config would be useful, we are attempting to move to variables in order to build a design system.

As such, (and having looked the code) it seems that rather than picking the nearest color, when using a color variable, the plugin could convert the variable name to a Tailwind token name directly, i.e.:

button/outlined -> {property}-button-outlined (not {property}-stone-400)

Does that make sense?

I was wondering if it was possible to open Tailwind code in Tailwind Playground

Whilst not possible to do directly, a simple Chrome extension could act as a bridge.

The steps would be as follows:

• Figma plugin opens new window, either the Tailwind Playground URL directly (or maybe a chrome extension page)
• the Tailwind HTML would be encoded in the URL
• the extension could (I think?) run javascript in the main page using the MAIN execution context:

const url = new URL(location.href)
const html = url.searchParams.get('html')
if (html) {
  MonacoEditor.getModel().setValue(html)
}

Have done a quick experiment, and the code does set the Tailwind Playground code, would just have to confirm the extension could access the MonacoEditor global.

Hi, I very much like your plugin, but while finishing my last pass of usability evaluation I've hard time to figure out how to make sure that the tailwind class for colors would match colors from our design.

Seems that I stumble on a blocker: tailwind classes seems to go through a nearest value of the actual ones on the design. I've seen some alternative to that, such as tailwinds bracket colors for non standard colors, but this is too not a viable solution.

It looks like that the right solution would be a 2 stepped one: somehow, exporting a tailwind configuration for the project colors with their name, and then having FigmaToCode use those names in the tailwind class names.

There are questions left opened with such an approach, such as how to handle colors names collisions, especially for figmas designs that are use in a single tailwind project.

I'dont event know if it's feasible with figma plugin, but it looks to me that any figma tailwind code generator will have to tackle this to achieve a really valuable output