Figma OSS Alternative(penpot.app)
penpot.app
Figma OSS Alternative
https://penpot.app/
99 comments
It is hard to replicate or actually compete with proper proprietary design tools. There's a ton of UX and performance enhancements that are done over the years and IMHO OSS can never get to that. I'm speaking specifically about design tools. There have been a lot of tools that have been around with not a lot of adoption. I like and appreciate the effort and it is definitely a massive effort to build these OSS alternatives to design tools, but it is hard to actually pick, use, and make them your daily drivers. Design tools is one of those categories of software where proprietary is definitely a better choice to choose over OSS.
Inkscape is a daily driver for me and its OSS
It has its quirks and even some annoying bugs but where it excells its IMO way better than what any competing/proprietary design tool can do (vector and bitmap exporting, vector+bitmap combined layering, shape/colors/text layout, PDF editing/creating, vector pen tool, etc). I use it to create UI for games & apps and more generally to build sprawling UX scenarios and concept flowcharts.
In more recent builds its performance has become quite good which was a problem it had before. Granted, lots of room for improvement still particularly wish it had more natural flowcharting capability.
It has its quirks and even some annoying bugs but where it excells its IMO way better than what any competing/proprietary design tool can do (vector and bitmap exporting, vector+bitmap combined layering, shape/colors/text layout, PDF editing/creating, vector pen tool, etc). I use it to create UI for games & apps and more generally to build sprawling UX scenarios and concept flowcharts.
In more recent builds its performance has become quite good which was a problem it had before. Granted, lots of room for improvement still particularly wish it had more natural flowcharting capability.
Inkscape is amazing, and it's had incredible growth. I remember using it 5+ years ago and it was incredibly buggy and the UX was terrible. I now use it extensively and it rocks.
Concurring that Inkscape today is awesome, while it definitely was not a decade ago (how the time flies... and decade ago it was already... ten years old or so!).
Disclaimer: I'm an engineer not a UX/UI designer, and I use Inkscape mostly for graphic designs and the odd super-simple CAD stuff where I don't think starting qcad is worth it. Still, I'm immensely happy that I can just get stuff done in Inkscape and that everything inside makes sense and is generally discoverable "solely by logic".
Disclaimer: I'm an engineer not a UX/UI designer, and I use Inkscape mostly for graphic designs and the odd super-simple CAD stuff where I don't think starting qcad is worth it. Still, I'm immensely happy that I can just get stuff done in Inkscape and that everything inside makes sense and is generally discoverable "solely by logic".
Another vote for Inkscape here - amazing tool. I probably use less than 1% of it's functionality, but it is far and away the best PDF editor I've come across (I work with a lot of design drawings that started life as DWG/CAD files, are exported to PDF and sent around for proofing/review and need to have changes marked up on them).
Nice hearing about Inkscape, I have to give it a try now that I’ve quit Paydobe.
Is Inkscape good for svgs?
Is Inkscape good for svgs?
SVG is Inkscape's native file format (albeit it adds some of its own extensions by default), so yes.
Indeed, that is primarily where it excels. Your layered source files are SVG and you can export to SVG (and you can import in SVG obviously). The bitmap selection/exporting is also excellent as such you can have these massive vector canvases (with any number of bitmaps and vector shapes/graphics mixed in) and quickly export any slice or selection you make without having to resize the canvas or copy/paste somewhere - and it will remember the export path when you click on the object or layer again later (aside from a bug with symlinks on Linux); ideal for iterative work/exporting revisions to clients or colleagues.
Yeah it's great for SVGs. I still use illustrator because the type tools are a lot easier to work with for constant use,I already have a CC subscription grandfathered in at a cheap rate, and some things in it I'm just plain-old used to... But I could deal with Inkscape if I decided to dump Adobe. Gimp not so much. I'd definitely be buying affinity's photo editor or something for raster work.
> IMHO OSS can never get to that.
Because of the economics of software R&D. Professionals are not willing to stand around a tool that does not do what they need to make money themselves. They simply want to pay and use for a "finished" product, but never stop to consider that (a) software is never finished and (b) funding its development does not mean that you need to use it exclusively.
Companies/professionals would stand to benefit a lot if they funded FOSS alternatives, even if just as an hedge against their "main" tool. Imagine if every design agency got 5% of their "Adobe Tax" and donated to the devs of Penpot, Gimp and Inkscape. No strings attached, just with a "here, none of you need to worry about funding". In just a couple of years all these OSS tools would catch up, and the companies would be able to at the very least use the existence of FOSS alternative as a negotiation tactic when dealing with sales team from Adobe.
Because of the economics of software R&D. Professionals are not willing to stand around a tool that does not do what they need to make money themselves. They simply want to pay and use for a "finished" product, but never stop to consider that (a) software is never finished and (b) funding its development does not mean that you need to use it exclusively.
Companies/professionals would stand to benefit a lot if they funded FOSS alternatives, even if just as an hedge against their "main" tool. Imagine if every design agency got 5% of their "Adobe Tax" and donated to the devs of Penpot, Gimp and Inkscape. No strings attached, just with a "here, none of you need to worry about funding". In just a couple of years all these OSS tools would catch up, and the companies would be able to at the very least use the existence of FOSS alternative as a negotiation tactic when dealing with sales team from Adobe.
I don't think that matters. If a tool isn't as good as the leading closed source commercial offering there are still good reasons to use it - you might not get enough value to make it worth paying, using open source might be an ethical choice, the open version might still be good enough, and so on.
It's not like there aren't commercial design tools other than Figma either. People choose to use and pay for those tools instead of Figma. The idea that there's one 'industry standard' choice and everything else is wrong is obviously nonsense. Having an OSS option as well is only a good thing.
It's not like there aren't commercial design tools other than Figma either. People choose to use and pay for those tools instead of Figma. The idea that there's one 'industry standard' choice and everything else is wrong is obviously nonsense. Having an OSS option as well is only a good thing.
People have been tooting the same horn for decades. And it's true, but if some OSS becomes mainstream, like Blender, all the sudden, the UX gets fixed.
Bad UX is one big reason for not becoming mainstream
Developers create crappy open source communities that only a certain sort of developer can even bare being involved in, let alone anyone with another skill set (like UX design), and still, in the year 2024, routinely belittle these skill sets, then proceed the crank out the most obviously “designed by engineers” looking interfaces you’ve ever seen, say “but it’s for power users, you just have to learn it!”, and call it a day.
Honestly, so many projects simply reap what they sow here.
Honestly, so many projects simply reap what they sow here.
Yeah I’m a UX designer (and dev) and the hostility toward UX and UX principles in the open source community is disheartening, for sure. People use things that are easy and pleasant to use. That shouldn’t be controversial.
(As far as this program is concerned, my general thoughts are — give it a few years. It took Figma years to supplant Sketch, it took Sketch years to supplant the Adobe suite. I think that the desire from the community is there, as there are really scummy business practices that the Figma team has put in place, and it’s squeezing departments/seats/licenses, which is stupid obvious artificial scarcity that they’re using to extract as much as they can before something useful and FOSS comes around and eats their lunch.)
(As far as this program is concerned, my general thoughts are — give it a few years. It took Figma years to supplant Sketch, it took Sketch years to supplant the Adobe suite. I think that the desire from the community is there, as there are really scummy business practices that the Figma team has put in place, and it’s squeezing departments/seats/licenses, which is stupid obvious artificial scarcity that they’re using to extract as much as they can before something useful and FOSS comes around and eats their lunch.)
Blender was a commercial product before becoming OSS, and some of the original folks are still around.
I'm not sure how I feel about Blender, the UI in the older versions was notoriously niche if not outright confusing. Here's a video comparing the versions in a simple example task: https://youtu.be/Vz_GxPMActM
Whatever caused it to succeed and catch enough attention to be continuously improved, I'm thankful for that. Same as with game engines like Godot and other similar FOSS projects, maybe even LibreOffice not dying like OpenOffice did, though that's a whole tale in of itself. Actually, I'll similarly celebrate improvements in proprietary software, too.
Then again, I still think that Inkscape and some of the other software that gets touted as good is actually not very usable, so I'm a bit opinionated.
Whatever caused it to succeed and catch enough attention to be continuously improved, I'm thankful for that. Same as with game engines like Godot and other similar FOSS projects, maybe even LibreOffice not dying like OpenOffice did, though that's a whole tale in of itself. Actually, I'll similarly celebrate improvements in proprietary software, too.
Then again, I still think that Inkscape and some of the other software that gets touted as good is actually not very usable, so I'm a bit opinionated.
Blender has been open source for over 20 years. UX of the proprietary version was dismal.
Its just proves that UX can get better. Blender has had particularly bad UX (when it was commercial soft) and 3D is one of the most challenging software.
Its just mostly about focus of the project and agency of people trying to make UX better.
Its just mostly about focus of the project and agency of people trying to make UX better.
Yea, the question really is will the OSS tool survive long enough to have the UX fixed. In Blender's case, yes, but that's not been true for many other OSS projects. Just look at how many dead electron projects are floating around the internet.
Arguably it's more important to create software that solves a problem first so there is an incentive for people to keep using it. But the less people use it, the longer it will take for the UX to improve organically (see Blender and Inkscape).
Arguably it's more important to create software that solves a problem first so there is an incentive for people to keep using it. But the less people use it, the longer it will take for the UX to improve organically (see Blender and Inkscape).
GitLab is an example of a company that started by heavily being influenced by GitHub and building a business around it.
Figma is stupid expensive, especially when you onboard developers, so it seems like a GitLab esque play could be disruptive.
I wonder if over time a tool that blends the developer, product and design experience more seamlessly will catch on. Having reactive code that is driven by the underlying design in a cohesive way perhaps.
Figma is stupid expensive, especially when you onboard developers, so it seems like a GitLab esque play could be disruptive.
I wonder if over time a tool that blends the developer, product and design experience more seamlessly will catch on. Having reactive code that is driven by the underlying design in a cohesive way perhaps.
Bad thing about Figma is it isn't clear at all that you're causing new subscriptions. If you just share with someone you begin incurring more subscriptions and an admin has to go through and prune them every so often, it'll also happily charge you for empty seats that don't even specifically get filled with new shares, it creates new seats instead.
Have you tried penpot? Or are you talking about that time you tried gimp or Inkscape? And what about Blender?
Blender is very impressive proof that with a few years of hard work you can go from one of the worst examples of bizarre "open source ui/ux" into something very usable. Never would have thought it possible a decade ago.
A few years of hard work made possible by substantial injections of cash by a lot of the big players in the industry. Epic, Nvidia, Amd, Amazon, Intel, Meta etc. I'm sure the $150k/mo of continuous donation support also helps.
In this aspect, Blender is a very unique OSS project.
In this aspect, Blender is a very unique OSS project.
Wasn't it closed source UI/UX from Not a Number Technologies?
Or Krita, just started playing with that recently and WOW
Krita is a great counterexample for your claim.
> IMHO OSS can never get to that
Uh, why? It's not magic. Sure, it's a problem that most OSS projects don't focus on UX and perf, but there's no intrinsic reason why they couldn't.
Uh, why? It's not magic. Sure, it's a problem that most OSS projects don't focus on UX and perf, but there's no intrinsic reason why they couldn't.
One of the things I was gobsmacked by the first time I used Figma years ago was its performance, which has only gotten better with time. From what I understand, they've built some custom stuff for WebGL for their renderer.
Here it looks like it's powered by React. I'm curious if anyone's used both and can compare the performance of the two.
Figma is the gold standard when it comes to performance and optimization, and is basically a native app that happens to be inside your browser. The co-founder and previous CTO Evan Wallace also created esbuild which powers most of the modern bundling tools.
The only other web app I can think of doing the same thing is Google Docs, which uses it's own canvas based renderer with an svg overlay for accessibility. I feel it's telling that Google thought leaning on their own browser (through HTML/CSS) wasn't even good enough for typesetting.
The only other web app I can think of doing the same thing is Google Docs, which uses it's own canvas based renderer with an svg overlay for accessibility. I feel it's telling that Google thought leaning on their own browser (through HTML/CSS) wasn't even good enough for typesetting.
This Evan Wallace fella sounds like an accomplished individual
It's becoming more common. Confluence whiteboards is all WebGL, even the text rendering.
Google Docs used to be Writely though; they acquired it. It predates Chrome.
the switch to canvas rendering is recent though
https://workspaceupdates.googleblog.com/2021/05/Google-Docs-...
https://workspaceupdates.googleblog.com/2021/05/Google-Docs-...
Oh! I didn't know that. Fair enough - that does rather make the point.
I've seen people say this a lot, and I have the exact opposite takeaway. Figma is one of the slowest and laggiest applications I've ever used and a shining example to me of why we need to stop building rich software experiences in web browsers.
On Linux + Firefox, basic navigation, like panning and zooming around in a file, is painfully laggy. In FigJam, try using the marker to draw any curved line--it updates at like 2 frames per second, which makes it completely unusable for handwriting text or drawing diagrams. Excalidraw, on the other hand, in the same browser, is perfectly lag-free.
Every time a designer sends me a Figma I just ask for exported images because using the website is an exercise in frustration. And don't even get me started on the impossible, spaghetti-on-an-infinite-canvas UX requiring endless zooming and dragging...
On Linux + Firefox, basic navigation, like panning and zooming around in a file, is painfully laggy. In FigJam, try using the marker to draw any curved line--it updates at like 2 frames per second, which makes it completely unusable for handwriting text or drawing diagrams. Excalidraw, on the other hand, in the same browser, is perfectly lag-free.
Every time a designer sends me a Figma I just ask for exported images because using the website is an exercise in frustration. And don't even get me started on the impossible, spaghetti-on-an-infinite-canvas UX requiring endless zooming and dragging...
I use Figma every single day for work, and have virtually no performance issues, even with projects with 100s of frames.
I just tried using the marker in Figjam, and it works perfectly fine for me. I think you may be running into an incompatibility between your browser or settings and Figma.
As for the infinite canvas, this is very handy as a designer, it makes it much easier to work across multiple frames at once, such as quickly zooming out to look at the flow or building a prototype, all the while zooming in to fix issues.
I just tried using the marker in Figjam, and it works perfectly fine for me. I think you may be running into an incompatibility between your browser or settings and Figma.
As for the infinite canvas, this is very handy as a designer, it makes it much easier to work across multiple frames at once, such as quickly zooming out to look at the flow or building a prototype, all the while zooming in to fix issues.
I get what you are saying, but have you tried Clickup? For a glorified todo app, it manages to be so slow that Figma feels like a breeze.
I also happen to use Linux + Firefox and so I have to agree that it is definitely not a joy to use Figma, even for small projects.
I also happen to use Linux + Firefox and so I have to agree that it is definitely not a joy to use Figma, even for small projects.
Why don’t you use a different browser to work with Figma files if yours can’t run it properly?
I switched to penpot for a little bit after the Adobe acquisition was announced because I figured Figma as we knew it would cease to exist. However, I found that there were little differences between the two that gave it a learning curve and I noticed that I missed little niceities in Figma. I went back to it after a few weeks and after the acquisition was revoked, I feel better about sticking with Figma. I love the company and the story behind it's creation, and plan on continuing supporting what I think is a better product. I'm happy that penpot exists though to keep Figma in check from excessively pricing their product.
I shudder to think what excessive pricing might look like to you :)
Previous discussions:
* Penpot 2.0 Released https://news.ycombinator.com/item?id=39978781 (131 points | 21 days ago | 27 comments)
* Penpot: Open-source design and prototyping platform https://news.ycombinator.com/item?id=32851262 (1145 points | Sept 15, 2022 | 128 comments)
* Penpot 2.0 Released https://news.ycombinator.com/item?id=39978781 (131 points | 21 days ago | 27 comments)
* Penpot: Open-source design and prototyping platform https://news.ycombinator.com/item?id=32851262 (1145 points | Sept 15, 2022 | 128 comments)
On these previous comments it seems like no one bothered to try it. I wonder if we'll get some people with some better feedback this time around because the product does look stunning.
I've been using it for a year for my open source projects before I had a Figma license for contract work. I'd say it's VERY capable, performance can be iffy with enormously big files, but generally on-par with Figma. Their workflow is closer to webdev, so handover to devs is easier, but they lack some of the neat component magic of Figma (last time I've seen they don't have component changes for hover/click states for example).
That being said, it's FOSS, anyone can help, they will never have a rugpull like almost getting bought by Adobe.
That being said, it's FOSS, anyone can help, they will never have a rugpull like almost getting bought by Adobe.
Lunacy does this for free. And you don't need to log in. And it has a native linux client.
https://icons8.com/lunacy
https://icons8.com/lunacy
Wow - it sounds very good on paper. It supports most of the features I would need to migrate to it also.
But from what I see it is closed and proprietary?
Penpot has a better export to code. I don't make a lot of graphical websites but I would use this if I had to make a lot of custom graphical pages with lots of code / functions in it.
Does anyone know what license this is released under? I looked for a few minutes on the site but I didn’t find it.
What I usually do for Open Source, instead of browsing the website, check on GitHub.
https://github.com/penpot/penpot
The license on GitHub is featured prominently as MPL-2.0
The license on GitHub is featured prominently as MPL-2.0
MPL-2
With all these "wonderful" tools and frameworks how comes that the UX of the web is less and less pleasing?
It's like we keep improving the brushes to please the artists but the pictures are crap.
Since the rise of web applications I mainly learned one thing: Waiting.
It's like we keep improving the brushes to please the artists but the pictures are crap.
Since the rise of web applications I mainly learned one thing: Waiting.
It's incrediblly slow and inefficient. Both client and sever. They need to rewrite in WASMb+ webgl for frontend.
When I saw they committed to using SVG as their renderer out of some philosophical principle around purity and “using the platform”, I knew the performance potential was doomed from the start. It’s was far too easy to grind penpot to a halt last I tried it.
That is the biggest pain point. They are not even using canvas , let alone webgl/webgpu.
We had tried designing and all it can casually handle is about 5 pages at the same time in a view , after than zoom become jittered and browser crashes started to happen. Also the server disconnects happen frequently ( i am running a quad core Xeon server with 64 GB Ram , it eats about 20GB of RAM and very slow)
Downvote all you want bots , that is the truth. If you can try to come up with proper arguments.
Downvote all you want bots , that is the truth. If you can try to come up with proper arguments.
[deleted]
What is the fascination with Figma? Maybe my expectations are just wrong, but as long that it cannot generate reusable HTML templates and CSS from the mock-ups it's just a fancy Microsoft Publisher which doesn't make life easier for anyone but designers. If anything it only serves to move designers further away from the developers doing the implementation.
Am I just holding it wrong?
Am I just holding it wrong?
> doesn't make life easier for anyone but designers
It may sound crazy to a developer, but Figma is a design tool for designers whose features and workflows respond to the needs of, indeed, designers.
It may sound crazy to a developer, but Figma is a design tool for designers whose features and workflows respond to the needs of, indeed, designers.
Designers sure do seem to complain about figma a lot tho.
Designer here. I have lots of things I can point out for Figma to address or change, but the reason I have these off the top of my head is:
- out of all tools, I picked Figma as clearly the best for UI design
- I've used it enough that I run into multiple edge cases and limitations
- it's my job to identify such limitations and document how they might be addressed by changing the product.
Addressing the root comment, Figma is a design tool with basic prototyping offered, it's not not a prototyping or web publishing tool. It's why it's not judged as a Frontosge (or rather 25 years later, Webflow) alternative.
- out of all tools, I picked Figma as clearly the best for UI design
- I've used it enough that I run into multiple edge cases and limitations
- it's my job to identify such limitations and document how they might be addressed by changing the product.
Addressing the root comment, Figma is a design tool with basic prototyping offered, it's not not a prototyping or web publishing tool. It's why it's not judged as a Frontosge (or rather 25 years later, Webflow) alternative.
Designer here. They really shouldn't because it is de facto the industry standard and no other software even comes close. Why do you think Adobe was willing to buy it for 20B
It's the same as with Photoshop. Sometimes, stuff doesn't work, but it's the best that's around.
Doesn't ever profession complain about the tools they use?
No skilled engineer I've met has had any issue turning a Figma design into a HTML/CSS. That's their job. If someone protested that they couldn't reproduce a Figma design without it spitting out HTML/CSS for them, that would be a serious red flag about their abilities.
There are also tools that convert figma to html
I have no problem hacking up some figma design in html / react. The problem is that it isn't reusable, it isn't clean components, styles are copy pasted from figma to the component and unlined with BEM.
The problem isn't a skill issue on my end, I could build it cleanly, I just don't know why I would when the other 1200 engineers I work with don't have any incentive to do so.
Figma is a shit version of Dreamweaver, a html based WYSIWYG from the 00s.
The problem isn't a skill issue on my end, I could build it cleanly, I just don't know why I would when the other 1200 engineers I work with don't have any incentive to do so.
Figma is a shit version of Dreamweaver, a html based WYSIWYG from the 00s.
Figma made a mistake including the absolute positioning in their Dev mode. It's never useful, and leads to confused engineers like this.
Figma is a design tool. It is used by designers as a way to build the visual mocks of software. It's not building HTML under the hood. As a frontend engineer, I have to interpret the designs given to me and translate the layouts into something that will be responsive, cope with different data, etc. that part is the job of a frontend engineer, and so far there is no tooling that solves that.
The Figma dev mode helps shortcut some of that work, by providing easy copy-paste for attributes like background, border, fonts, spacing etc. it's a timesaver. But you should never copy the whole thing.
Figma is a design tool. It is used by designers as a way to build the visual mocks of software. It's not building HTML under the hood. As a frontend engineer, I have to interpret the designs given to me and translate the layouts into something that will be responsive, cope with different data, etc. that part is the job of a frontend engineer, and so far there is no tooling that solves that.
The Figma dev mode helps shortcut some of that work, by providing easy copy-paste for attributes like background, border, fonts, spacing etc. it's a timesaver. But you should never copy the whole thing.
figma has a perfectly capable component system, so maybe the fault is on the side of your designer not caring about your component needs.
If a project is really mature, reusable components in design tools can work. But for early stage stuff, they can quickly prove more trouble than they're worth.
The designer's job is to think creatively, on behalf of the user, through the entire system, the states, the transitions. Faffing around with reusable components gets in the way of the right kind of thought, IMHO. It's like the design version of big complex class hierarchies. Done too early, they will really slow you down.
The designer's job is to think creatively, on behalf of the user, through the entire system, the states, the transitions. Faffing around with reusable components gets in the way of the right kind of thought, IMHO. It's like the design version of big complex class hierarchies. Done too early, they will really slow you down.
I completely agree. But I've replied to someone who's been complaining that they don't get reusable components "from figma" when, in fact, it's the designers choice to not do that (for whatever good or bad reason).
Doesn't that very much depend on the design? You could say the same about turning a Photoshop file into a design. If the design is reasonable, then no, it's not that hard.
Maybe our designers just use it wrong, but I don't think tools like this is all that valuable if it can't tell you which pages are based on the same HTML template. E.g. telling the developers: There are three different layouts in this projects, these are the pages for each template and here are the elements that are identical in each.
This may also be wrong usage, but giving you sizes and spacing in pixels is weird. Telling me that a button needs to be 29px from the element above is kinda dumb.
It's probably just me being old, but the people doing the design should always be the same people who are responsible for delivering the HTML and CSS. Developers just gets the templates. But I'm also from the time of webdesigners and not webdevelopers.
Maybe our designers just use it wrong, but I don't think tools like this is all that valuable if it can't tell you which pages are based on the same HTML template. E.g. telling the developers: There are three different layouts in this projects, these are the pages for each template and here are the elements that are identical in each.
This may also be wrong usage, but giving you sizes and spacing in pixels is weird. Telling me that a button needs to be 29px from the element above is kinda dumb.
It's probably just me being old, but the people doing the design should always be the same people who are responsible for delivering the HTML and CSS. Developers just gets the templates. But I'm also from the time of webdesigners and not webdevelopers.
I'm both a designer and developer, and even as a design-only tool, Figma is superior to all other web design apps I've used.
Things like auto layout, component variants, nested instances, global variables… are just fantastic to use. It's really well thought out and still incredibly performant.
The only other tool that was close is Sketch, but the Figma experience is just better in every sense. I only wish I could use it offline.
Things like auto layout, component variants, nested instances, global variables… are just fantastic to use. It's really well thought out and still incredibly performant.
The only other tool that was close is Sketch, but the Figma experience is just better in every sense. I only wish I could use it offline.
> If anything it only serves to move designers further away from the developers doing the implementation.
Given the quality of many developer-designed UIs this can only be a good thing.
Developers often prioritize implementation expedience over user experience.
A lot of developers think that “clean code” is as important or more important than user experience. The job of a designer is to tell them that they’re wrong.
Given the quality of many developer-designed UIs this can only be a good thing.
Developers often prioritize implementation expedience over user experience.
A lot of developers think that “clean code” is as important or more important than user experience. The job of a designer is to tell them that they’re wrong.
Designer often prioritize design over user experience.
Custom mouse cursors, unaccessible images, non-obvious buttons, non-standard interactions, strobing lights, a million parallaxes.
A lot of designers think that "pretty" is the same as "usable".
Most devs I know, don't care about "clean code" itself, what they care about is _robustness_. If getting something to work requires thousands of lines of html, css, and javascript, then I can guarantee you that something is gonna look broken on some browser in some viewport size.
When designing you need to keep any mediums limitations in mind, be it paper or the web. The medium is the message. Browsers are buggy implementations of mediocre standards, if you design oblivious to their limitations things will inevitably be buggy, ugly and weird.
Designers can't just live in an ivory tower of auto-layouts that actually work, and have devs magically weave their dreams from garbage.
If we just replaced the web with figma (or if Figma had a runtime like Rive, to just run the entire thing with the web as the platform), I'd be more than happy, not being editor-first is the biggest flaw of the web, and figmas auto-layout is a lot less sucky. But until then, (good) designers have to learn the basics of the tech stack too, and figma does not help in that department.
Custom mouse cursors, unaccessible images, non-obvious buttons, non-standard interactions, strobing lights, a million parallaxes.
A lot of designers think that "pretty" is the same as "usable".
Most devs I know, don't care about "clean code" itself, what they care about is _robustness_. If getting something to work requires thousands of lines of html, css, and javascript, then I can guarantee you that something is gonna look broken on some browser in some viewport size.
When designing you need to keep any mediums limitations in mind, be it paper or the web. The medium is the message. Browsers are buggy implementations of mediocre standards, if you design oblivious to their limitations things will inevitably be buggy, ugly and weird.
Designers can't just live in an ivory tower of auto-layouts that actually work, and have devs magically weave their dreams from garbage.
If we just replaced the web with figma (or if Figma had a runtime like Rive, to just run the entire thing with the web as the platform), I'd be more than happy, not being editor-first is the biggest flaw of the web, and figmas auto-layout is a lot less sucky. But until then, (good) designers have to learn the basics of the tech stack too, and figma does not help in that department.
This is a very skewed definition / classification of “design” and “designer”. Basically, anything you think is a waste of time is called “design”, and anything you think is good is called something else. This is just the professional version of highschool tribalist stereotyping and bullying. It’s a complete departure from reality. A just-decent designer will do what you’re asking. Not ‘big tech’ decent, not ‘Silicon Valley’ decent, just…an actual competent designer of which there are plenty.
For the record, I am a developer, always have been, and have been so for some time. I just don’t share these delusions of grandeur.
For the record, I am a developer, always have been, and have been so for some time. I just don’t share these delusions of grandeur.
Both as right, and wrong at the same time: developers have the knowledge of what's needed to run the service, and they know that if you make things too complicated it will be too costly to maintain and the organization will grind to halt. But the designers have the view of the users and they know that if the product is too unergonomic to use, there won't be any users to pay the bills. Both need to understand the other's POV in order to ship sustainable software that is actually used.
Developers often need to be challenged to find a solution to a problem that on first glance seems infeasible. The first instinct of developers is not always correct, what appears to be difficult may turn out to be easy. Of course some things do turn out to be legitimately hard but when developers design things they put too much trust in their instincts.
Developers sometimes also need to be forced to accept complexity that they don’t personally see the point of. For example animations and transitions may appear pointless to developers as they don’t have any function: no APIs are called. However for users, especially non-technical users, animations can be very useful to show the flow of how various UI modes are connected, and to communicate subliminally as many users don’t read text prompts.
If you let developers call the shots then they will choose whatever UI makes the code as simple as possible, because they spend more time looking at code than the actual product, in contrast to users who never see the code at all.
Developers sometimes also need to be forced to accept complexity that they don’t personally see the point of. For example animations and transitions may appear pointless to developers as they don’t have any function: no APIs are called. However for users, especially non-technical users, animations can be very useful to show the flow of how various UI modes are connected, and to communicate subliminally as many users don’t read text prompts.
If you let developers call the shots then they will choose whatever UI makes the code as simple as possible, because they spend more time looking at code than the actual product, in contrast to users who never see the code at all.
Yeah. If they say it's not possible, they probably are just lazy.
Concerning animations that's what is missing from Figma and I think for similar reasons they're missing from many products.
Given the recent size and snappiness of modern UIs I think it's a bad thing.
Too much design, too little value.
Too much design, too little value.
As a dev I second this. Dev's are usually far removed from any knowledge of design, hopefully that changes.
And designers seem to be far removed from perfomance of smartphones and download speed.
What? Smartphones are faster than computers from a few years ago. Smartphones have been running Fortnite since at least 2018. I really wonder what your designers ask from you that is more demanding than that.
Smartphones are faster but the web apps are still slow or even worse, slower.
Many useless design elements drain the battery and take time to render.
Fortnite isn't a web app and I doubt that Figma was used by the game designers.
Many useless design elements drain the battery and take time to render.
Fortnite isn't a web app and I doubt that Figma was used by the game designers.
You are not wrong. Designer-developer handoff isn't smooth. Use of hard-coded pixel values throughout is difficult to get around. They even made the Dev mode a paid feature last I remember.
It's much better than publisher or photoshop for creating UI designs because it allows you to create reusable components that adjust properly when you resize them, etc. That's incredibly useful even if the output format is a flat png.
You're sort of missing the point?
On that axis it's bad, on the axis of designers and people who value visual tools like that it's productivity and ease of use is off the charts, the number of people who I know jump on and find using the tool frankly joyful surprises me at times.
It's executed very well for what it's doing, the fact that you can't export the outputs into code is in some sense incidental, because it's not a requirement that anyone I know who uses it cares much about.
On that axis it's bad, on the axis of designers and people who value visual tools like that it's productivity and ease of use is off the charts, the number of people who I know jump on and find using the tool frankly joyful surprises me at times.
It's executed very well for what it's doing, the fact that you can't export the outputs into code is in some sense incidental, because it's not a requirement that anyone I know who uses it cares much about.
I feel the same
Eh, it's a pretty huge step forward from working with PSD's and trying to convert them to designs. I guess it depends on your designers and how closely you work with them to make sure the Figma designs make sense.
But for us (at Kitemaker), we designed a bunch of parameterized components in Figma and then implemented them in code so that they match up. Then when there's a screen with a button, I can click the button in Figma, see the properties and convert it to React. It's pretty quick
If you're using flex for your layouts, it matches pretty well with Figma's auto-layout stuff. So you can click on a container and see that it's a flex row with some padding and justify-content center. When I start seeing components in a bunch of nested containers, I know I need to pay attention, because just doing the usual flex stuff will result in things that don't quite line up due to whatever.
You can define a bunch of colors in Figma and have them matchup in code. So when I see something is gray10, I know I use var(--gray10) in code. There are probably more things that I take for granted that I can't think of off the top of my head.
That being said, it's not a magic bullet. If the designs don't have reusable components, with standard colors and everything is laid out by hand with specific pixel values instead of auto layout, then it's probably the same as just designing from a PSD.
Fuck devmode though. I don't get it, as far as I can tell they just took functionality that existed before and split it into two tabs so I'm constantly clicking between them to find what I'm looking for. I get that there's some pricing thing or whatever, but I would honestly just rather pay more for the old interface.
tl;dr I like it, I think it's a step forward from the PSD days. Maybe your designer is holding it wrong, maybe you are holding it wrong or maybe it's just not for you.
But for us (at Kitemaker), we designed a bunch of parameterized components in Figma and then implemented them in code so that they match up. Then when there's a screen with a button, I can click the button in Figma, see the properties and convert it to React. It's pretty quick
If you're using flex for your layouts, it matches pretty well with Figma's auto-layout stuff. So you can click on a container and see that it's a flex row with some padding and justify-content center. When I start seeing components in a bunch of nested containers, I know I need to pay attention, because just doing the usual flex stuff will result in things that don't quite line up due to whatever.
You can define a bunch of colors in Figma and have them matchup in code. So when I see something is gray10, I know I use var(--gray10) in code. There are probably more things that I take for granted that I can't think of off the top of my head.
That being said, it's not a magic bullet. If the designs don't have reusable components, with standard colors and everything is laid out by hand with specific pixel values instead of auto layout, then it's probably the same as just designing from a PSD.
Fuck devmode though. I don't get it, as far as I can tell they just took functionality that existed before and split it into two tabs so I'm constantly clicking between them to find what I'm looking for. I get that there's some pricing thing or whatever, but I would honestly just rather pay more for the old interface.
tl;dr I like it, I think it's a step forward from the PSD days. Maybe your designer is holding it wrong, maybe you are holding it wrong or maybe it's just not for you.
[deleted]
[deleted]