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
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
Part 1 of our new Web Accessibility Series covers how to address colour accessibility in your work
We are excited to announce that Catch has joined the Sideshow Group.
Sideshow are one of the UK’s fastest growing agency groups with over 300 talented staff across a highly connected family of specialist agencies that together provide digital services ranging from experience design to conversion rate optimisation.
Catch have been acquired to bring our much sought-after skillset of strategy, user experience design and technical build services to the group.
Jonathan Smith, Managing Director and Founder of Catch said: "We’re thrilled to join Sideshow Group’s talented team. Their established range of services is complementary to our own and will help bolster our offering, enabling us to create more success for our clients. We’re looking forward to starting this new chapter of Catch as part of one of the UK’s fastest growing independent agency groups."
Joining Sideshow will enable Catch to;
- have the backing and support of a vibrant group of entrepreneurial agencies, while retaining our own unique brand, people and ways of working
- offer additional complimentary digital services to our clients
- provide more support and training opportunities for our teams
- attract and retain the best people in the industry
- super-charge our growth
Tony Hill, Founder of the Sideshow Group said: "This is a great new partner for the group. Jonathan and the team at Catch are outstanding at what they do, and this will raise both our technical and design proficiency considerably. We are looking forward to working together across many exciting projects and delivering industry leading digital experiences for our clients."
Sideshow Group was advised by Lewis Silkin and Eight Advisory. Catch was advised by Waypoint Partners, Brachers and Loucas.
Related news and work
A new platform for YOTEL
This week we’re proud to announce the launch of the new YOTEL international website platform + booking experience
We're a Top 50 UK client rated digital agency
We've been named as one of the top 50 client rated digital agencies in the UK in The Drum's Digital Agency Census 2021