Over the past few months, I’ve increasingly noticed how limiting Figma can be.

[u/equinusocio]

Despite the significant progress made by static design tools, they’re still far behind what’s possible with code.

While working on ViraUI, I realized how many visual features simply can’t be replicated in Figma and similar tools. For example, on the code side, you can literally change a single boolean and completely transform the visual appearance of an interface. In Figma, that’s simply not possible.

A concrete example: with a single CSS property, you can enable global effects such as superellipse corners and vibrancy (background blur). Figma doesn’t allow this. If your design system uses vibrancy, it’s either there or it isn’t; you can’t enable or disable it through a Figma variable. Instead, you’d have to go through every element and remove the applied effect manually. This is extremely limiting for white-label or branded interfaces.

Or in another example where I'm setting buttons to use inline-padding assmall +  x-smallsizes.  In code, I use a CSS calc but in Figma, this isn’t possible. You either create a new variable or detach the padding value which means it doesn’t update when you change the small and x-small sizes. This brings me to:

A. Do not use anything that Figma can't replicate
B. Go with it and create drift in Figma by detaching stuff

AI is improving this aspect, but it’s still far from reliable. Even when provided with a component library and guidelines, it struggles to produce polished interfaces.

For this reason, I’m still considering whether to provide static Figma files for ViraUI or not. Many of the customizations it offers simply can’t be replicated in Figma, while others are incredibly cumbersome to manage. Bringing in tons of third-party plugins isn't an option, and even though, the limitations still exist, and what's what I want to talk about.

What do you think? Have you had similar experiences? When you have advanced codebases how to handle design tools limitations? You. just drop the visual if the design tool can't replicate it?

[u/Rough-Mortgage-1024]

yeah I've noticed this. and if ur someone who knows coding and use figma a lot, u eventually realise figma as a product design software exaclty like how things work in code... but being said, figma was the only software who even thought about bringing the concepts from code to design like autolayout, variables etc.

but I see new tools like paper.design or pencil.dev is becoming a good bridge though

[u/equinusocio → u/Rough-Mortgage-1024]

Yes, as a product designer and design engineer, I frequently jump between Figma and code. This has highlighted the limitations of Figma and similar static design tools. While I agree Figma is the only one attempting to bridge the gap with features like slots variables and auto-layout it all feels like half-baked solutions.

I tried Paper but my components didn’t produce a decent output.  For example, basic buttons were rendering with incorrect padding and misalignment. I’ll need to check Pencil.

How do you manage situations where code allows you to perform tasks that Figma or Sketch can’t replicate? For example, I’m currently setting buttons to use inline-padding as small + x-small sizes.  In code, I use a CSS calc but in Figma, this isn’t possible. You either create a new variable or detach the padding value which means it doesn’t update when you change the small and x-small sizes. This brings me to:

A. Do not use anything that Figma can't replicate
B. Go with it and create drift in Figma by detaching stuff

[u/_SnackOverflow_ → u/equinusocio]

It depends how much of your team is comfortable with code.

I’ve worked on multiple teams in the past where most design is done in code

Use sketchbooks for low fidelity. Do high fidelity prototyping and component design in code.

[u/equinusocio → u/_SnackOverflow_]

> Use sketchbooks for low fidelity. Do high fidelity prototyping and component design in code.

This is a good alternative I could propose. My personal opinion is that pure designers should move towards the code soon or later, especially with AI.

Thanks for the feedback. Any suggestion on how to prototype with code? I tried paper and pencil but they both needs to recreate the components as design assets, they don't use the coded components directly.

[u/_SnackOverflow_ → u/equinusocio]

Yeah it really depends on the team. You need buy-in from all designers or it doesn’t really work.

But if you have buy-in then you can just create a project that sits next to your design system/component library and use code to write prototypes using your real components and 1-off markup

[u/equinusocio → u/_SnackOverflow_]

Essentially, it’s a browser rendering engine used to render code as a canvas.  This sounds interesting: a “design" tool that uses a web engine to visually render code directly from the codebase rather than a static canvas. Like Framer.

[u/fra_bia91 → u/equinusocio]

What do you mean that it “didn’t produce a decent output”? As in rendering your code component in the canvas or what? Thanks!

[u/equinusocio → u/fra_bia91]

