Figmatic: Why Figma will be remembered as a genre-defining classic
This post was adapted from a talk Marty Coghlan and I gave at the July 4th Independence Day edition of Design Ops Melbourne (photos from the talk included below). If you’re interested in watching rather than reading, check out video from the talk here.
Illmatic, the debut studio album by Nas, is commonly heralded as the gold standard (of the golden era) in hiphop music. Released all the way back in 1994, the work has held up in the decades following to become a near-undisputed classic among rap purists. In the current climate of digital design, we here at MASS feel the design tool Figma will be remembered the same way. Here are some thoughts and observations on why it suits our studio now that we’ve been using it for around one and a half years.
Our situation at MASS
MASS does a lot of product and service design but the majority of our final outcomes end up as a user interface — on someone’s phone, on a tablet, or in a browser. But because we don’t do the development, or have complete control over the end product, our workflow and choice of tooling is critical.
Some things worth noting about our studio:
- We’re a digital design studio but don’t have developers
- We design digital products and services
- The core team right now includes two Senior Designers, a CD and a GM
- We also have a part time senior creative that comes in regularly and several freelancers who we get in as required
- We avoid working onsite (i.e at a client’s office)
- We often don’t have the luxury of developing long term relationships / rapport with developers —usually starting fresh with every new project. That said, it does take time to understand how they like to work and time for them to understand how we like to work
- Our experience has been that we have had to go above and beyond with our design work, to make sure we are giving everything that the development team needs to produce the work confidently and accurately
Before we go any further …
What this post is:
- Our experience working with Figma at MASS (that’s really all we feel we can talk about authentically), and
- How Figma has changed the way we work individually, as a studio and with clients
What this post isn’t:
- A walkthrough of every single feature of Figma (there’s plenty of great resources out there already — check the designops site!)
- An ethering of Sketch and other tools. To quote Tim, our Creative Director: ‘it’s the best time to be a designer right now … the choice of tools is pretty incredible’.
- It’s also not a sales pitch to convince you all to change from [insert design tool/s] to Figma. We acknowledge that it takes a lot of effort to change the way a team works, particularly in larger studios/agencies
Ok, now that that’s done, on with the set.
Track 1: The Genesis (Our history with Figma)
We actually started using Figma when one of our clients was using it early in 2017 (when it was free). We were very comfortable using Sketch and, at that point in time, had already completed a few big component based projects. We had no real reason to look at other design tools.
We first started using it to work on our wireframes, while still doing our high fidelity mock-ups in Sketch (based on our client’s recommendation at the time). This proved to be a good way for us to work collaboratively with their engineering team.
Last September, Figma introduced Zeplin integration. Being dedicated users of Zeplin, this gave us the push we need to commit to doing a full project with Figma (wireframing through to final UI). It was relatively easy for us to switch between different tools as the only person we had to convince was Tim 😁.
Track 2. MASS state of mind
Upon committing to using Figma, we completely upended our established state of mind—with a switch to extreme transparency. Everything we did from here on out would be live and direct.
Over time, we learnt the advantages of being less precious about our work and the advantages of working much more closely with our clients earlier on in the process — even if it meant having to show stuff we weren’t 100% happy with. It didn’t necessarily feel natural at first, providing complete exposure to the process, but in time it became hugely liberating.
Another important thing to note is that we (MASS) often work together on multiple concepts concurrently. We want to get away from that very closed off, lonely approach to the design process in favour of a more open, collaborative environment where we can share ideas and assets as we work.
Track 3. Life’s a glitch
With Figma being cloud based, you might be wondering if we’ve had any interruptions or problems.
Well, to be honest, we have a Slack channel called ‘IT woes’ that’s mostly dedicated to internet issues; needless to say, it’s pretty dense with complaints. And considering all of this, and everything that’s going on behind the scenes (constantly saving/uploading to server), Figma has been pretty solid throughout.
The only time Figma ever went down, it was only for a couple of hours (Life’s a glitch, huh?). This was a subtle reminder that there is the inherent risk in completely trusting one piece of software, but the same can really be said for any cloud-based service. If you really want to mitigate risk, you can download your Figma files periodically and take other measures if you like.
Track 4. The file is yours (and everyone’s)
We all know the joke about naming your files ‘final-final-ultimate.sketch/psd/whatever’ so being able to collaborate on the one live file forces you to think differently.
This style of working is also really relevant when working with freelancers or distributed teams. You might pick something up that someone else has been working on and Figma makes this all pretty easy to do (with very little handover required).
Figma also has a roll back feature that allows you to revert to any previous versions if you need to. No more CMND + S either; Figma is constantly saving in the background (note the fun little message that pops up when you try to do this).
Track 5. Halftime
One of the standout tracks on Illmatic (and we couldn’t think of a way to riff on the track name 😎).
Track 6. Every Frame <Sittin’ in da div>
The concept of frames was a pretty steep learning curve for us at first, but they have changed the way we design; constraints can be set to allow elements to behave like divs in html/css — mimicking layout attributes such as absolute positioning, floating left/right etc. This means that mocking up/demonstrating responsively layouts can be often be much quicker and easier.
Track 7. Many loves
We’ve all used a range of different design tools over the years and we still have a place in our heart for each of them.
Figma takes cues from best in breed of current software, while still doing things their way. The fact that the layout of Figma is comparable to Sketch is a big bonus for us; most freelancers haven’t used Figma, but they have used Sketch. Figma also shares a lot of the same principles (e.g symbols = components). This has been crucial for us because we can ensure freelancers can hit the ground running. The last thing we want is our choice of software to be a blocker.
Illustrator was a longstanding favourite tool of mine (even for digital design work), and features such as CMND + Y to show the outline view of your canvas are also available in Figma. This is invaluable for finding lost elements in a layer stack.
Figma have also recently refined and improved their prototyping features which we have started to use, but are yet to incorporate extensively into our workflow (we’re more familiar using Marvel and Principle).
Track 8. One Place 4 Your Mind (and team)
Having everything in one place is insanely valuable and here’s why:
- Commenting on design work in-situ (contextual) — similar to how commenting works within Google docs/sheets; it’s familiar to most people. No more marking up PDF’s in red (I’d like to think we’re way past this method of feedback)
- We’ll often have clients commenting on things as we’re designing, which is great for making edits on the fly and eliminating confusion around what bit of feedback they’re referring to
- Feedback is ongoing (we’re trying to move away from the concept of ‘rounds of feedback’ etc..). We’ll often send the file link across to clients before we’ve even started designing so that they can keep tabs on progress from the beginning
- Platform agnostic (most clients run windows so this is a real plus for us). We’re able to give visibility to large teams really quickly — this is crucial when there are many people working on a project across a range of disciplines (it’s really easy to add a viewer)
- We’re able to wireframe and do high fidelity UI work all in the same file
- We are a lot faster in Figma than we were in Sketch / Adobe CS. We’re able to get things up and running a lot more quickly, exploring concepts and user flow variations
- (Extreme) transparency: clients are able to get a window into how we work/how we’re going from week to week/how fast we can work (velocity). This is something that previously they wouldn’t have been able to do. This ultimately means that there are little to no surprises come showcase time (assuming they’ve been keeping track throughout the week)
- Following people: This feature is super useful if the VC / screen share fails (which was, and still is, a common occurrence). It’s also useful if you have a big file with a bunch of screens — it can be easy to get disorientated, particularly for clients who might be opening the file for the first time
Track 9. RePresent
And on the topic of presenting design work …
We’re trying to move further and further away from this idea of a ‘presentation’, which we see as a bit too one dimensional. We want our clients to know that what we’re showing is just a moment a time — we will iterate, update, change and improve the design work.
We’ve also been trying to limit the amount of extra prep for presenting work by just showing the working files. Our clients are committed to getting in there and looking at the work as much as they can throughout the sprint, and by the time we do a showcase, we can see who’s been looking as they’ve often dropped comments. As a result, we can get to talking about changes, refinements and improvements rather than going over what we’ve done. This means more efficient (less time in) meetings for us, which is a real plus.
We’re trying to present more and more just using Figma (particularly for showcases). Presenting this way means no more packaging up PNGs or emailing .zip files, which is usually a big waste of time. On some occasions though, we’ve had feedback that clicking around Figma during a presentation can be disorientating — especially to execs who aren’t in it everyday.
We also acknowledge that sometimes we do create a more comprehensive prototype for the client to click around in; this has been a great way to make the product we are designing feel real.
Track 10. It ain’t hard to $ell
Ultimately we’re trying to do our design work as close to the browser environment as possible, while still working in a familiar, design-esque way, directly manipulating elements rather than inputting values. Given that Figma is a browser based design tool (already built using web technologies) we’re really excited to see what they’ll roll out in the short and long term.
We’re a design only studio, so we don’t have the luxury of sitting with developers a lot of the time. We want to spend less time designing screens/screen size variations and more time working on solving problems in new and interesting ways. There are plenty of other tools out there but we think we’ve settled on Figma for the time being.
We also like aligning ourselves with companies which seem a bit more human/approachable. A few months ago we were hit up by Figma to give some feedback around how we were using it in the studio and some thoughts around the types of things we’d like to see in the future. All you can really ask for as a small studio is to know that you’re involved and being heard, especially when it comes to the tool you’re using everyday.
Outro
Don’t sleep on Figma — to do so is a missed opportunity to completely redefine the way your design team works. And to quote the great Nasty Nas — “never sleep…’cause sleep is the cousin of death”.
