9 ms·

Will Figma become an awkward middle ground?

147 points by ridd_design 2y ago

egypturnash 2y ago
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?
- refulgentis 2y ago
  I don't know if these are supposed to be leading questions, or questions combined with assuming an answer to make a point, but tl;dr code export is good.
  - egypturnash 2y ago
    I genuinely have no idea whether Figma's current code export is any better than FrontPage or Dreamweaver. I do web design stuff about once every four or five years and it mostly involves me firing up TextMate to edit Wordpress themes.
- ridd_design 2y ago
  How incentivized is Figma to invest in a world where fewer developers pay for seats is the real question
usaphp 2y ago
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.
game_the0ry 2y ago
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.
- ctward 2y ago
  I think in the future product designers will shift into two factions. Live code generation and design system development. Design systems will be the backbone of any quality AI interface generation system. How we build those design systems will be the interesting part. Will most people unify around material/carbon or will they invest in house teams to ensure their UX doesn't fall behind the competition?
- brigadier132 2y ago
  My experience is that you should never code and design at the same time for non-trivial products. When I'm doing design work, there is a product spec already defined but it almost always changes once initial designs are completed and people have a better understanding of how it would work in practice. If you were to code and design at the same time you would inevitably writing some logic as well and this often turns into wasted effort.
  - asoneth 2y ago
    Came here to write the same. I used to teach at a UX grad program where students were required to learn both design and development. But doing both on the same project was almost always a mistake -- the designer has to deeply understand and advocate for the end-user's mental model while the developer has to deeply understand the technical model and constraints. Attempting to do both often end up conflating them or compromising on at least one of them. Sort of like how many lawyers are skilled enough to handle either prosecution or defense but few do both on the same case. I think there's a Nielsen/Norman article on this but can't find it at the moment.
snide 2y ago
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.
- chatmasta 2y ago
  Agreed that in most cases all this extra work and attention to detail is essentially wasted effort that never sees the light of day. But it’s possible to extract value from it if you have a culture where designers build prototypes, and you can use those prototypes for user testing, feedback, demos and pitches, while the code is being built. But it’s rare that companies have this culture.
  - ketzo 2y ago
    Really good (and underdiscussed) point that Figma designs are not just for consumption by developers. I know this is a cliche phrase, but when you're trying to align stakeholders (PM, manager, VP, dev lead) on a product, it is genuinely very useful to have really nice, hi-fi mockups to make sure everyone is talking about exactly the same stuff. It's also definitely a scale thing. If you have 500 developers, it's probably worth putting in some extra sweat just to make sure they're all using the exact same button, etc If you have 10 devs... yeah, hard to justify a super-perfectly-polished design system for every single bit of your frontend, IMO.
- uxcolumbo 2y ago
  I wouldn’t call Figma a prototype tool. It’s pretty bad at prototyping sophisticated interactions. They are canvas based clickable mock-ups with fancy transitions and a few more things. But it can’t generate / export to HTML which comes in handy when you need to use it offline.
xnx 2y ago
Figma is a cursed midpoint between useful and easy to make wireframes, and a functional working interface that can be refined later.
rbancroft 2y ago
Interesting, I really like balsamiq and still use it personally, despite work being a figma shop.
- tracker1 2y ago
  Used to use it a lot, still like it and the handful of times I've needed something similar, it's what I reach for.
brrrrrm 2y ago
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).
ctward 2y ago
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.
- ridd_design 2y ago
  it's a good push back. I do think this assumes some (small) design language to extrapolate. But that's also something that will become borderline free in an AI world so I think it's a safe assumption. What's more interesting that doesn't exist yet is the ability to create more compelling visual languages/systems based on inspiration screenshots. That's a big unlock IMO. Everything right now is very generic.
refulgentis 2y ago
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"
- novok 2y ago
  As a mobile engineer, I do not have the visual & product skills that designers have. They can create something visually appealing and aligned much faster than I can and have all sorts of skill sets that take a while to hone. I might have more taste than the typical backend engineer, but it doesn't really translate to visual skills to the level of most designers.
deleted 2y ago
[deleted]
deleted 2y ago
[deleted]
GenerWork 2y ago
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.
- ridd_design 2y ago
  author here I'm also a product designer! I'm skeptical of the current approach to AI-generated interfaces. But am a big believer that AI will fundamentally change the way we design products. My high-level hypothesis is that in the same way browser-based design (Figma) displaced Sketch... code-based design will displace Figma. It will start with the longtail and smaller teams. Figma has a stranglehold on enterprise. But I refuse to believe I will be making vector pictures of products in the longrun. It will feel as easy to design interfaces in code. The article is an attempt at discouraging text-based prompting in that world though. I'd much rather have a modern sketching/wireframing tool connected to my code base and design system.