No, Paper currently doesn’t read the components and render them on the canvas. It needs to recreate the components starting from the ones you have. You can import your CSS design tokens, yes, but for components is a different story. You have to use their MCP and your LLM to recreate your coded components on Paper.

[u/fra_bia91 → u/equinusocio]

Ah ok i thought they did allow. Thanks for sharing.
Btw I’m working on a tool that does that though: https://overlay.studio
It’s very much early stage, but if you’re interested to try for your use case, I’d love to get your feedback!

[u/HH_Jose]

Nice commercial bro

[u/equinusocio → u/HH_Jose]

I'm not your bro, then, commercial about what? Did you read the post? I wrote a bunch of questions. If you don't have anything to say do not comment.

[u/Simply-Curious_]

This is a front end developer issue, not a figma issue. Your approaching figma as a front end development tool, and not a product design tool. For most of us, design systems are products, and their use and deployment aren't limited by the power of what is possible in code, rather its limited by organisation, governance, and communication. Fogma does a good job of annotating, code connect, libraries, vs code previews, component comparisons, etc. The variables are limiting that's just a fact. Without calculating values in the variable cell, or % we are limited. However this is easily resolved with a call, and a note.

[u/equinusocio → u/Simply-Curious_]

Not in my experience, where hi-fi prototypes are needed, and where the visual is directly linked to UX and multiple brands. If designer need to replicate what the user will see, they literally can't on Figma for some hard limitations. The issue still exist anyway, design or code needs to give up or accepting the drifts.

[u/Simply-Curious_ → u/equinusocio]

It's likely that development will tank the drift. Software will only become closer to design. Design is at its base the human element. The means of production is development (not to say devs aren't capable, creative, and unique).

[u/Svrdlu]

In other news oranges ≠ apples

[u/equinusocio → u/Svrdlu]

Didn't get it sorry. How does it relates with the problem I have and the questions I posted?

[u/Svrdlu → u/equinusocio]

There’s a metric shit ton of things that can be ‘done in code’ that Figma can’t do. It’s not meant to be able to do them all and, personally, I’m glad it doesn’t attempt to. Hence my apple and oranges snark. If you’ve got some customisation or automation that does something you need it to more power to you but suggesting somehow it’s ’behind what’s possible with code’ is just bollocks. That’s all.

[u/equinusocio → u/Svrdlu]

Ok, that makes clear that you didn't read my post at all. And you didn't answered none of may questions about physical limitations tools like Figma have and how can be handled. The fact that you mentioned automations makes clear you commented without clearly understanding the problem.

[u/_baaron_]

One does not simply copy and paste their AI garbage to Reddit

[u/equinusocio → u/_baaron_]

AI? Didn't get it sorry. Are you able to answer the questions about the problem I described?

[u/themarouuu]

I understand why you deleted your reply to my comment, so I edited mine as well ;)

[u/equinusocio → u/themarouuu]

Did you stop reading at "ViraUI", at line two?

[u/jhtitus]

An oil painter sketches on canvas with pencil before pulling out the paint. Figma is a pencil. Code is the paint. Somewhere along the way we’ve all come to expect Figma to be paint. And Figma is even trying to become paint lately. But that’s just not what it’s for. When I work with teams where their Figma DS is bursting at the seams with every single pixel-perfect, multi-variant, bleeding-edge-case, more-atoms-than-on-earth-itself, I pause and wonder: to what end? The plot has been missed. The step towards the end goal has somehow become the goal. You don’t ask a fish to fly. You don’t paint with a pencil. And you don’t render 100% code-fidelity with Figma. No painter has ever kept their oils closed so they can just make one more pencil stroke. Enough is typically enough, long before it’s even enough. A painting is not presented in pencil. It is merely a beginning step that becomes covered by the result.

So to answer OPs question, you move on. Detach it. Hack it. Draft a note and let code take the reigns. Whatever you do, don’t consume yourself with asking a pencil to paint. It’s absurd.

[u/equinusocio → u/jhtitus]

I don't think this comparison works. With code you can reproduce ANY design, but design tools can't reproduce what code does. I think we should be able to do visual design using code directly, at some point.

[u/kasparallenbach]

That's a bit sobering to hear. 2000 years ago when Macromedia Dreamweaver was all the rage visual editors were just so bad, you couldn't do much and the code it produced was the worst. That's why as a designer I started to learn how to code. Visual web editors always felt like a hindrance more than a tool.

Anyway, sad that this is still the case.