01 Dec 2021

Figma and our design process

When our design team made the move from Sketch to Figma in 2019, the tool showed promising features to help with our design process. 2.5 years later, it’s not even a fair contest anymore. Some of us use Figma all day every day, 5 days a week, it’s become so good we could even have a go during the weekends. 🤓

2.5 years is a long time, and we’ve slowly but surely discovered every new feature, submenu and plugin Figma has to offer, always trying to make the most of it and make our process as smooth and consistent as ever. Now, how can a design tool make our lives so much easier you ask? Let me explain.

Auto layout and wireframing

It all starts with UX. Although we still love our Mural boards for workshops, we now create our wireframes exclusively in Figma.

On projects that are fully component-based, we start by creating all the different paragraph types and page headers, as part of our process of delivering platforms with Drupal.

The auto-layout feature has allowed us to focus on design first. Once components are set up, Figma can take the back seat and our designers can freely play around with layouts, making changes on the spot when exchanging with clients or users. This helps with the ideation process, as well as making sure consistency is kept throughout : even in UX, every component is an instance of a master component, on which changes affect all the different pages.

Variants & design system

As good as Figma is with wireframing, it really shines when creating the final product UI that will be handed over our own in house development team. The first step has always been creating a consistent and accessible design system, and Figma has made it easier than ever.

It is of course an amazing tool for creating libraries, grids, colour and text styles. But some features have allowed us to take our game to the next level when creating all sorts of components: CTAs, inputs, dropdowns, tabs and many more.

The first is one we've already mentioned, Auto-layout. It has become the default way to build any component of a design system, so that we never have to worry again about resizing, padding, margins. But when the Variants feature dropped over a year ago, this took things to the next level. Each state/screen size/colour of a component can leave under the same master component, as variants. This allows for much cleaner and tidier libraries, as well as allowing us to quickly change between variants when putting screen together. Oh, and it's also a game changer for prototyping, but more on that later...

Constraints, auto-layout & components

Once those design system foundations have been put together, our team can start looking at designing bigger components (called organisms in an atomic design system). And once again, by combining the use of auto-layout, variants and constraints, we are able to build responsive, adaptive and consistent components, ready to be mocked up with any content, in any situation.

This allows us to communicate behaviours in function of screen width to Front-End developers, as well as allowing us to quickly and automatically mock up those components in any situation, without having to worry anymore about manually updating the component’s height when adding a lot of text for example (yes, this was how it was done not so long ago 👀).

Overall, we now have design systems with components that adapt to their content, can easily switch between states and overall makes having a consistent and well built UI simpler than ever. Yes, it’s a game changer.

Interactive variants & prototyping

Once the designs are complete, the last part of our UI process is to create prototypes of components with complex behaviours. This helps communication with Front-End developers, sharing information about micro-interactions, transition animations - does the transition appear with a fade-in? Appear instantly? Should motion easing be applied to it? These are elements that will help the user’s interactions with UI elements, lead the eye to the next element, help with decisions. It’s finessing, but eventually makes the difference between a journey that feels smooth and one that can feel confusing at times. This makes prototypes a tool of communication between designers and developers.

By making prototypes as close to the final product as possible, it will also help designers and clients to run testing sessions with users or internally. To either validate a solution or to ideate further on the user’s journey.

The introduction of the interactive variants feature in Figma has made this process much easier, and goes a long way into helping us prototype the most realistic interactions possible. It allows us to set interactions between master components that will affect all instances of the component in the prototype. This means pickers can each automatically have their own hover state for instance, and we also have been pushing the feature with the use of custom delay animations, to replicate the behaviour of a text input cursor. All together, this helps give prototypes a lot of realism, and replicate the feeling of using the final product.

Just over 5 years ago, designers would build screens and components in Photoshop. Then we moved to tools custom made for product design, starting with Sketch, and our workflow drastically improved. We have been using Figma for more than 2 years now, and we can’t wait to see what the future holds, test new tools, features, to bring designs closer to reality, users, clients, developers…

No tool will be perfect, but we’re having more and more fun using them, that’s for sure.

Related news and work

The React framework advantage

17 May 2021

We’re big fans of React at Catch. But just what is React, and how do we use it?

Web Accessibility Series: Part 1 - Colour Accessibility