- chamsom 2y ago
  Getting designers willing to setup their workstation to hand code a React app with dozens of dependencies and be constrained by the DOM is not going to go very well. And then doing it all over again with several other web libraries/languages. This is not even design, it's a developer role who just happens to paint UI with code.
tracker1 2y ago
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.
legitster 2y ago
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.
- willsmith72 2y ago
  That's just bad designing. Good designers use the Figma equivalent of flexboxes and develop responsible designs. How is this react related? You could always write crappy css. A team creating non responsive react apps would not create responsive non-react apps
  - omnimus 2y ago
    They said email templates. That means no flex/grid/typefaces etc etc. emails are painful caveman html
    - kdazzle 2y ago
      My favorite factoid is that Windows desktop Outlook uses the MS Word engine to render emails. If regular emails are caveman html (which they are), then I don't know what that makes Outlook html.
      - Terr_ 2y ago
        Neanderthal HTML? Some crossover, but mostly a distinct competing lineage?
      - legitster 2y ago
        Within the confines of Microsoft Office, it kinda makes sense. You can copy+paste anything from any Office product and it will render in your email. It also makes doing mail merges much simpler. So as a corporate email tool it's a smart idea. Making it harder for advertisers to design fancy emails is just an added perk.
tazu 2y ago
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?
- d3vmax 2y ago
  When is the last time you restarted your mac? I had this guy complain to me, everything is laggy and chrome is slow (memory leaks?). A simple restart fixed everything. Clear your chrome cache/etc. Disable all extensions you dont use and try again. If it does not, try another browser.
  - hanniabu 2y ago
    Not using the website also helps
    - d3vmax 2y ago
      Was just trying to troubleshoot for the sake of curiosity. But yeah, your method works. :D
- urban_alien 2y ago
  Same for me on FF Android. Unbeliveable sluggish scrolling. Couldn't read the article.
  - FractalHQ 2y ago
    Strange… my iPhone renders it instantly with 0 issues.
- omnimus 2y ago
  The website is made in framer (https://www.framer.com/ https://www.framer.com/) no code tool. If you look at Framer homepage it's also laggy to me on my macbook. It's worst on FF. I don't think its the scroll effects but many blurs/shadows - they seem to be less performant in FF than in Blink and since everybody test these in chrome... you got this outcome.
toddmorey 2y ago
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.
grumple 2y ago
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.
mvellandi 2y ago
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.
novok 2y ago
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.
dcchambers 2y ago
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/ https://excalidraw.com/
permo-w 2y ago
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?
- kajecounterhack 2y ago
  If you work on a big team, collaboration is everything. Figma enables collaboration in a way that very few other tools allow. SOTA before Figma was sketch files in dropbox or emailing them back and forth. A lot of commenters here are lamenting the practicality of modern design culture (which is often centered around figma) for smaller teams / earlier projects where collaboration may not be as much the bottleneck. The tool itself is still very useful for small team collaboration though, and for folks thinking through ideas without having to code them up. Figma also pioneered putting complex tools into the browser. Today people take multiplayer and 60fps canvas for granted but Figma basically created the space. It was a humongous technical achievement and continues to be a very difficult thing to copy, though folks are obviously trying (e.g. Penpot). AI conversion of components to code is WIP for all toolmakers but obviously on the roadmap. Another hard problem you're kind of trivializing here. > why would I want to use figma when I could use a non-laggy product that can convert my designs to code? Can you list some examples?
whoisjuan 2y ago
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.
- jay_kyburz 2y ago
  Nice design! Small suggestion, I would preload the contents of each tab and the images in the circle after the main content is loaded. There was a good two second lag loading the images here in Australia.
  - whoisjuan 2y ago
    Ohh nice catch. Will do. Thanks
jjcm 2y ago
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 https://non.io [2] https://www.figma.com/design/im8a7L7axmbj0S0lm27NKa/Nonio-iOS-App?node-id=202-31798&t=fEbflJh4odj34LV7-0 https://www.figma.com/design/im8a7L7axmbj0S0lm27NKa/Nonio-iO...
- mikedelfino 2y ago
  When you say that reusing patterns and components is very hard to do in code, do you mean this applies even when building a reference page in code, with your design system and all of your components?
  - jjcm 2y ago
    The problem stems mainly from this statement: > with your design system and all of your components While this is straightforward to do, it doesn't encapsulate all of your patterns. No design system should. Design systems should capture the top 90% most-reused patterns, but there will always be patterns that live outside of that. Being able to visually see those, copy them, and tweak them in a context multiple team members can give feedback on is immensely valuable.
jmull 2y ago
> 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.
- fantasybuilder 2y ago
  Frankly, I am not even sure what "frontend code" means in this context. What stack? How is state managed? How is this code integrated into the larger production system? If by "frontend code" they mean fairly clean React code - that's just a small subset of what is actually needed for production.
  - willsmith72 2y ago
    Exactly. It's a dreamland where frontend styling is completely decoupled from logic and behaviour. Sounds good for a 2005 web designer.
karaterobot 2y ago
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.
deleted 2y ago
[deleted]
max2 2y ago
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.
shove 2y ago
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. ;)
infomiho 2y ago
Somewhat related: tldraw has amazing demos of generating code from sketches https://x.com/tldraw/status/1814046549522964692 https://x.com/tldraw/status/1814046549522964692
salehdigital 2y ago
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 :)
627467 2y ago
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
wiradikusuma 2y ago
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.
jillesvangurp 2y ago
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.
- silenced_trope 2y ago
  No different than designers pre-Figma. Many of the people in this thread are talking about designing web-sites. But I did work on mobile, specifically Android for the past decade. It's amazing to me how many designers have always just designed for iOS, which just had a few form factors (1 or 2 iPhone sizes (more now) and 1 iPad size) -- I could never get them to design "responsive" like for Android's various form factors (device sizes + different resolutions). Creating pixel-perfect designs that aren't flexible has always been the issue.
