Will Figma become an awkward middle ground?

I feel seen!

I'm one of these codey designers. The madness that exists in modern design teams (I used to manage a team of 50!) is insane. There's a lot of time spent on "design systems" in Figma. Very generally Figma is not the website, and the effeciency additions of building tools there is a lost cause.

Modern CSS and your JS frontend of choice is a lot quicker and more powerful for component building and general design work. There's way too much to do with media break points and tokenization there. There's a misguided group of designers that are learning a lot of esoteric Figma features that don't translate into something users will ever touch.

10 and 15 years ago designers needed to learn the code part too. Somewhere along the way we put them in a corner and made learn these prototype tools.

Major bias disclaimer:

1. I work for Figma

2. I work on AI at Figma, as well as on the design systems part of the product

3. Prior to Figma, I spent 7 years as a prototyper teaching designers how to go from idea->code without a design step in between

I love designing in code, and I HIGHLY recommend you do so for smaller projects, but I disagree with some of the assumptions the author is making. The author states, "The reason Figma has over 4 million users is because it takes most people too long to code their designs", which I feel is inaccurate. For less-experienced creators, it's mainly because the UX is more approachable in a design tool. That's less relevant here since the author is talking about designers who can code. For the most experienced designers, it's more about alignment.

As an example, most of my side project[1] was designed entirely in code... until it got to a certain scale. Designing in code was amazing early on when every page could be a new pattern. After a while, managing variations of components and ensuring that I wasn't diverging from existing patterns became non-trivial. Things became even harder when I hired another person to work on things. At that point, alignment became crucial. We needed to ensure that designs we were both working on were aligned with each other. Patterns one created needed to be reused, not reinvented by the other. This is something that's very hard to do in code. I ended up creating a mirror of the existing implementation of the site in Figma from scratch. For the iOS app, I ended up starting it in Figma[2] so we could easily compare implementations and land on an agreed pattern. Alignment with patterns and with the team was the #1 reason why we operated in a design tool during this time.

[1] https://non.io

[2] https://www.figma.com/design/im8a7L7axmbj0S0lm27NKa/Nonio-iO...

As someone who develops email templates, you will never understand my pain. Figma creates a complete fantasy world for designers who do not understand that a pixel and color perfect design is going to be smashed to bits by the client.

Also, I feel the rise of React is partially to blame. CSS frameworks were clunky and constraining - but they forced you into a lot of design constraints developed on years of best practices. I can't tell you the number of React-based enterprise tools I have to use on a daily basis that have picture-perfect designs ... that turn clunky and confusing the minute you resize the window or activate an animation.

This will come off as a humble brag, but I will say it anyway.

Right now, I am tasked with building a PoC for a new product my team wants to build by the end of the quarter. We have one big problem - we have no designer on staff. But we do have a design system with a library with re-usable react components and tailwind css, and those are things I am pretty good with. So I have full autonomy when it comes to turning product requirements into a live demo. I was able to accomplish quite a lot in a short period of time with no designer and just my own taste in design + ux. And product stakeholders were pretty satisfied, which means the outcome was productive.

So from my perspective, Figma is not only an awkward middle ground, but not even necessary for me.

Figma is alright, if you use it right. The issue is that people are trying to create pixel perfect graphics designs in it, which is very fiddly and then has to be replicated in code.

So, you end up doing double work. An additional problem is that especially responsive applications with e.g. dark mode support, animations and css transitions, etc. can only be partially modeled in a pixel perfect way in Figma. You can do it but it's just very fiddly to do in Figma. And besides Figma's code export is useless for this; aligning design and implementation is mostly still manual work. And of course users only ever use the code version.

The proper way to use Figma is to focus less on the look and feel and instead use it to prototype UX flows. This is tedious and slow to prototype in code and this is where Figma can shine. Having a good component design system in Figma means that you just reuse the same components and don't have to waste brain cycles on their look and feel when designing a UX flow. It will roughly look like the real thing and you can click together a few new screens in minutes and compare a few alternatives. I work with good UX people and I see them use Figma effectively. Our designs aren't pixel perfect; generally. Though we do use it for e.g. icon design in svg form as well. But design and UX are two separate skills at this point with separate tool sets as well. Figma is alright for icon design but probably not the best tool.

This is of course not a new problem. People were designing web applications in Photoshop at the beginning of the century. UX was not a consideration and the people doing the design were graphics designers. Figma is arguably better but not necessarily aimed at graphics designers. It's a UX tool.

Slightly off-topic, but I dislike this trend of "designers over-designing everything". This website is aesthetically pleasing, and has it's own unique style, but scrolling the home-page is laggy on my $4,000 Macbook (Chrome). I guess it's because it downloads 14MB of resources and tries to download more based on scroll position?

