Why and how we use Figma

In this article we explain why we chose Figma as our main design tool, how we use it, and how it boosts our productivity. You will gain insights into the strengths of the tool that we find most valuable and see an example of how we structure and organise its usage in order to create collaborative workflows which enable us to deliver exceptional interfaces, concepts, diagrams and assets for our projects.

What is Figma?

Figma is a collaborative application whose main purpose is user interface design. There is an emphais on real-time collaboration and it is cloud-based which allows users to collaborate on projects and work pretty much from anywhere.

Figma is different from other graphics editing tools because it combines the accessibility of the web with the functionality of a native app.

Why we choose Figma?

Real time collaboration

In Figma you can collaborate with your colleagues in real time in any file, see the changes, add comment threads, discuss features, divide work and much more.

You can see the cursor of your colleagues, call for attention to your cursor or follow someone else’s. It’s really easy to check and understand what they are doing and working on.

The sharing system is especially helpful in the handover processes, when we want to share specific frames, pages or elements instead of the whole files with clients or managers.

Comment threads

In Figma you can create comment or discussion threads in a pretty visual way, and position them exactly where they are relevant in the design file, pointing the attention where it’s needed.

Anyone can add their opinions in those threads, mention other accounts and resolve the threads when they are resolved.

Permission based roles

With its permission based structure, there are different levels of access to the shared designs. 

• As a designer, with edit permission, you can edit the designs and take part in the design process. 
• As a developer, with view permission, you can access technical insights that will help you implement the real solution.
• As a product owner or manager, with view permission, you can check all the progress, comments and discussions among other roles.

It’s worth mentioning the new “Developer Mode” which was recently released and is currently in beta mode. This new mode enables developers to check and implement designs with an inspection focused UI, and a ready for development section in order to know what’s ready.

Version history

Figma’s version history automatically saves all versions of your design files as you work on them and allows you to view and restore those previous versions (depending on the contracted plan).

It is really easy to access previous versions by clicking on the “Version History” button in the toolbar, then you can compare them side-by-side, making it easy to see what has changed.

Additionally, you can leave notes on specific versions of your designs, making it easy to collaborate with your team. This is really helpful in order to share a “ready for development” or “ready for first review” version with a part of the team and continue the work.

Design system features

We consider that design systems are important in order to achieve robust and consistent user interfaces in our projects. Figma enables the design team to set up the base of those design systems using different features.

In Figma a set of design tokens and components is called a library. Each library is primarily composed of two types of elements.

Figma lets you group different design elements and then define any of those groups as a component (asset) for your project.

Creating a component is as easy as drawing a box and adding properties and connectors to it. In this way you set up a reusable object in your design library.

Using a component is as easy as dragging and dropping it from the local components section or the assets page.

Additionally, Figma lets you define style properties for colours, typographies, grid spacings … and then reuse those in any element for backgrounds, borders or fonts.

In order to use a defined property just select the element that you want to style, and on the design sidebar, select the specific property you want for the specific attribute:

It is also worth mentioning the new “variables” feature which has recently been released in beta and which we are already starting to introduce in our workflows. It  enables you to define colour, number, string and boolean variables which can then be used as design tokens, making the design system implementations much easier to handle, update and maintain.

Cloud Native app, cross platform solution

Figma is a cloud native app, it runs and renders complex designs completely in the browser thanks to the use of web technologies and WASM (web assembly) in their rendering engine.

This translates into a powerful cross-platform solution, performant and robust while accessible by anyone, from any device with internet connection and a browser.

This also makes it really easy to provide native applications for different computer Operating Systems, promoting their own reusability and making the final solution consistent between different apps and the browser.

A community that matters

The Figma community is large and active, thousands of designers and developers share resources, tips and tutorials on how to use the tool. You can connect with other designers, share work, get feedback on your designs or just check how others are using Figma to get consistent results. 

Additionally, Figma frequently supports and implements the most popular feature requests from the community, so you can request features and maybe see them introduced in your design tool if they get popular.

Moreover, the community promotes the popularity, extensibility and improvement of the tool. There is a large library of plugins to help streamline workflow and add new functionality, making the tool even more powerful.

How do we use Figma?

