Moving from Sketch to Figma

The design team made the shift from using Sketch to Figma and it looks like to be a winner! Figma has successfully built a strong reputation for delivering an ‘All-in-one’ user interface design platform that looks to harmonise the process between UX, UI, and development departments.

Here at effect, the design team already had a solid experience in using Sketch, so were confident in picking up Figma as they both share similar features and tools. One of the driving factors to make this move was to maintain they remained in sync with the latest design tools and platforms used within the industry and improve efficiencies within the studio. This recent survey, 2021 Design Tools Survey, was also a huge eye-opener for the team to understand how the industry has evolved and how their peers are improving their ways of working.

Learn more about Figma & Sketch.

Wins

First up, the collaboration between teams has become far stronger than it was when they were using Sketch.

Sketch did provide a good cloud-based working environment but the UI design team found the UX team and developers were not utilising this effectively to make the most of it. Now there seems to be a more seamless process in bringing all members up to speed with the latest design and providing development teams greater transparency on design changes.

Darren, our Head of UI states:

Using Figma, the practice of collaboration has been flipped on its head and then accelerated. We now have a platform which provides clarity, transparency & communication between departments & with our clients.

One of the biggest shifts for the team was embracing a ‘design system’ approach to all our web projects. Traditionally, the rollout of interfaces for websites required many hours of producing all of the pages. Now, we are planning smarter with our projects and leveraging Figma’s clever ‘component’ features which can allow for reusable elements to be designed once and these to be used across multiple pages. In turn, this has the potential to drastically improve efficiencies in design time, addressing feedback, and handover to development teams.

Bringing beautiful interfaces to life with interactive hovers, clicks, and swipes can win over clients and excite audiences. The smart prototyping options within Figma have elevated our designs into more exciting and immersive experiences. 

Sam, our resident digital designer, says 

As an animator, having spent years re-building static designs in After Effects. Gaining the ability to directly transfer layered compositions using Figma’s prototyping features has been a huge improvement to our process. This has allowed me to not only speed up my process, but also increase the scope of what I can achieve creatively.

This has, by far, brought the team up to another level where sign-offs with clients are quicker and hand-overs to development teams are a lot smoother.

And finally, the process of gathering client feedback has become super easy as it allows clients and users to directly annotate feedback onto wireframes and interfaces to help provide clarity and context as to what the feedback is addressing.

Challenges

As we work with a vast number of clients, both present and in the past, we did have a backlog of old design files that required to be imported over from Sketch.

With this, there was the challenge of bringing the file structure and assets up to scratch to work smoothly within the Figma environment.

Migrating from one application to another can take time and planning but we found Figma’s own resources useful before we made the jump. This one in particular – Migrating to Figma. 

Granted, the prototyping tools are really useful but can get confusing. There are has been a few instances within the team by which certain workflows between pages appear broken or jumbled up. This is something the team will prob look to refine over time.

The team highlighted a few instances when sharing designs with internal and external teams. Within Figma, there are a few ways of sharing designs by which it can allow anyone to access it or only a selected few. But the added complication at times has seen the team sharing multiple links between the ‘file’ view (Allows access to the whole design project artboard) and the ‘prototype’ view (Allows access to the prototype).

It’s another area the team feels will improve over time.

Lastly, missing fonts have been a small stumbling block for the team by which interfaces require fonts to be installed locally for them to be displayed. Again, this feels like an area that requires further investigation and there are solutions available to help with this.

Learnings

Overall, Figma does provide a stronger platform that manages to cater to the needs of the UX department (through wireframing and prototyping tools to build intuitive patterns and components) and for the development team (delivering vital details and specifications on key elements and layouts for coding). As for the UI department, Figma looks like it’s here to stay and an ideal platform to scale the agency forward.

Darren states:

It means we can problem solve at a much quicker rate with no adverse effect on our outputs, if anything Figma will improve this going forward as we’ve only just scratched the surface of this powerful piece of kit.