- pjmlp 2y ago
  Or worse, PowerPoint. I was involved in a few projects back in the glory JSF days, where the customers expected pixel perfect Web UIs, like they had been doing for years with Win32 and Motif. What a fun it was. /s
nmfisher 2y ago
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?
ndneighbor 2y ago
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.
rk06 2y ago
> 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
nicman23 2y ago
who the hell is Steve Jobs
thecleaner 2y ago
Genuinely curious for those looking to design closer to code - doesnt Webflow fit the bill ?
airtonix 2y ago
[dead]
patchorang 2y ago
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?
k_bx 2y ago
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.
kmusak 2y ago
[dead]

147 points by ridd_design 2y ago

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?

refulgentis 2y ago
I don't know if these are supposed to be leading questions, or questions combined with assuming an answer to make a point, but tl;dr code export is good.
- egypturnash 2y ago
  I genuinely have no idea whether Figma's current code export is any better than FrontPage or Dreamweaver. I do web design stuff about once every four or five years and it mostly involves me firing up TextMate to edit Wordpress themes.
ridd_design 2y ago
How incentivized is Figma to invest in a world where fewer developers pay for seats is the real question

usaphp 2y ago

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.

game_the0ry 2y ago

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.

ctward 2y ago
I think in the future product designers will shift into two factions. Live code generation and design system development. Design systems will be the backbone of any quality AI interface generation system. How we build those design systems will be the interesting part. Will most people unify around material/carbon or will they invest in house teams to ensure their UX doesn't fall behind the competition?
brigadier132 2y ago
My experience is that you should never code and design at the same time for non-trivial products. When I'm doing design work, there is a product spec already defined but it almost always changes once initial designs are completed and people have a better understanding of how it would work in practice. If you were to code and design at the same time you would inevitably writing some logic as well and this often turns into wasted effort.
- asoneth 2y ago
  Came here to write the same. I used to teach at a UX grad program where students were required to learn both design and development. But doing both on the same project was almost always a mistake -- the designer has to deeply understand and advocate for the end-user's mental model while the developer has to deeply understand the technical model and constraints. Attempting to do both often end up conflating them or compromising on at least one of them. Sort of like how many lawyers are skilled enough to handle either prosecution or defense but few do both on the same case. I think there's a Nielsen/Norman article on this but can't find it at the moment.

snide 2y ago

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.

