Figma, a Tool for Everyone

Canvs Editorial
Canvs
Published in
7 min readJul 31, 2020
Figma banner image

Design and tech firms comprise complex structures with people like UX designers, Visual Designers, Product Managers, Business teams, Developers, and so on. Regardless of their variance in the profession, they are all bound by the same goal: building a meaningful, successful and effective product/products. They also need to do this fast to get the ideas out there quicker to test and iterate them effectively. In this creative process, all stakeholders must be involved in the design and development process to inform the product better, thus making it all-rounded. To achieve high productivity collaboration, tools need to stay with the times.

Enter Figma,

Given the nature of this piece, we’ll not re-introduce Figma and assume you’ve known about it. From the looks of it, Figma is not a specialist tool meant for designer but for design as an organisation function. It maximises the number of parties that can be a part of the process of ideation and creation. A mature design process is a collaborative process, and Figma enables collaboration and inclusion like no other. It became the home base for working together beyond company walls. It brings together the creativity of design applications and the collaborative feature of tools like Google Docs/Miro, forming an ideal tool for the entire business>design>development process.

Figma has become increasingly popular since it appeals to both sides of the relevant stakeholder groups: designers and non-designers. In particular, it helps to open the creative doors for them (non-designers) and acts as a huge enabler to the design strategy and execution.

So as it seems, what makes Figma special is it’s seamless ability to democratise building and ideation within an organisation. Thereby it empowers companies to embark on their build journey towards greater design maturity.

Attributes that clearly shine:

  1. Collaboration : Real-time cross-function (Bonus: Multiplayer Mode)
Real-time collaboration in Figma
Source

One of the core principles of Figma is its seamless real-time environment for collaboration and transparent designing process for cross-functional teams. This impacts its usability since it helps them co-design faster and mitigates misunderstandings in the project. Users can invite other people to view/edit/preview the design or its prototype. Figma also has a brilliant embed feature which allows you to input design and prototypes into other platforms depicting hassle-free sharing.

Additionally, Figma allows pair functioning live on the canvas without latency issues.

2. Speed : Major optimisation jump in 2018

Figma has been designed by keeping its performance and fluidity in mind by removing friction as much as possible. With its document renderer restructured (2018) and WebAssembly optimisations along with other changes, Figma sped-up load time by 3x. WebAssembly is enabled on the desktop app, Chrome, Firefox, and Safari on both macOS and Windows.

Demonstration of improved load times in Figma
A demonstration of improved load times on a recent version upgrade on Figma (Source)

Regarding dragging and zooming, smoothness is optimised by tracking average frame time and maximum frame time. Degrading any one of the metrics, degrades the overall quality.

A demonstration of improved frame rates on a recent version upgrade on Figma
A demonstration of improved frame rates on a recent version upgrade on Figma (Source)

Evan Wallace, Figma’s Co-founder and CTO, works with the principle that the product must be as optimised as can be, and it manifests in Figma as a very smooth functioning designer tool.

To get some insight into Evan Wallace’s brilliant creativity (seen through WebGL projects) go here.

3. Access : Adopting the democratisation of the Web

Figma’s web-based application
Source

To build a product, you need the inputs of PMs, front-end/back-end developers, business heads, and others, so to view the file, they would have to install the costly tools which are not justified if they do not design regularly. With Figma, you mitigate the need to purchase a MacBook or an expensive license for a bloated design tool that you might never use again. Figma gets you up and running in minutes by being browser-based (app optional) and is compatible across all platforms and machines. Figma advocates democratising the design process and open-sourcing products (Figma has a free-to-use version) and not limiting the resources to the only macOS, and they made this possible because of new technologies like WebGL and CRDTs. Figma is also lightweight and easy on the machine.

Being web-based makes Figma accessible from everywhere. It stores all the files and edits them in the cloud. You do not run the risk of losing hours of hard work, thanks to the on-demand autosave feature. When you receive a Figma file you click and it open on your browser. When you want to add a plugin, you click a button, and it’s done.

