In the midst of the Sketch revolution (the leading software design package for the last five years), TELUS' Design System Management (DSM) has proven invaluable to designers and developers. During that period, the system got stronger and stronger with a large community of users. The time had come to supercharge this system - enter Figma. This beautifully designed web-based application facilitates greater collaboration, so users can work quicker and more efficiently.

"We wanted to move our teams over to Figma and NearForm were working on a component library so we brought them in to help us migrate over from Sketch." - Laurel Terlesky, MFA, Manager, Design Centre of Excellence at TELUS Digital

Teams and Project structure

The first task was to understand the DSM and make the transition from Sketch to Figma as seamless as possible. Currently, it is used for both web and native experiences and many teams have already become familiar with the naming conventions and their components by this point.

Additionally, this was a great opportunity to simplify any areas of confusion as Sketch and Figma behave very differently. It was also important to keep in mind the different teams that would be using the library - intuitive enough for first-time users and effortless and fast for the seasoned ones.

File Structure and versioning

To begin with, it was crucial to establish a solid foundation for the file structure and versioning before beginning the implementation into Figma. Although Figma was released 5 years ago now, it's in its infancy with a lot of users still finding their feet and establishing their approach. It was useful to introduce some best practices and personal preferences (which were discussed and refined externally).

The components were divided into categories by using the navigation on the left-hand side. Emojis could be pasted into the copy, humanizing the experience a little and showing the status of the work using a traffic light system. This would allow you to move the pages vertically and sort them into different categories such as 'Work in progress', 'Ready for review', and 'Signed off'. This method worked extremely well for and when combined with Figma's comments tool and a kanban board like Trello to track progress.

To make the library as robust and future-proof as possible, a versioning system was implemented. This would prevent work from being lost and minimize confusion between users. This was done by creating a document outlining the versioning process and how to use it. Whenever a user publishes a new/additional version of a design, they must name it with the predefined naming convention and give a brief description of what has been changed.

Libraries and components

A few Figma plugins claim to be able to convert Sketch components over at the click of a button. Before setting up the new library, this was investigated and unveiled a few inconsistencies where the user had to go back and fix components. The best solution (and yes, probably more labour intensive) was to redraw every component from scratch. This was a much cleaner approach where Figma's Auto Layout, variants and instances can be incorporated in parallel.

You would also have the opportunity to improve naming systems if required. Naming played a massive role in this project as it not only aided the users' experience but also helped Figma how to interpret components and relationships between the variants and instances.

After initial discussions, there were 4 separate files used in this project which were linked together:

1. Core Styles - This would be the first Figma file that would be set up. It would include text styles, colours, iconography and logos. Once complete the file would be converted to a library which could then be linked to multiple files. The idea behind this is so the brand owner/designer can update everything in one place, publish and sync everywhere seamlessly with other files. Cool right?

2. Foundation - This is where all of the components live and were created. As mentioned previously this would be listed on the left-hand side on different pages. It would also be published to sync with the below two files.

3. Testing area - Foundation is linked here and does what it says on the name. This is where we can stress test the components, put them through their paces, detach and amend accordingly. The reason for not testing in Foundation was to keep everything separate and not run into any issues which would affect the library such as testing out new fonts and colours and playing around with the Auto Layout and naming conventions.

4. Guide - This would contain information on how to use Figma and the library and contain a cheat sheet of all the components on one page with labels. The guide would be linked to the Foundation file. It would be more of an uneditable file and just surface all of the changes made in one place as an overview.

What was found with making all of the components was everyone had a slight variation of preference on how they were put together. Sometimes this was decided and refined by committee and what works best for the majority. This is the beauty of Figma and just goes to show how flexible and powerful the application is.

Current limitations of Figma

There was very little to complain about with Figma as most bugs were fixed with their regular updates. Some included: no border offsets (handy when mocking up outlines for focus states), specs could be a little buggy i.e Figma doesn’t include the border size in its calculated dimensions, so developers can experience confusion when inspecting designs and trying to interpret the designer's intention. Also, you couldn’t publish a single artboard as a prototype (unlike InVision for example).

Whenever blockers were experienced within Figma there was always a way around it. The Figma community is massive and there is some much available guidance and ready-made free components available.

We are excited to see what’s next in store and how the boundaries can be pushed even further. The feedback from the TELUS designers has been great and the collaborative effort with brand and design made this a really enjoyable project to work on.

This is only the beginning as the TELUS team now grows out and evolves their systems in Figma!