Goodbye, Adobe.
Hello, Figma! đ (Updated April 2020)
My relationship with Adobe began over ten years ago when as an insecure, spotty teenager I discovered Photoshop and the wonders of the Clone Tool.
Later on Photoshop became where I created my very first website design before painstakingly moving on to Illustrator. I even had a brief romance with Dreamweaver in which I wrote some of my very first code.
Though a decade is arguably not a lot compared to an entire lifetime itâs been a period of massive, technological as well as social changeâ also within the design field. And with Adobes beta release of âXDâ (which I still read as a laughing smiley) I was happy to continue in the Adobe Suite.
But then the day came when I opened up Figma.
Wait, what about Sketch?
I can almost hear all the Sketch people out there saying; âWhy donât you just use Sketch?! Sketch is awesome!â And sure, I agree.
Despite being released in 2010 I actually hadnât tried Sketch before accepting a job where I was required to use it instead of XD. And even though this meant having to learn a whole new design tool while still being expected to deliver quality designs quickly (yep) I eventually came to like Sketch.
I created and used symbols for fast, consistent design and installed plugins like Auto Layout for easy, responsive resizing. I also added a content generator into the mix which saved me a lot of time and also, admittedly, made my mockups look more professional with proper placeholders instead of Darth Vader, Kitty Whiskers and the venerable Firstname Lastname, R.I.P.
I could structure my designs so I only had to make changes in one place â the same logic I enjoyed so much about using Sass for frontend development. Working for just one and a half years in Sketch doing a full redesign of a SaaS platform matured me a great deal as a designer.
But Sketch has one, enormous downside: itâs not available for Windows.
At this point all the other Mac designers out there are spitting out a mouthful of coffee âWhat?! Youâre using PC?!â And though I still swear by my trusty beast-of-a-PC for gaming I indeed do prefer using a Mac for my work.
But after being laid off by the Sketch-preferring company I got a new job as part of a team where the developers and even the other designer were using Windows. This completely ruled out Sketch as an option and instead meant â you guessed it â going back to XD. Initially this made me happy, reunited at last! But I soon found myself longing for the ease of Sketch. It felt like having driven a Tesla for a long period of time but then having to go back to a Fiat. I should know â my better half has a Tesla Model 3 (the rich fuck) while Iâm still stuck on my Fiat Punto from 2006.
Anyways, when my first project went into production around march 2019 the challenges with using XD for the entire team became painfully obvious:
- The developers werenât happy with the handoff which wasnât intuitive and felt awkward navigating.
- Sharing design files as public links seemed insecure but adding the password protection also just made it straight up frustrating.
- I was struggling with ensuring consistent design when sharing design system essentials such as colors and text styles between files wasnât possible in XD at this time.
- I also couldnât make symbols which made designs terribly hard to update when just the smallest change took hours to apply everywhere.
Also, as two designers and potentially more in the future we really needed the âone source of truthâ design library. But this also meant eventually being forced into the downward spiral of administrative despair with shared folders and design files. Conflicting copies, conflicting copies everywhere!
So when two of the developers both independently suggested Figma we bought a monthly subscription and decided to give it a try. Now, barely a year and another new job later â two in fact, Iâm very picky â Iâm still on the Figma train and hereâs why.
A better overview
One of the biggest and best changes Figma has introduced, in my opinion, is that file management is no longer a sea of files locally on your computer or buried inside shared folders; itâs all in Figma behind your login and everyone in the team are looking at the same structure.
Personally, I was a little worried about how Figma would work with my own structure or rather my complete lack of it. As a designer and person I thrive best in chaos. I donât consider cleaning up the house before my path to the most important areas of it â my office/PC, bedroom, wherever the cat is and the fridgeâis literally obstructed. Similarly, my workfiles are full of ideas, half-baked UIs, design variations and also finished mockups.
However, if designing products has taught me anything itâs that the tendency to be messy and careless with structure could be due to a lack of the right options. And Figma has plenty of such options for organising the workspace:
- Teams
- Projects under Teams
- Files inside each Project
- Pages inside each File
- Frames inside each Page (âartboardsâ)
There are a million ways to structure design files and there isnât a right or wrong way to do it â thereâs only the way which suits you and the team. It might however be a good idea to align naming conventions with your colleagues in development so youâll all be talking about the same âcardsâ.
Speaking of cards, a cool âhackâ I learned from a colleague is making cover images for the files in your projects which makes everything look top notch.
As for my messy tendencies this wasnât fixed by Figma but rather working together with a German product manager for almost a year. âOrdnung muss sein!â He would yell while repeatedly whipping me with the straps from his Lederhosen. In practice, I usually just add a page to the file called (ideas) where I can play around and dump stuff without having to clean up.
A better way to collaborate
Another of the biggest and best changes Figma has also introduced is obviously the live collaboration, nicknamed âMultiplayer.â
Creating and inviting people to a Team will give them access either as editors ($) or view only (free), the former usually being the designers and product managers and the latter mostly for developers and QA. Everyone added can view or edit, add comments, play prototypes and also inspect designs.
Being a merciless self-critic I was particularly sceptic about having my unfinished designs be exposed to potentially anyone in the team. It also made me doubt if Iâd still âdareâ try out new or different ideas knowing other designers and developers could see it. I was worried I would be⌠âwatchedâ.
Admittedly, it is a bit creepy when someone else suddenly pops up into one of your files and starts clicking around. But in my experience, people are usually too busy with their own stuff to keep an eye on yours (and if they arenât, well, that says more about them than you, doesnât it?) Most of the time Iâm working by myself and thatâs also how I prefer it but every once in a blue moon Iâve done âpair designingâ too. Being able to move each otherâs objects around and change them up does feel like youâre really building something together. My general impression is also most developers are very positive about being included in the design process and given access to the design files. On the practical side, for design reviews and groomings it obviously works super well when everyone can access the designs on their own screen. At the end of the day the more eyes you get on your designs the better they will become.
Also: mouse-cursor high-fives! Hell yeah!
A better component setup
While trying out Figma for the team back in 2019 we were working on a full redesign of the platform. This meant I actually started off with the finished mockups from XD and then, like a cat left alone with a roll of toilet paper, I cut everything up into pieces in Figma.
Each individual piece of toilet paper⌠Hmm... Crap⌠No, not actual crap, Iâm just⌠really regretting going for the cat and toilet paper metaphor right now⌠*Sigh*⌠Letâs just try to toilet roll with it for now.
Each piece of shredded toilet paper were styles like colors, typography, icons which, if combined again⌠through the⌠reversing⌠of time⌠or a really meticulous glue-job, maybe?⌠into an entire piece of toilet paper would make out layout components like cards, headers and navigation. Eventually Iâll have full sheets of toilet paper to build⌠entire page layouts⌠đ¤
BOTTOM LINE, COMPONENTS IN FIGMA ARE COOL, OK?
The platform we were working on redesigning used Bootstrap 4 and while I donât have a fetich for Bootstrap specifically I do like the idea of having a frontend framework as the foundation for a design. Frameworks often use very common, established interface patterns with good usability and can serve as a starting point or âguideâ for structuring your components. The documentation usually reveals all the different elements and their variations as well as how they are named from a development perspective.
I experimented a lot with button components before settling on a structure which worked. I ended up making buttons in Bootstrapâs three size variants; Small, Medium (Default) and Large with different text and icon options â all in solid and outlined variations.
Whenever I needed a button I simply grabbed one of these button components and gave it the right color using Color Styles.
Add in Figmaâs somewhat recently released Auto-Layout and youâll be flying.
You could also new components for differnt button colors as copies of the master button components, but I found it was just as easy having the colors, primary, secondary, alert, etc., as Color Styles and applying them to the button when adding it in. The button text use a Text Style and if you change it Figma will give an update option in all the files where the style is used. Yep. So when management decides to hire some fancy-ass agency to do a rebrand even though youâre perfectly competent to do so in-house, you may have to embrace bullshit brand words such as âtrustworthyâ and âsustainable,â but hey â at least you wonât be spending weeks updating all your designs!
Another thing worth mentioning is the Layout Grid feature which helped me quickly add the grid layout on new pages. I also created a file in the Design System with all my common spacings as Grid Styles so I could add them to frames and components when designing.
And speaking of which â the ability to actually edit the nudging amount both for the small and big nudge? Fucking genious.
A better way to prototype
Story-time: When I was studying to become a webdeveloper back in 2011 design was something which happened while I was building a website.
Usually Iâd throw a front page design or a moodboard together in Photoshop and then translate that into styling. I cared a lot about how a website looked and also began studying usability principles on the side. Some of my teachers thought I spent too much time on design and too little on programming.
So as I started moving away from development to focus on design I also went from crafting the interaction to creating a mockup of it. I went from building the house to making a picture of it, drawing out the floor plan, trying to visualise to others how the house should look. Eventually I had to realise this meant a big part of my design was now missing in the interaction itself.
But seeing a floor plan is not the same as walking around a house.
This is the reason I switched to XD to begin with because it introduced prototyping directly in the design program â later with a preview feature which let you âplayâ the design on your phone. It felt groundbreaking, now I could make a video tour of the house! That was at least a bit better and also helped me think of the design as the journey through different rooms.
Similarly, the tipping point for me with Figma was how well prototyping integrates in complete parallel with designing â thereâs no awkward gap in between where you have to switch programs or go onto a website.
Prototyping in Figma also has a lot of options for triggers and animations. Options even include prototype presentation settings where you can select device type and background color saving a lot of time when making gifs for Medium articles I might add. But the coolest feature so far is the Overflow behavior which allows you to âand for this you should sit probably down if you arenât already âvertically swipe sliders in mobile prototypes and scroll through pages with fixed menus. Fuck yeah!
A better way to design
Figma set the expectations pretty high with the tagline âa better way to designâ on their website front page back from April, 2019 especially when considering theyâre not comparing to any other design tools specifically, just⌠better in general. And so far, for me, theyâve lived up to the promise and continue doing so in releasing critical features. Take a moment to consider what it really takes, what it requires, to take on a giant such as Adobe.
More than a decade has passed since opening up Photoshop for the first time.
Since migrating all my designs to Figma last year I havenât had a single Adobe program on my work computer in the previous two positions Iâve had. It feels very definitive. An era of my life has definitely, officially ended.
But as I look back at the entirety of my relationship with Adobe â which has ranged everywhere in the spectrum between high-flying excitement and hell on earth I know now that saying Goodbye, Adobe is for the better.
Itâs for a better way to design.
Thank you for reading!
Just to be clear Figma did not pay me to write this article. I did it on my own free will because thatâs just how nice their product is.
When I switched to Figma it was due to Sketch simply having matured me as a designer but being too limited for Mac only and XD just not delivering the features I needed. But that doesnât mean XD or Sketch they might not have them today so as always, check out their websites and be sure to try out different tools and compare before deciding.
Published in April, 2019. Updated in April, 2020.