We trust Figma for all our complex UI/UX designs and interactive prototypes but we also introduce it into our stack in order to use it for many other tasks such as: sprint retrospectives, concept wireframes, internal and external presentations, digital and graphic assets production, flow and software architecture diagrams, internal brainstorming sessions and much more.

In 1xINTERNET we use Figma as our main design tool, it’s pretty powerful but it requires some good structure, organisation and guidelines in order to get the most out of it.

Organising files

We love to work systematically, that’s why we have rules and guidelines to use in our design files and libraries.

We put effort into defining good naming conventions, separating client projects with a number ID at the beginning and then adding the file purpose, something like the UI library or the main design file.

Each file always has a thumbnail initial frame with the basic information, such as, project manager, year, title, short description and status.

The structure is also important, our design libraries are based on an atomic design approach, dividing the components between atoms, molecules and organisms and then reusing them in the sections or templates (which match Drupal paragraphs) and then also in the page examples and regions.

Separately, the main design files follow a client first approach, focusing on the validation and the status of the designs.

As previously mentioned, in order to make the system organised and to separate between component libraries and client ready designs, we divide the files and reuse them. 

Foundations and component libraries are handled separately, closer to the developer overview of the reusable UI elements.

Based on that library, we can design multiple websites, apps or products for the same client, always maintaining the same look and feel.

The flow normally starts by creating the website or app designs while using and updating the components library in parallel. This approach means that we have a first product to show to the client and an entrypoint for the developers to begin conceptualising the implementation details and how the components are going to look.

Best practices and guidelines

We add a bunch of best practices when it comes to actually using all those great features Figma offers.

One of the most important is versioning, we encourage the use of meaningful and dated names each time new changes are added or a new design branch is started. This way anyone can quickly know the version of the design they are working on and the changes that have been made since the last version, making it easy to understand and easy to share exactly what it’s supposed to be shared.

Our approach extends this idea by prioritising a clear and understandable system. We focus on adhering to the recommended file structure and conventions, ensuring that our structures are built upon reliable handover systems or established design principles.

As previously described, we base our work in trustworthy design systems, so our focus is on making the design elements atomic, decoupled and reusable, in the same way as we later do with our implementation based on Web-Components and Tailwind CSS. For this reason we try to make use of the component and library features of Figma, providing reusable elements and properties for the designers and boosting the development understanding of complex or composed designs.

Finally, we add our own layer of utilities, as frame headers, defined processes and status labels with meaningful colours and page naming conventions.

Clients and PMs

The flow between designers and other coworkers is also an important point to take into consideration. We emphasise the use of efficient handover processes to ensure smooth transitions between design and implementation phases.

The project manager or client always receives completed layouts, using the sharing system we can focus on exactly what the client needs to see and using the prototype view, they can even interact with the design if needed.

We mainly divide our process in three steps, wireframing, designing and handovering, and then we add a layer of status:

Developers as inspectors

The structure of the files and the best practices we follow lead to ease of use for the developers when they have to inspect the designs and get their components updated.

Figma offers simple ways of inspecting and checking the named design tokens and elements, always pointing out when something is being reused, so developers can directly use that configured value in their implementation, without having to repeat or hardcode anything new.

As previously mentioned, in cases where the developer has doubts, they can initiate a new comment thread directly at the specific location where clarity is needed, mentioning the designers and waiting for clarifications while working on the rest of the design.

We have a powerful collaborative flow between developers and designers in 1xINTERNET.

We are also thrilled to start using the mentioned “developer mode” which greatly simplifies inspection and development processes. This feature, combined with the "variables" functionality and our tech stack built on Tailwind, alleviates the task of developers by providing design tokens that can be directly referenced and applied during implementation.

Templating and iterating

Iteration and improvement always leads to better products, that’s why we maintain and improve our own design template with the knowledge of our projects.

Furthermore, this design template is being systematically synchronised with our design system, Quartz, which is another template implementing all the components and foundations any simple website might need. Thanks to features like styles and now variables, we are able to base our Figma template and design system on the same foundations.

Finally, that design system is used for our digital experience solution, DXP, which offers the best drupal experience possible with a fully integrated set of web components that are in sync with our design template.

Summing up, starting from design and making it easier with Figma, this product based work, results in an iterative and continuous improvement process that leads to better products and better results in our projects.