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.

08 Mar 2020

International Women's Day 2020

International Women's Day is once again upon us! To celebrate, Helen, our Delivery Director, spent six minutes with six of Catch's irrepressible women from across each of our teams, discussing their experience as women in the tech world and get their views on the future. 

  • Cindy, Design Associate 
  • Michael, Strategist 
  • Omnia, Senior Developer 
  • Gabriela, Developer
  • Gayleen, Senior Project Manager
  • Becca, Delivery Lead

Six Minutes with Six Women

Previously I wrote a post mulling over my thoughts and feelings as to how we try to ensure a safe, democratic and egalitarian working environment at Catch. At the time, the #MeToo movement was garnering momentum and brought the discussion of what it meant to be a woman living an agency life roaring into studios everywhere, including ours. 

For International Women’s Day this year, rather than me waxing lyrical on my own views, we caught up with women from each of our teams, all from wildly different backgrounds and with a variety of agency years under their belts. 

At Catch we focus on working out what drives each team member, so we can help them attain their goals and reach their full potential. For women, often faced with an additional layer of challenges, working out what drives us is key to ensuring we overcome those challenges, so we asked our team about the challenges they feel they’ve faced in the industry and how they overcame them.

There are challenges that I face as a developer but my passion for learning keeps me moving forward

Gabriela Savova, Front End Developer

Gabriela described her first days in the industry, thinking about what’s kept her working in tech for seven years, “I kept thinking ‘Is this for me?’ And, of course, it was. I really enjoy the fact that I work in a dynamic environment where every day I can learn different things. There are challenges that I face as a developer but my passion for learning keeps me moving forward.”

One day, the idea that women need to find a way to push themselves forward should be anachronistic, but, for now, one of our strengths is in the ability to self-motivate, to take strength from adversity. Senior Project Manager Gayleen told us about falling foul of the gender pay gap, noting: “As frustrating as it was, that experience taught me the best way to overcome that sort of challenge was through being extremely prepared to highlight and explain how my contribution has positively impacted the business. I know some people may think ‘you shouldn’t have to work harder for the same reward’, but at least now I am more confident in openly discussing my achievements whenever I need to.”

“I guess the challenge was to be heard and acknowledged in a company which was predominantly staffed by men,” Cindy, the newest member of our Strategy and Creative team said, thinking back to her previous experience.

Twelve years into her tech career, Omnia echoed Cindy’s thoughts, positing that building trust helps ease the way, “I have been working in tech for around twelve years now, and I think it’s always a challenge to work in the tech industry as a woman - it’s still a male-dominated field. You’ll always have to prove yourself, but once you gain trust, you can excel.”

I would love to see more people in senior positions (both men and women) who want to mentor females starting out in their careers. This is critical as we know the positive impact a good mentor can have

Michael Reiss, Strategist

Michael and Becca both touched on the impact of mentorship on their careers, with Becca stressing how important it is for her to pay that support forward to her team, “I’ve had the privilege of being mentored and coached by numerous inspiring and strong women and this has been instrumental in building my career and instilling a sense of self-belief so I feel a great responsibility to provide the same support to my team, to encourage their self-belief and allow them to grow in their careers.”

Michael notes that availability of mentors is one of the underlying issues, “Speaking with other female professionals, availability of mentors is an area where many women face challenges. I would love to see more people in senior positions (both men and women) who want to mentor females starting out in their careers. This is critical as we know the positive impact a good mentor can have.”
 

Despite the bad rap the tech industry (sometimes deservedly) gets, as Gayleen notes, there are massive advantages to working in an industry that’s still fairly young, “Digital agencies often don’t have the same legacies of gender or race inequality so my ambition has been nurtured and always encouraged to the same extent as everyone else in the business, irrespective of gender or race.” 

Change isn’t something that happens overnight, neither is it something that can be tackled on one front only. “Women’s status in the industry cannot be fully addressed by just focusing on the workplace,” Michael says. “How society raises women, from the subjects we’re encouraged to study to the way we’re educated about finance and the social clubs we’re encouraged to join has to improve for us to gain true equality in every industry.”

Two years on from my last post the idea of representation - of equality - in agencies has taken on a much wider context than just the heteronormative gender divide. Equality means equality for everyone and we’re all responsible for making our industry a better more welcoming place for anyone who fancies joining in. With a greater number of events and meetups fostering more open conversation on the issue of equitable treatment of everyone than ever before, we’re seeing an uptick in tangible change and in the hope for more.  

When asked whether she feels the industry is improving for women, Gayleen muses, “I think we’ve still got a long way to go but it’s clear we’re working to take steps to eradicate gender inequality in the workplace and we certainly should keep working towards that because, well, what would the disadvantage of that be?”

To close, we’ll let Gabriela have the last word: “All ladies in tech, be proud of yourselves and happy International Women's Day!”
 

Start a conversation

0207 494 3554
or
newbiz@catchdigital.com