Top ten Figma betrayals
Top ten Figma betrayals êŽë š
Figma is the industry standard for painting pretty pictures of websites. Itâs where designers spend my designated dev time pushing pixels around one too many artboards. Figma promises to remove the proverbial fence between design and development. In reality it provides the comfort of an ideal viewport that doesnât exist.
I donât mind Figma (the software), although I prefer Penpot myself. I still dabble in the deceptive arts of web design. Donât be thinking Iâm out here hating on designers. I like to stick my nose inside a Figma file and point out issues before they escalate.
Below I cover classic Figma betrayals that I bet youâve experienced. Betrayals happen when software promises more than it can deliver.
Full-width banners
Take a gander at this amazing website design I whipped up in Figma to illustrate the most common betrayals. I told you I was a designer! Iâll evolve this design throughout the post. Figma has deemed 1440Ă1024 to be âDesktopâ resolution so Iâve started there.
In this mockup Iâve added a full-width banner of our hero Johnny Business. Iâve built this website far too many times than I care to remember. Iâll repeat the same question here I ask every time I build it: what happens at other viewport sizes?
Do I scale the banner proportionally?
On wider viewports this is likely to push content out of sight. It might even require scrolling to see the entire image on Johnnyâs ultra-wide 8K. The phrase âabove the foldâ will be spoken in a Teams call, can we avoid that?
Do I also set a maximum height on the banner?
This is going to decapitate poor Johnny! He paid a lot for that haircut.
Focal points
What are we doing below the âDesktopâ viewport, by the way? Letâs design for the 402Ă874 resolution Figma calls âiPhone 17â because it was first on the list.
Note
Note the absolute perfect crop of Johnnyâs sockless businessing.
Okay, next question: how do we move between âmobileâ and âdesktopâ? Thatâs a very specific focal point. We canât just change it willy-nilly! Code has rules; logic. A website must be responsive between all breakpoints.
Are we going to use multiple images? At what breakpoint do they swap? Because that perfectly cropped mobile image doesnât scale up very far.
Those shoes are Gucci by the way. Iâm not a fashionista, the hidden left shoe has a logo. See: âman sitting beside side tableâ photo by John Doe â free to use under the Unsplash License. I donât mean to sidetrack this but our hero wears socks in bed in case you were wonderingâŠ
Breakpoints aplenty
Hold the phone! A shadow stakeholder has asked for a redesign to âmake it pop!â
The ultra-wide problem has been solved with a centred fixed-width style. If that is the intention? Does either the banner or header stretch to the edge of the viewport?
More importantly, that image and text has no room to move. Iâve only reduced the viewport by 200 pixels and itâs already crashing into Johnnyâs face.
Are we expecting breakpoints every 100 pixels? â No, wait! Please donât spend more time designing more breakpoints! Okay, Iâll hold until more breakpoints are designed. Are we extending my development deadline? No. Okay.
Arbitrary line breaks
As development continues Iâve got more bad news to share.
Figma is very happy allowing us to enter arbitrary line breaks for the perfect text fit. Thatâs not how the web works. One of these options is probably what weâll see if text is left to naturally break.
Yes, we can technically allow for a manual line break. Thatâs a pain in the content management system, but sure. Text is still forced to wrap on a smaller viewport, then what?
Oh that? Now you want the manual line break to magically disappear?
(âŻÂ°âĄÂ°)âŻïž” â»ââ»
I lied when I said âtop tenâ Figma betrayals. The issues above can appear in hundreds of guises across any component. If youâre betrayed once youâll be hit again and again.
Figma is not exactly conducive to responsive web design. Designing more breakpoints often leads to more questions, not less.
Another betrayal I pull my hair out over is the three card pattern packed with content. This leads to an immediate breakpoint where one card drops awkwardly below. I dread this because the word âcarouselâ will be uttered and my sobbing is heard far and wide. Carousels are not a content strategy. I was once inspecting a Figma file only to witness the enemy cursor drive by and drop several dots underneath an image. The audacity!
Human conversation
Figma betrayals are classic waterfall mistakes that are solved by human conversation. Developers need to be part of the design process to ask these questions. Content authors should be involved before and not after a design is complete. Youâll note I never answered the questions above because what might work for my fictional design isnât universal.
On a tangential topic Matthias Ott notes:
The Shape of Friction by Matthias Ott (matthiasott.com)
Think about what actually happens when a designer and an engineer disagree about an interaction pattern. Thereâs a moment of tension â maybe even frustration. The engineer says itâll be fragile. The designer says itâs essential for the experience. Neither is wrong, necessarily. But the conversation â if your process allows for it to happen â that back-and-forth where both sides have to articulate why they believe what they believe, is where the design becomes robust and both people gain experience. Not in the Figma file. Not in the pull request. In the friction between two people who care about different things and are forced to find a shared answer.
Figma is not friction-free and thatâs fine. We canât expect any software in the hands of a single person to solve problems alone. Software doesnât know what questions to ask. Not then with Clippy, not now with Copilot. Humans should talk to one another, not the software.
Together we can solve things early the easy way, or later the hard way. One thing that has kept me employed is the ability to identify questions early and not allow Fireworks, Photoshop, Sketch, XD, and now Figma to lead a project astray.
