Helping teams move to collaborative design with Figma

TELUS is a Canadian multinational that offers products and services in everything from telecommunications and health to safety and security. In this article, we outline how NearForm helped the company transition its design system from Sketch , the leading software design package for the last five years, to Figma. You can learn about how we moved our own design stack in this article on NearForm's transition to Figma.

First released in 2010, Sketch soon distinguished itself as a powerful tool for user interface/user experience (UI/UX) designers working in the Mac environment. It allows designers to create designs, upload them in JPEGs to InVision and produce prototypes with clickable hotspots for simulating the end product on a device. TELUS's Design System Management (DSM) grew in strength and attracted a large community of users with Sketch at its heart. But the design tools market does not stand still for long, and soon there was a new player attracting attention.

Figma was launched in 2016 as a cross-platform, browser-based design solution targeted at UI designers. It quickly became a a serious contender in a competitive market due to its ability to add new features fast. After a few iterations, it became a stable potential replacement for Sketch — largely due to its strength as a collaborative tool. When the time came for TELUS to supercharge its DSM, Figma's collaborative strengths made it a natural choice. With Figma, separate users could work on the same document at the same time, creating a completely interactive experience.

NearForm was working on a component library for TELUS at the time and had recently transitioned to Figma, so members of the design team were brought in to help TELUS Digital migrate from Sketch .

When the NearForm team began to help TELUS Digital move to Figma, their first priority was to dive deep into the DSM so that they could develop a real understanding of how it worked and make the transition as painless as possible. The system is used by different teams for both web and native experiences. Being involved from the start of the transition meant that NearForm could really get to grips with how the system was used at the time and develop simpler ways to apply it so that both first-time users and experienced ones could feel equally comfortable with it. Given that Sketch and Figma function very differently, this presented a good opportunity to remove any potential areas of confusion.

Once the team had got to grips with the TELUS DSM, it was time to work on creating a proper foundation for the file structure and versioning. Before we started creating a library, we discussed best practices and personal preferences with the team and then refined them.

Components are a powerful feature of Figma. With them, you can reuse UI objects and attributes, and if you want to change an element, you simply make the change once in the original component, and it updates across all your designs. For the TELUS transition to Figma, we divided components into categories using the simple navigation system.

Teams could work easily with the system, which indicated the status of work using a system of traffic lights and allowed for the movement of pages into categories according to their stage of completion. Figma also includes a useful comments tool, so combining this with a platform such as Trello makes it easy to see how projects are progressing.

Design teams constantly face the challenge of managing design files so that everyone can contribute and also know where everything is. Enabling collaboration while maintaining version control is a constant issue. For the TELUS DSM library, we implemented a versioning system to ensure work was not lost and to keep all users on track. The document we created outlines a clear versioning process that means all users follow a predefined naming convention and give a brief description of what they changed every time they publish a new or additional version of a design.

There is no easy way to convert Sketch components to Figma components — despite the claims of some plugins. Having investigated several options, we decided that the best and most comprehensive way to create the new TELUS library was to redraw each component from scratch. This was a laborious process, but it meant that we would not have to go back and fix components that did not convert consistently. Instead, we created a new, clean structure that allows Figma's Auto Layout, variants and instances to be incorporated in parallel.

It also means that naming systems can be upgraded if necessary. Naming was extremely important in the transition, both because of its significance for the UX and also because it makes it easier for Figma to analyse components and the connections between the variants and instances.

Following discussions with the team, we decided on four discrete but interconnected files for the project:

As we worked on creating the components, different opinions surfaced as to how they should be assembled. Figma proved itself to be the ideal tool for this kind of collaboration, offering the flexibility we needed to make decisions that worked well for the majority.

As Figma matures as a design tool, it becomes increasingly reliable. Any bugs that do arise tend to be fixed as updates are made. Some of the bugs we encountered in our work with TELUS included:

Despite these shortcomings, we found that there was always a way to circumvent any obstacles we encountered within Figma. With a huge and growing community behind it, you will always find advice on dealing with an issue, as well as a range of free components that others have devised.

Working on the TELUS transition from Sketch to Figma was a complex but rewarding project for NearForm. Collaborating with the TELUS design team revealed just what can be achieved, and we are really looking forward to the next developments as the TELUS team continues to develop their systems in Figma.