Over the last 12 months our team of designers have made the switch to a new digital platform for UX and UI design. Say hello to Figma.
Figma is a cloud based design platform that is vast becoming a staple in the designers’ arsenal for digital design. This new kid on the block boasts similar features to Sketch and Adobe XD but comes into its own for team collaboration, making it easier for the design process to flow.
So why is it so good?
Firstly, Figma works on any platform, so that puts to bed the Mac vs PC debate very early in this conversation. While most design applications run a desktop only based application, Figma also allows you to work via their web based browser application, meaning you can work or review your designs anywhere, anytime - all you need is internet access.
Alongside the desktop app you can also download the nifty mobile applications “Figma Mirror”. This app lets you stream your designs to your mobile device so you can demo your user journey and screen designs directly on your phone, meaning any layout queries and adjustments can be picked up quickly and on the medium they will be displayed in. A feature that ultimately helps the early stages of the design process.
Real-time Design
One of Figma’s party tricks is real time design! The platform allows you to not only work in teams on the same project, but also collaborate in real time on the same design file. Figma provides a neat little interface that shows you in real time, or “live”, what your designer partner is doing, as well as giving you the ability to see the flow of their work.
This tool aids the design process massively. Not only by allowing the designers to have awareness of the design choices they are making but by also ensuring the creative lead can review the designs as they are being created. This means any deviations from the brief can be spotted before the design process is completed, saving time, frustration and money. The time saved in particular means our design team can then spend more time creating something amazing rather than redoing something to fit the brief.
Consistent and Communicated Design
The real time design function also allows the design teams to share components they have worked on so that throughout the project, a high level of consistency and pixel perfection is maintained.
Figma’s components library allows the designer to create “snippets/widgets” within their designs so that when they need to address a certain flow in the site structure they can reuse a component without having to look back through their design file for it. It might sound a bit like copy and paste… but something as simple as having a catalogue of all your calls to action to hand improves the overall consistency of the end product as well as the user journey.
Sharing that’s fast and controlled
We’ve all been there… waiting 34 minutes and 26 seconds for your WeTransfer (containing a 128gb PDF) to send to a client. Figma allows you to share your design with a touch of a button and better yet, its instant.
Don’t panic though.. permission based sharing is a key feature that allows you to give control to the right people in your project team. From designers to project managers through to the client themselves, you can selectively control what the individual can see in order to make sure chaos doesn’t occur.
Amends, can it just...
Valued feedback is a massive part of the design process -when it's passed on in the right way of course.
Community comments allow real-time feedback on your work, meaning user feedback or key stakeholder comments can be seen “live” on your design. This allows the project team to review the comments and the design in the same window, so any feedback that could affect the flow of the customer or the consistency in the design is picked up quickly. Feedback in this way also lets the team see first hand what the client is thinking and not an interpretation of what they’ve said, allowing the designer to come up with the best solution.
Don’t forget any adjustments can be seen in real time enabling faster sign off and quicker decision making too.
Finally it’s time to talk to a developer!!
The design is complete, the client is happy and the documentation is written…. It's now time to let the developers steal the show!
For me a massive plus of Figma is the addition of code snippets, a small little window at the top of the screen that displays a selection of CSS properties to the user. From the text size and weight through the font family and fill colour, this tool allows a one click view of all the information that’s important to a developer.
While it might sound pretty simple, it does help speed up the development process as well as maintaining overall pixel perfection.
These features all add up to a great positive for Figma; it allows the design process to shine from start to finish. This not only means you spend less time on things that should have been avoided but it also means something far more important...a better design for your client!
To find out more about Figma visit https://www.figma.com