I think the assumption here is that once you make a component library in code, you can just map low-fidelity wireframe components (from something like Balsamiq) onto those "real" components, and go from a napkin sketch to a functioning website without the awkward middle ground of vector designs and clickable slideshow prototypes.

It's an interesting idea. I'm skeptical that, in the real world, you can reliably infer everything you need to produce code from a simple wireframe: how do you deal with specific interactions, specific data, specific operations on that data? Balsamiq-style mockups are all about not getting specific, in order to keep the fidelity low and the velocity high.

In practice, with Figma, the thing I've noticed is that I use low-fidelity wireframes less than in the past, because it's just as easy and fast to use high-fidelity components from my design library. If I'm just stacking Lego blocks together to make a UI, why would I use low-fidelity blocks, if I already have high-fidelity blocks that are much less ambiguous?

In other words, I'm not sure Figma is in the middle ground between sketches and code anymore, I think it's just as easy to think of it as a brainstorming tool that happens to produce high-fidelity results if you use it right.

my problem with Figma is that it became too technical and code-like. By the time I finish setting up layouts, paddings etc...I'm catching myself thinking - why didn't I just code it straight up, could have been as fast.

> But you know what AI will be great at? > ...Turning wireframes into frontend code (limited logic) > ...Wielding (and extrapolating) your design system > ...Creating beautiful visuals from screenshots and mood boards

I don't think the argument works. It imagines AI will be able to do things that our current AI do not.

Our current AI work in terms of what they've been trained on. Natural language to code works as well as it does because coders have been asking and answering questions about code a lot on the internet, that's been collected into data sets, and those data sets have been used to train LLMs.

For AIs that work like our current ones to be great at the things the author envisions, they will need a lot of examples of those things, and of a high quality too.

The author wants AI to turn natural language into wire frames, let the designer adjust and improve the wireframe, and then turn the improved wireframe into production code.

But I don't think the training data for those two transformations exist. What even is the intermediate wireframe format? AU will produce and consume it, but it also needs to be in a form human designers can iterate on.

Since the training data doesn't exist, it would need to be created. Is that feasible? If you can't harvest the internet for it for almost nothing, it would cost a great deal to create, and I wonder about the quality of the result.

As a programmer, I find that much more than a wireframe guide is distracting. That said, I tend to have a good understanding of the UX rules for a given design style (often material) and the ui library/tools I'm using. Sometimes I might have questions about the interaction.

On the flip side, I've seen developers that just about need a functional example to work out anything and will still have issues with real functionality. So YMMV.

How shitty is Figma’s current “export as css/html/js” functionality? How many people do you think they have working on improving that? How many of the people Figma is paying to fool around with AI do you think are experimenting with building an AI stuffed full of css/html/js tokens, and other functionality for improving Figma’s ability to pick up working css/html/js, tweak it, and re-export it?

I've been working as a product designer for the last 10 years, but for a few years before that I was a software engineer. I've been interested in moving back towards the technical side of things. It seems that role, and what is described in this article, would often be called a "design engineer".

However, I don't quite understand what the role of a design engineer is. If a PM is the "what", design is the "how", and eng is the implementation. Where would a design engineer fall? I'm sure it is very much a spectrum, but I'd be interested in hearing from some folks who have filled this role.

Are you focused on the "how", but using code to achieve that? Are you focus on the "how" and it simply turns into the implementation? Are you focused on the implementation, but with the background and skills of a designer?

Figma is a tool and nothing more, despite some people to turn it into the end all be all of user experience. It will eventually be replaced with something, just as it replaced Sketch, and just like Sketch replaced Illustrator. I also noticed that the author barely touches on the people who make the interfaces (product designers). If the author gets their wish, businesses won't hesitate to axe their UX teams to save some costs.

Disclaimer: I'm a product designer who is very skeptical of the enthusiasm around AI as I can see a future where product will instead rely on AI instead of designers to create interfaces.

One thing I kinda wished was the ability to code into Figma, much like how in Storybook I can have a resource of brand compliant components. For me, it's much easier to rectangle draw and even work with auto-layout, but one side of me just wants an environment where I can define my Figma components with code and just drag 'em around.

That type of middle ground to me, isn't awkward because usually before I want to implement, I am trying to increase the velocity of me trying to play around with ideas before doing raw implementation. ...but that's just me.

Interesting, I really like balsamiq and still use it personally, despite work being a figma shop.

I find Figma useful for quick ideation on small projects to see potential constraints and challenge assumptions. The lower-fi, the better. I only do mobile-design to focus on essentials, use grayscale colors to not be distracted, and don't make a mobile global navigation. If it was a larger project though, I'd definitely consider sketching as the speed is so much faster. And then jump into code.