chatmasta 2y ago
Agreed that in most cases all this extra work and attention to detail is essentially wasted effort that never sees the light of day. But it’s possible to extract value from it if you have a culture where designers build prototypes, and you can use those prototypes for user testing, feedback, demos and pitches, while the code is being built. But it’s rare that companies have this culture.
- ketzo 2y ago
  Really good (and underdiscussed) point that Figma designs are not just for consumption by developers. I know this is a cliche phrase, but when you're trying to align stakeholders (PM, manager, VP, dev lead) on a product, it is genuinely very useful to have really nice, hi-fi mockups to make sure everyone is talking about exactly the same stuff. It's also definitely a scale thing. If you have 500 developers, it's probably worth putting in some extra sweat just to make sure they're all using the exact same button, etc If you have 10 devs... yeah, hard to justify a super-perfectly-polished design system for every single bit of your frontend, IMO.
uxcolumbo 2y ago
I wouldn’t call Figma a prototype tool. It’s pretty bad at prototyping sophisticated interactions. They are canvas based clickable mock-ups with fancy transitions and a few more things. But it can’t generate / export to HTML which comes in handy when you need to use it offline.

xnx 2y ago

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

rbancroft 2y ago

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

tracker1 2y ago
Used to use it a lot, still like it and the handful of times I've needed something similar, it's what I reach for.

brrrrrm 2y ago

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).

ctward 2y ago

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.

ridd_design 2y ago
it's a good push back. I do think this assumes some (small) design language to extrapolate. But that's also something that will become borderline free in an AI world so I think it's a safe assumption. What's more interesting that doesn't exist yet is the ability to create more compelling visual languages/systems based on inspiration screenshots. That's a big unlock IMO. Everything right now is very generic.

refulgentis 2y ago

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"

novok 2y ago
As a mobile engineer, I do not have the visual & product skills that designers have. They can create something visually appealing and aligned much faster than I can and have all sorts of skill sets that take a while to hone. I might have more taste than the typical backend engineer, but it doesn't really translate to visual skills to the level of most designers.

deleted 2y ago

[deleted]

deleted 2y ago

[deleted]

GenerWork 2y ago

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.

ridd_design 2y ago
author here I'm also a product designer! I'm skeptical of the current approach to AI-generated interfaces. But am a big believer that AI will fundamentally change the way we design products. My high-level hypothesis is that in the same way browser-based design (Figma) displaced Sketch... code-based design will displace Figma. It will start with the longtail and smaller teams. Figma has a stranglehold on enterprise. But I refuse to believe I will be making vector pictures of products in the longrun. It will feel as easy to design interfaces in code. The article is an attempt at discouraging text-based prompting in that world though. I'd much rather have a modern sketching/wireframing tool connected to my code base and design system.
chamsom 2y ago
Getting designers willing to setup their workstation to hand code a React app with dozens of dependencies and be constrained by the DOM is not going to go very well. And then doing it all over again with several other web libraries/languages. This is not even design, it's a developer role who just happens to paint UI with code.

tracker1 2y ago

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.

legitster 2y ago

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.

willsmith72 2y ago
That's just bad designing. Good designers use the Figma equivalent of flexboxes and develop responsible designs. How is this react related? You could always write crappy css. A team creating non responsive react apps would not create responsive non-react apps
- omnimus 2y ago
  They said email templates. That means no flex/grid/typefaces etc etc. emails are painful caveman html
  - kdazzle 2y ago
    My favorite factoid is that Windows desktop Outlook uses the MS Word engine to render emails. If regular emails are caveman html (which they are), then I don't know what that makes Outlook html.
    - Terr_ 2y ago
      Neanderthal HTML? Some crossover, but mostly a distinct competing lineage?
    - legitster 2y ago
      Within the confines of Microsoft Office, it kinda makes sense. You can copy+paste anything from any Office product and it will render in your email. It also makes doing mail merges much simpler. So as a corporate email tool it's a smart idea. Making it harder for advertisers to design fancy emails is just an added perk.

tazu 2y ago

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?

d3vmax 2y ago
When is the last time you restarted your mac? I had this guy complain to me, everything is laggy and chrome is slow (memory leaks?). A simple restart fixed everything. Clear your chrome cache/etc. Disable all extensions you dont use and try again. If it does not, try another browser.
- hanniabu 2y ago
  Not using the website also helps
  - d3vmax 2y ago
    Was just trying to troubleshoot for the sake of curiosity. But yeah, your method works. :D
urban_alien 2y ago
Same for me on FF Android. Unbeliveable sluggish scrolling. Couldn't read the article.
- FractalHQ 2y ago
  Strange… my iPhone renders it instantly with 0 issues.
