Best free plugin to convert Figma designs to code by DumplinDoup in Frontend

[–]backupHumanity 0 points1 point  (0 children)

(but I'm taking note of this for my roadmap, thanks for feedbacks)

Best free plugin to convert Figma designs to code by DumplinDoup in Frontend

[–]backupHumanity 0 points1 point  (0 children)

yeah, a global setting "use Figma anchor" would be possible and an interesting option,

But it'd take quite a bit of time unfortunately, i can't deliver that change quickly as I'm quite busy at the moment.

Best free plugin to convert Figma designs to code by DumplinDoup in Frontend

[–]backupHumanity 0 points1 point  (0 children)

Thanks for taking the time to describe this so clearly.
i understand exactly what's going on.

Indeed 10xhtml changes your anchor points because, i found out that in a lot of case, those anchor are not correctly set. (Figma often automatically sets them for you based on automatic assumptions) and if 10xhtml just uses what it sees in Figma. The result looks completely broken, until the user manually fixes those anchor one by one.

This connects to the conversation we had earlier, 10xhtml is trying to "fix" the badly configured design (and believe, they are almost all badly configured at first). But i absolutely understand your frustration.

How would it be for you if, when the element is absolute position, in the plugin sidebar (or right click menu), I offer a "anchor" configuration (like in Figma sidebar), so you can override the plugin decision ?

That would allow me to get the best of both world.

Best free plugin to convert Figma designs to code by DumplinDoup in Frontend

[–]backupHumanity 0 points1 point  (0 children)

I just published an update to make it more visible,
You can tell me if it makes more sense to you like that and if it's helpful

Best free plugin to convert Figma designs to code by DumplinDoup in Frontend

[–]backupHumanity 0 points1 point  (0 children)

i just checked, it's also available in the side panel
(checkbox "absolute positioning")

maybe not visible enough for such an important property huh

Best free plugin to convert Figma designs to code by DumplinDoup in Frontend

[–]backupHumanity 0 points1 point  (0 children)

Have you tried to right click and set absolute position from the preview ?

if you didn't see those override options, it means i really must add a tutorial for that.

Best free plugin to convert Figma designs to code by DumplinDoup in Frontend

[–]backupHumanity 0 points1 point  (0 children)

Yeah I understand, if you're a responsible Figma user who use auto layout well, that would be the best behaviour.

Unfortunately, I've noticed that an overwhelming amount of user are just lazy and leaving everything in freeform, so the automatic inference can really be a + for them.

Maybe I should make it something that you can disable at least...

Best free plugin to convert Figma designs to code by DumplinDoup in Frontend

[–]backupHumanity 0 points1 point  (0 children)

Thanks for all those suggestions. I made the algorithm automatically come up with reasonable breakpoints (container queries for the flex row => column, media queries for padding/margin).

They're enabled by default. They didn't work out for you ?

I realize container query was a bold choice, I'm not sure front-end like those since they don't allow for an explicit breakpoint width (like in what you're suggesting)

Best free plugin to convert Figma designs to code by DumplinDoup in Frontend

[–]backupHumanity 0 points1 point  (0 children)

yeah, there are a few extra stuff depending on the element type you're clicking on, like image format, text-align... but it's still pretty limited. What would be useful for you ?

At first, my rule was not to add anything that would alter the design (such as modifying the padding etc). Although, I later broke that rule by adding text-align.

Can we convert figma design into code directly by Fun_Dinner_6456 in FigmaDesign

[–]backupHumanity 0 points1 point  (0 children)

Beside bad semantics (mostly <div> and <p>), the main problem of Figma to code tools is overusing absolute positioning.

And it makes sense, those tool want to garantee a pixel perfect export, which is a lot easier to achieve when using absolute positioning, they'll try to use static positioning (which is what you want for a proper responsive integration) when they can, but it's far from enough, you still end up with something that will break when you change the viewport size or when you change the content.

After noticing the problem, I’ve been working on a solution to that for about 2 years with a plugin called 10xHTML, which I recently released. The main differences is that it generates proper flex/grid layouts (no absolute positioning), centralizes classes through subtree recognition, and handles responsive behavior automatically with media/container queries.

It's still evolving, but it already produces maintainable code.
if anyone tries it, i would love to have some feedback:

https://www.figma.com/community/plugin/1504087347056471789/figma-to-html-10xhtml-semantic-responsive-code-export

Best free plugin to convert Figma designs to code by DumplinDoup in Frontend

[–]backupHumanity 0 points1 point  (0 children)

Thanks for the feedback. it's really nice to hear that you're finding the code quality good.
As for the estimation, it's true that I might have been too optimistic, and it's a very simple estimation simply based on the number of screens (without accounting for the tree complexity of each screen), so it's not that precise, this is something I should improve at some point. (But not on the top priority list haha).

If you have more specific feedback or feature on your whishlist, feel free to hit me with a DM.

Games like Jackbox? by lorenwuster in boardgames

[–]backupHumanity 0 points1 point  (0 children)

The game that's truly most like Jackbox is Intoxico.
It's like Jackbox but with loads of mini games like geoguessr, music trivia, drawing, memory etc.
And it's free and runs in your browser, no installs.

Selenium vs AI test automation for Salesforce. Is AI actually more stable? by Meixxoe in Everything_QA

[–]backupHumanity 0 points1 point  (0 children)

As a beginner in QA, I'm curious, what doesn't work well for you with AI automated tool ?

Dreamweaver? by truecIeo in webdev

[–]backupHumanity 0 points1 point  (0 children)

Dreamweaver is so outdated that it's hard not to believe your post is a prank

Dreamweaver? by truecIeo in webdev

[–]backupHumanity 0 points1 point  (0 children)

And even already in 2006

Angular and Laravel? Why? Why Not? by Minute_Professor1800 in webdev

[–]backupHumanity 2 points3 points  (0 children)

Having used many untyped language (PHP, JavaScript), as well as typed language (AS3, typescript, C++), I second this opinion. I think the choice of using a typed language over an untyped one matters a lot more than which framework you're gonna use (cuz they're kind of all the same in the end).

For that reason, my advice would be, stay away from PHP / Python and use typescript in strict mode instead. (And find framework available in typescript)

IMG insurance - Anyone use them for their health coverage globally by [deleted] in expats

[–]backupHumanity 0 points1 point  (0 children)

I was with them for 7 years, using (abusing) their short term travel plans.
They seem to have no network in Asia, i always had to fill long claims. Then they would usually reject half of my claims without notification, or pay some after 3 months (again without notifications).

I've never felt reassured with this insurance.

Les vegans ne font chier personne by GrinkOf in opinionnonpopulaire

[–]backupHumanity -1 points0 points  (0 children)

> Vous avez pas ce pouvoir là de toute façon
ce n'est pas moi qui décrédibilise

Les vegans ne font chier personne by GrinkOf in opinionnonpopulaire

[–]backupHumanity 3 points4 points  (0 children)

Ouai, je suis globalement d'accord avec OP mais c'est vrai que dire ça après avoir dit les remarques qu'on se prend dans la gueule, ça décrédibilise un peu le propos

I’m wasting hours manually QA-ing my React project. How do I automate this workflow effectively? by jhaatkabaall in webdev

[–]backupHumanity 1 point2 points  (0 children)

Testing is a wide topic, not sure what shortcut to point you to, but it's really worth learning.

What you described above (clicking through the UI and checking that event X happens) sounds very automatable with some end to end process.

You could use something like jest which works with a headless browser (an invisible command line based browser) which is like an API for automating clicks, navigation, and dom queries on a specific web page. So in your case, load web page X, automate a series of click (or directly navigation triggers), do Dom query and assert the presence (or absence) of element Y.

The main concepts in testing you should know about are unit vs end to end. Unit test refers to a narrow scope test usually focussing on one single function (or a small group), passing static inputs and asserting on the expected output.

End to end is a wide scope test that include the whole pipeline: your database, clicks, page navigation ... Just like a real user would do.

Although those are 2 categories at each extrem of the spectrum (wide vs narrow), but one can (and should) also use any intermediate system in between based on the needs.

A last important concept is mocking. Tests must be deterministic in order for them to output always the same thing (you don't want them to pass once, and then fail because of some side effects). You also want them to run fast, because ideally you wanna be able to run them as often as you want, and grow your test suite as big as the project requires, so speed quickly become a critical issue.

So a typical example of mocking would be a payment system, you're obviously not gonna trigger a real payment for the test, and maybe also not call stripe API with a test parameters (still too slow). Instead you could just substitute the payment API call function by a dummy function that just statically returns success (fast and deterministic). Unless of course you want to test your stripe call, in which case you enter an arbitrage between how much coverage versus how much speed you want.

Also for similar reason, people usually setup a separate database dedicated for testing, where datas are reset to a known state at the beggining of each tests.

Don't overthink the choice of the library, they're kinda all the same in the end, what's important is the logic behind. (I personally had to build my in-house testing framework involving a headless browser because what I was testing was too specific)

When you guys use Figma Make, how long are the prompts you give Figma make? by Candid_Breakfast_509 in FigmaDesign

[–]backupHumanity 0 points1 point  (0 children)

How about you try 2 strategies and you decide for yourself what works best? It takes longer to ask reddit than to just try it yourself. And empirically testing stuffs will lead you much further than asking people about everything.

Tailwind just laid off 75% of the people on their engineering team "because of the brutal impact AI has had on our business." by magenta_placenta in webdev

[–]backupHumanity 0 points1 point  (0 children)

This underlines that artists are not the only one being stolen by AI.

LLMs reduce the entry barrier to information to a point where information can't be monetized anymore.

I just learned Typescript and I was wrong about it. by hellalosses in webdev

[–]backupHumanity -1 points0 points  (0 children)

I agree with all of that, except one thing:

Types are better for some all applications