I can see authors point when it comes to smaller website or app. I work on enterprise products that are rather complex with large surface area. Despite being a pretty good coder (or at least used to be), I wouldn't attempt to iterate on changes directly in the code and link all the flows etc. It would take much longer and I'd lose ability to make rapid changes.

Figma could adapt by making something that actually produces code well too? Although it would add a lot of complexity and designers might not like having to make different versions for different platforms, like the 'android', 'ios', 'flutter', 'web', etc. There are tools like judo.app that make 1:1 native SwiftUI designs.

Figma is a cursed midpoint between useful and easy to make wireframes, and a functional working interface that can be refined later.

my push back on this is that unless you have a pretty robust visual design system the outputs are going to be incredibly unoriginal. Yes it will make solving UX problems faster but at the cost of visual differentiation. There is always going to be a place for high fidelity exploration for styling innovation and brand identity.

Interesting thread, because last week I was tinkering with an idea I had built out ( AI assistant for browser-based UI development), and I was worried that there was no point because Figma will inevitably do the same, and they'd dwarf the raw HTML/CSS/JS designers. Maybe not?

Figma is for people to share and collaborate between team members. Especially between designers and devs, but devs at my company use it directly as well. You get something picture perfect that others can comment on or tweak. You can update it easily. Try out different colors or images or icons rapidly. You then also have visual documentation that can be sent to business people or partners.

If it’s just you, you don’t strictly need it. Personally though, I find it really useful precise because I’m not a great designer. I can fiddle around with sizes and layouts in figma until I get it the way I want it, then I turn that into code. I could jump straight from scribble to code, but having that middle step where I can exercise the idea without screwing with components or css feels nice.

Empowered with chatGPT (now claude), my partner as a designer pulls off extremely workable implementations of all different ideas without much need for sketching in a non-functional design tool.

When she does draft in design tools it’s usually more graphic in nature (branding etc).

There's this, which is more "will we fire all the designers?" (No), and there's the other massive problem: they were a nice, simple, web-native thing that was easily positioned to displace Photoshop and Sketch.app.

They never really successfully landed things that we used to call "major version bumps" and it's devolved into quite a mess. Not anywhere near Photoshop-level, but...it's a strange situation to me because you could build a successful business based on the premise of "that, but only 60% of it, with 5% of the headcount"

Note: Professionally I do practically nothing with the frontend of web development, so my experience may be far from normal, but when I do have to do something frontend related for personal work or the rare work-related task, I prefer a very rough wireframe using something like https://excalidraw.com/

Somewhat related: tldraw has amazing demos of generating code from sketches https://x.com/tldraw/status/1814046549522964692

I think Figma is fairly interested in lofi mockups too thus Figjam.

Their components aren’t code exactly but I think that’s because they will ultimately directly output / sync full components to a variety of platforms from their abstracted representation.

> Designers who can code spend more time sketching and less time in Figma.

Well, that’s because they can code.

For the rest of designers, or designers working in a team. Figma will remain where it is

Or Figma becomes the IDE? Not the direction I like (I like coding), but it kinda makes sense (for Business People?) to have "Export As Final App" in Figma.

Genuinely curious for those looking to design closer to code - doesnt Webflow fit the bill ?

framer makes a few steps up from figma and that's why I design/prototype straight in framer these days: you get all the wysiwyg of figma and infinite canvas while supporting breakpoints and publishing to the web for testing

i'm working on build the 'missing tool' ridd mentioned, a tool that blurs the line between design and front-end. if you're interested in learning more hit me up at ahmed@designwithfalcon.com :)

The future is Miro. I've noticed that I can create mockups out of boxes more quickly than drawing something with pen and paper, then putting tons of notes and arrows, then just implementing it.

I honestly cannot understand the hype around figma. it's such a weak product. it's laggy, the interface is not fantastic and it isn't even able to convert the proposed interfaces to code?

why would I want to use figma when I could use a non-laggy product that can convert my designs to code?

who the hell is Steve Jobs

Figma passed on my resume, so I’m not particularly incentivized to leverage my (very deep, thank you) engineering / design / UX expertise and offer my product guidance for free. They have a ton of momentum, so there’s a lot of room to make mistakes before it shows up as more than a blip in the quarterly numbers. They’ll probably be fine without me, but seems like an unnecessary risk. ;)

I'm a designer. I built brainglue.ai without Figma, a design system, or a UI library. I just went directly to code (react+tailwind) and let a style organically emerge.

I'm not saying that I'm a unicorn and that my idea-to-code-to-design execution is flawless, but I certainly believe that in this situation, if I hadn't done it this way, I wouldn't have done it all. However, doing this would be wasteful or dumb in almost every other situation that requires my design output.

People pay for Figma precisely because it's a middle ground. It was a middle ground before, and it will continue to be unless something fundamental changes.