Code Monkey home page Code Monkey logo

figmatocode's People

Contributors

androiddevnotes avatar bernaferrari avatar chconil avatar colorfulfool avatar dalewebb avatar danbb1 avatar davestewart avatar dependabot[bot] avatar gouthamsrikar avatar imgbotapp avatar ksokolovskyi avatar ryan0x44 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

figmatocode's Issues

Code for images

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.

Add option to prettify the code (i.e. nice indents)

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.

Better Responsive Preview

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?

Basic usage manual

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!

An easy way to support vectors

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.

[Flutter] Unnecessary Rows and Column widgets are being generated by plugin

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.
Screenshot 2024-02-07 at 2 14 22 PM

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
figma_plugin_final

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

Wrong `height` value in Flutter's TextStyle

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.

Collect superscript and subscript texts from figma

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:
image

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.

svg option

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

[SwiftUI] its not converting component correctly in SwiftUI.

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.

[Enhancement] Export to Markdown

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.

Html node name from figma node name

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

Automatically rescale to fit all screen sizes

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?

[Flutter] Print name of Typography and color

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

Nested absolute positioning bug

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

[Request for Help] Installed plugin in Figma does not generate any code

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 -

image

Is there any steps required before using the plugin?

Thank you for your help.

Making the plugin standalone

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

Not really an issue

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!

Support Pug in addition to HTML

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

Proposal : Solution for react components

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 ?

Migrate UI bundling from rollup to webpack

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

Change div closing syntax

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

Transformers Idea

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

placeholder problems

<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

Tailwind classes are out of order

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.

Runtime Commands

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

Proposal : Tailwind config matching

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!

missing identifier Stack

image

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

thank you!

Support font family in Tailwind

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?

Text and Corner radius bugs

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.

A bug of primaryAlign when primaryAxisAlignItems = SPACE_BETWEEN

primaryAlign = "justify-between";

This gives justify-content: justify-between;, but there is no justify-between I think.
primaryAlign = "space-between"; should fix it.

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!

Use variable names as-is, in Tailwind code.

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?

Find a better way to preview Tailwind

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.

[Tailwind CSS] Enable color exact values for standard tailwind colors via tailwind css config export.

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.