DevTools cannot do this - for instance dragging DOM elements around cannot be persisted because, well, JS kicks in can change everything when you page reload.
To me this is what's missing in webdev, someting in between like SwiftUI. With proper TypeScript definitions I can imagine the widget automatically generating based on the props (or something fun like that).
#Figma to react code#
In this "in-between" world the code on the left becomes like an actual UI widget in Figma - instead of modifying and learning the ways the auto-layout widget works, you can just modify the code on the left. Making the whole coding experience much more interactive and fun. It has code and preview side-by-side so you can write code and see the preview but also change the preview and do a tiny bit of code generation for you. SwiftUI has really shined in this regard where instead of offering a visual canvas and code-generation behind the scenes it does both things. I think all these approaches for code-generation have been around for a while and are interesting for web-agencies but as soon as you need to have more finer grained control they lose their initial benefits. So you get most of the way there for a much, much smaller fraction of effort. You export the styles, the padding, the colors, and that's what people really want to get from their figma files. And all this for pretty much nothing.īecause figma already has css exports (even if it's iffy, they're working on it). And that's not even getting into engineering or marketing difficulties because you'll have people confused about the product identity, or say that it's too complex, or that it's buggy because it has so many more features now. Maintaining and documenting all of this would be an absolute nightmare. There'd have to be rules about merging, and diffing, and command line tools, etc. You'd have to make code style decisions like what kind of code style to use (functional vs class in react e.g.).Įven if somebody did do all of this, merging the file from the app into a real project would be difficult. No, because components implies inputs (props), and things like conditional rendering, or slots (props.children), or even life cycle hooks. This would be a valuable problem to solve that I haven't seen talked about much.
#Figma to react how to#
Most large enterprises I've seen are full of exactly these kinds of devs who are primarily tasked with component/page-level implementation, but if you leave them to make decisions about how to separate and lay out components, you get a lot of inconsistency across your teams, even when the designs are consistent. People think that just because it's all about web dev, these are all the same tools, but they're not.ĭo you potentially see a middle ground where you could export reliably optimizeable assets like CSS and design tokens, and then instead of trying to export a perfect representation of the design, you could export a high-level scaffold that would at least get the developers started, perhaps by laying out named - but not implemented - components (ideally following a predefined architecture template).Ĭode frameworks have long found success with this scaffolding approach, where you can provide structural hints/direction to the average intermediate/junior developer who can handle the component-by-component implementation but might need a hand with broader architecture decisions. The focus and clarity that figma has is underrated. More than that? It would be a completely different product and kind of insane to try. Figma already has css exports, and maybe they'll get design tokens.
All these people saying that this is the future of figma are out of their goddamned minds. With figma, there's no chance given how they would have to re-implement to get actual feature-parity with actual target platforms.ĭisclaimer: I am in this space and basically building what we're talking about. There's the actual design related concerns such as nested layouts and dynamic behavior, as well as code base management concerns.Īt best this is a possibility for some tools like webflow, or framer. Converting it to code that's usable is a whole other story.
It's a cool proof of concept, but practically, 0% chance of it being really useful.Ĭonverting figma layouts to code is fairly trivial.
0 kommentar(er)