4. Shared Creativity: Components and shared libraries

Separate libraries in Figma
Source

Components in Design are reusable, modular, tokenized building blocks. The inherent collaborative nature of Figma makes the use of components even more powerful since the presence of component libraries helps anyone accessing them to build from them. As a Design team Design tokens can help your various designers to design products that adhere to your Design System automatically. As a marketing professional, you can keep shared presentation templates on Figma, and all your teammates can build right off them. Additionally, you can keep expanding that library with stuff you create!

The concept of components isn’t new, but a fully shared workspace supercharges the behaviour for its users.

Frosnapers has written a brilliant article specifying how her diverse design team was able to not only create detailed design systems basis brand and operating system, but they were also able to create easy to link micro-repositories of design elements basis their requirement.

5. Creating Lifelike Prototypes: Robust prototyping+reviewing

In-app prototyping and commenting
Prototyping source and in-app commenting source

Figma’s prototyping tool helps the non-designers to preview the overall functioning of the product. It is a fantastic and relatively high fidelity, with the ability to link up prototype screens but also experiment with a reasonably large default animation set which can give more character to the prototype.

It also supports in-app commenting, anyone with the link to your project can leave a comment anywhere on the project and tag relevant people. Integrating Figma with Slack will direct the comments straight to your Slack inbox. This tightens the feedback loop and increases productivity.

6. All-in-one weapon

Figma, all-in-one weapon, having best features of Sketch, Zeplin, InVision, Slack and much more

The users save the cost of various design tool licences, since Figma picks out the best features from Sketch, Zeplin, InVision, and many more, brings them together and makes it free for them to use.

7. Figma, as a community

Figma, as a community
Source

Figma allows the users to share designs and its tutorials on their profiles. This promotes designers learning from one another. They can recreate the design and a touch of their own. Figma is redesigning its platform to be centred on team members instead of folders, files and systems. It is focused on making sure problems are solved effectively.

Figma Plugins, the Cherry on Top

Figma plugins

Plugins are little power-ups which enhance the capabilities and functionalities of Figma or make up for the missing features. They accelerate the workflow and productivity since it optimises and automates mundane tasks, for example, aligning and renaming a group of elements. Teams can also write their own plugins.

Some of the top plugins include,

  1. Unsplash: Search and drop pictures into your design without having to leave Figma.
  2. Content Reel: Search avatar images, icons, names, email addresses, phone numbers, companies, date & time details, etc. to populate their design. This replaces the standard Lorem Ipsum dummy text.
  3. Super Tidy: Align and equally space out elements in your workspace. It also renames your frames and reorders them in the layers list, so everything stays organized.
  4. Autoflow: Super easy method to draw flows when prototyping. All you have to do is select 2 objects, hit a hotkey, and a line will be magically drawn between them.
  5. Mapsicle: Create and edit custom interactive maps and place it in your project. Mapsicle lets you adjust the location, style (Streets, outdoor, light, dark, satellite), zoom level and more. You can always come back and update the site. This way you never have to take a screenshot of your map again.

Wrapping up

Figma is not just an alternative to an already existing design tool, it is a 360-degree solution for product designers, graphic designers, non-designers, business, marketing and developers; basically almost everyone in a team setting. In a time where the design capabilities of a platform are not the only significant feature, but the ability to converse, provide feedback, or view live prototypes takes centre stage for non-design teams. Figma provides all that under one umbrella.

The Canvs Editorial team comprises of: Editorial Writer and Researcher- Paridhi Agrawal and Anjali Baliga, the Editor’s Desk- Aalhad Joshi and Debprotim Roy, and Content Operations- Abin Rajan

Follow Canvs on Instagram and LinkedIn. Don’t forget to follow us here on Medium as well for more design-related content.

--

--

Canvs Editorial
Canvs
Editor for

Meaningful stories and insightful analyses on design | Check out our work: www.canvs.in | Our newsletter: www.designtechweekly.com