top | item 41860927

Ask HN: Why don't you like Figma to code?

3 points| izakfr | 1 year ago

It's a common sentiment that Figma to code tools don't work well. What exactly is bad about the code that these tools generate? Is it that the code doesn't look consistent with how'd you write it?

Plugins either seem to either provide too little detail (Figma Dev mode) or feel too bloated (Anima).

Has this been your experience as well? Do you have any alternatives that you've liked?

7 comments

order

jason_plasmic|1 year ago

One problem is that the code tool is usually a one-time code export. After the export, you'll probably want to change the code--add some business logic, event handers, etc. After a while, when the Figma design is changed, there's no way to update the presentational code only without redoing the changes.

Plasmic is working on solving this problem! The designs you make in Plasmic are architected for continuous iteration. Disclaimer: I work at Plasmic!

izakfr|1 year ago

The two-way sync does seem to be another problem with these export tools. Thanks for sharing, I'll take a look!

codingdave|1 year ago

We discussed this ad nauseum at my work a few years back (2019?). We concluded that for the enterprise's designs to truly flow directly from Figma, it would need to be able to export a Material-UI theme (or some similar theme file), so the devs never need to do anything other than just import that theme into their projects.

But it couldn't do that. We talked to folks at Figma who were interested in the concept, but we never pursued it beyond early talks. I haven't kept up to see if they have gotten closer to that goal or not in recent years.

solardev|1 year ago

Did you ever investigate if true componentization (like React Server Components, maybe coupled with Storybook etc.) could fill that niche instead?

A MUI theme isn't by itself sufficient, since it really only modifies variables like shared design tokens would.

But it's rare that bespoke components would be 1:1 equivalent with the existing functionality/behaviors of a UI lib (unless that was a design constraint from the get-go, i.e. designers were only allowed to use existing functionality in that lib).

At our work, all components started out with MUI, but would often be extended with custom code based on the designers' needs. I could see no real way to sync that part of it with Figma (which would often just have basic wireframes and prototypes, maybe linked together in screens, hover states, etc., but not really implemented as interactive code).

It's kinda missing a storybook-like layer that can actually use and display different states, inputs, outputs, etc.