29 Jan 2021

Part 1 of our new Web Accessibility Series covers how to address colour accessibility in your work

Goodbye Sketch...

25 Oct 2019

Hi, I'm Sam Hainsworth, Design Lead at Catch, and I want to tell you about our Creative Team's recent move from Sketch to Figma

27 Nov 2019

UX, bias & the good fight

Hi, I’m Michael Reiss, one of the UX Designers in the strategy team here at Catch. I'm hugely passionate about research and the value it brings to UX and digital strategy work, and I particularly champion the customer through my work. In the below I talk about the very real possibility for bias to interfere with research and share my tips for remaining objective.

If you've opened this post you may already be familiar with audience research. And not only are you familiar, but you're convinced of its benefits. The likes of Amazon’s Jeff Bezos, Glossier’s Emily Weiss, and AirBnb’s Brian Chesky and Joe Bebbia have attributed their success to having an understanding of their users. Instead of continuing its praises, I think it’s more interesting to consider how even those of us who conduct audience research for a living are not as objective as we think.

According to the below study, we're actually pretty terrible at being objective, despite thinking we’re better at it than those around us.

Out of a sample of 600+ people, 85% believed they were less biased than the average person. This study led to social psychologist Emily Pronin coining the term "bias blind spot," which explains how not only does everyone have cognitive bias, but everyone also believes they are less biased than others.

Out of a sample of 600+ people, 85% believed they were less biased than the average person.

(Source: Princeton Publications)

Yikes.

And while it’s great that just reminding ourselves of this bias is a huge step in avoiding it’s potential influence, there are a few measures we can take to prevent falling into the bias trap.

The numbers don't lie?

When we begin the research process, it's common to begin by deciding who to interview and what to ask them. For example, we've decided to collect user input for a sports drink company. Great, right? While perhaps a bit exaggerated, the below may sound familiar, especially when time and budget is tight.

We know the product so well, we have lots of site data and market research, so we know what our audience thinks of us. Not only are we the users (because we happen to also drink sports drinks), but we can imagine what our different audiences think of us and our competition.

Unfortunately, we're likely too engulfed in the day to day, to get accurate data from speaking just within our immediate teams. And if we do decide to conduct user interviews, bias can influence who we choose to interview (eg failing to consider all relevant groups of people) and the types of questions asked (eg leading questions).

While we've all heard that "the numbers don't lie," suggesting quantitative data is always objective, what about the steps we take to find this data, or how it is collected? That initial email request for specific datasets, or the Google search and selection of the study that most affirmed your hypothesis? That darn bias sneaks in yet again!

So how do we avoid UX bias?

Looking as far and wide as possible: of course make sure to source for any and all existing information on audience. But don’t stop there. Ensuring that we’re engaging with people from multiple departments, at different levels, and asking who they believe their audiences to be (and who they aren't, and why? …) The process of collecting multiple perspectives and asking them to explain their reasoning will provide us with great insight.
Try to do the above activity in person, if possible during a workshop. Invite people from different departments with different levels of seniority. Separate people from their managers or those they work with on a daily basis to encourage open and honest input. Use ice-breakers to help people loosen up and feel more comfortable.
When you determine who your audience is, print out their persona and make sure everyone on the team can see it as a reminder of who you're working for!
Collect a list (or slack your team members) of the most surprising information you've learned during your audience research. The habit of light heartedly calling out your assumptions and reminding yourself of surprises leads to a more open-minded approach to setting up audience research.
Ensure the whole team stays aware of the real possibility of having to pivot the project based on future research findings. We all need to be aware and educated of this possibility: providing updates on the research process as it progresses definitely helps. Don’t be afraid to expose all team members to rough & ready “work in progress” brainstorms to give exposure to the work and provide space for far and wide input. It may take some initial effort, but you'll save yourself from future stress by having the flexibility to provide the best insights and recommendations.
The good news among all of this bias is that our users will quickly prove or disprove assumptions by telling us what they need, want, and expect! We just have to be comfortable with having assumptions disproven and allow time to adjust direction of research.

Bias can be hard to shake, but we're adept at avoiding it’s traps and giving accurate insight: if you’re thinking about audience research or wider UX strategy, we're here to help.