omnimus 2y ago
The website is made in framer (https://www.framer.com/ https://www.framer.com/) no code tool. If you look at Framer homepage it's also laggy to me on my macbook. It's worst on FF. I don't think its the scroll effects but many blurs/shadows - they seem to be less performant in FF than in Blink and since everybody test these in chrome... you got this outcome.

toddmorey 2y ago

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.

grumple 2y ago

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.

mvellandi 2y ago

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.

novok 2y ago

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.

dcchambers 2y ago

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/ https://excalidraw.com/

permo-w 2y ago

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?

kajecounterhack 2y ago
If you work on a big team, collaboration is everything. Figma enables collaboration in a way that very few other tools allow. SOTA before Figma was sketch files in dropbox or emailing them back and forth. A lot of commenters here are lamenting the practicality of modern design culture (which is often centered around figma) for smaller teams / earlier projects where collaboration may not be as much the bottleneck. The tool itself is still very useful for small team collaboration though, and for folks thinking through ideas without having to code them up. Figma also pioneered putting complex tools into the browser. Today people take multiplayer and 60fps canvas for granted but Figma basically created the space. It was a humongous technical achievement and continues to be a very difficult thing to copy, though folks are obviously trying (e.g. Penpot). AI conversion of components to code is WIP for all toolmakers but obviously on the roadmap. Another hard problem you're kind of trivializing here. > why would I want to use figma when I could use a non-laggy product that can convert my designs to code? Can you list some examples?

whoisjuan 2y ago

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.

jay_kyburz 2y ago
Nice design! Small suggestion, I would preload the contents of each tab and the images in the circle after the main content is loaded. There was a good two second lag loading the images here in Australia.
- whoisjuan 2y ago
  Ohh nice catch. Will do. Thanks

jjcm 2y ago

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 https://non.io [2] https://www.figma.com/design/im8a7L7axmbj0S0lm27NKa/Nonio-iOS-App?node-id=202-31798&t=fEbflJh4odj34LV7-0 https://www.figma.com/design/im8a7L7axmbj0S0lm27NKa/Nonio-iO...

mikedelfino 2y ago
When you say that reusing patterns and components is very hard to do in code, do you mean this applies even when building a reference page in code, with your design system and all of your components?
- jjcm 2y ago
  The problem stems mainly from this statement: > with your design system and all of your components While this is straightforward to do, it doesn't encapsulate all of your patterns. No design system should. Design systems should capture the top 90% most-reused patterns, but there will always be patterns that live outside of that. Being able to visually see those, copy them, and tweak them in a context multiple team members can give feedback on is immensely valuable.

jmull 2y ago

> 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.

fantasybuilder 2y ago
Frankly, I am not even sure what "frontend code" means in this context. What stack? How is state managed? How is this code integrated into the larger production system? If by "frontend code" they mean fairly clean React code - that's just a small subset of what is actually needed for production.
- willsmith72 2y ago
  Exactly. It's a dreamland where frontend styling is completely decoupled from logic and behaviour. Sounds good for a 2005 web designer.

karaterobot 2y ago

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.

deleted 2y ago

[deleted]

max2 2y ago

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.

shove 2y ago

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. ;)

infomiho 2y ago

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

salehdigital 2y ago

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 :)

627467 2y ago

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

wiradikusuma 2y ago

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.

jillesvangurp 2y ago

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.

silenced_trope 2y ago
No different than designers pre-Figma. Many of the people in this thread are talking about designing web-sites. But I did work on mobile, specifically Android for the past decade. It's amazing to me how many designers have always just designed for iOS, which just had a few form factors (1 or 2 iPhone sizes (more now) and 1 iPad size) -- I could never get them to design "responsive" like for Android's various form factors (device sizes + different resolutions). Creating pixel-perfect designs that aren't flexible has always been the issue.
pjmlp 2y ago
Or worse, PowerPoint. I was involved in a few projects back in the glory JSF days, where the customers expected pixel perfect Web UIs, like they had been doing for years with Win32 and Motif. What a fun it was. /s

nmfisher 2y ago

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?

ndneighbor 2y ago

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.

rk06 2y ago

> 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

nicman23 2y ago

who the hell is Steve Jobs

thecleaner 2y ago

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

airtonix 2y ago

[dead]

patchorang 2y ago

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?

k_bx 2y ago

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.

kmusak 2y ago

[dead]