FIGMA - a design tool replacing all others
AuthorNina Tudor
DateJul 1, 2021
There are many tools used by designers, such as Sketch, Adobe XD and Invision, but Figma is here to replace them all – well, at least here at Bornfight.
The rapid growth of technology affects many areas and industries, and because of that, design is constantly evolving and changing. Some tools that designers use today on the daily basis didn’t even exist a couple of years ago. With that in mind, we need to always stay on track with tech trends and think about the future of design and all the possibilities and challenges it will bring to users and designers.
The tool that is shaking the design industry today is Figma! In this blog post, our focus is on Figma – why we use it, what features we love, and what features were recently introduced to the public.
SO WHAT IS FIGMA?
Figma is a relatively new tool (entered the market back in 2016) that is rapidly replacing all other designer tools. A web-based app made to make designers’ lives easier. It works on browsers, which makes it simpler to start a project on one laptop and finish it on another.
It is an all-in-one digital design tool that is, as already mentioned, primarily web-based, with additional offline features enabled by desktop applications for both macOS and Windows. In Figma, designers can create UI, UX, prototypes, and collaborate with other designers while working on the same project, as design files, prototypes, and comments are all in one place.
A NEW WAY OF WORKING
The design has always been a collaborative process especially during the discovery of new ideas. However, when we shift to UI design, we often work in isolation. That leads to inconsistent layouts and flows, the reinvention of patterns and solutions, and misalignment between teams.
But that’s changing. With new design tools and design systems, UI design is now more interconnected and participatory. To fully embrace this change, we need to move away from our folders, organize ourselves around products rather than organizations, and be co-authors in our documentation.
WHY FIGMA?
For some time now, we have transferred all of our design workflows to Figma. It made our processes better, but it also made it easier for designers to cooperate with other teams at Bornfight. Before Figma, the design team would work with other teams by sending them a file, a PDF, a screenshot, etc., which worked fine in the past, but now that there are other options, why not use them.
It was one of the first tools which made it possible to have all things in the same place, and for everything to look the same for everyone in the document, no matter if the person is an Editor or a Viewer. A bonus is that everything is in real-time and that misalignment that happens because of lack of communication is minimalized. Because of Figma, we now have one central source from where we can extract everything we need and work on. And that brings us to the first thing we want to highlight, and that is – multiplayer.
MULTIPLAYER
Figma’s multiplayer enables easy collaboration between designers and their cross-functional partners and between designers across product areas.
When we think of Figma, we think of a social design tool, which means we need to be respectful of others who work in the same file.
Here are some of the rules we follow when working in multiplayer:
- ADD A PHOTO – having a photo makes it easier for your coworkers to recognize who is making the changes.
- INTRODUCE YOURSELF – a simple cursor shake when you enter a document is an easy way to say hi.
- LEAVE A COMMENT – have a question or comment about something? Leave a comment, and tag the relevant person.
- RESPECT FILE STRUCTURE – in explorations or playgrounds, try to avoid changing screens you didn’t work on. Instead, make a copy of that screen (Option + Drag), and work from the copy (if you have permission from the designers or owners of the file).
SINGLE SOURCE OF TRUTH
Figma serves as a single source of truth. It makes it easy to find up-to-date files, have confidence that what you’re viewing matches what’s live, and jump right into creating something new. Figma also allows us to keep all files in one place. That means no more navigating between Sketch, Abstract, and Invision.
QUICKLY COLLABORATE ON PRESENTATIONS
Having one single style template for the slides of the presentation, and having everyone on the team start the work on their part of the presentation in real-time, made a job much more effectively done.
SHARING PROTOTYPES WITH CLIENTS OR THE TEAM
When your designs are ready to test, you can share your prototype with others. When sharing a prototype, you can decide if collaborators can also access the files or just the prototype. This is especially useful if you’re sharing prototypes with clients.
We usually just copy the link to the prototype and share that with the clients. That way they can only see the prototype and don’t have to be logged into Figma.
DEV HANDOFF
Inviting team members into your projects or files is as easy as clicking the blue Share button in the top right corner. Owners and Editors of files can invite others either by their email address or by copying and sharing a link. Unlike Editors, Viewers don’t require a paid license and can be added for free, still allowing them to inspect, export assets, view code, comment, and even navigate through prototypes.
FIGMA CULTURE
Since we work together on many different files within the Figma and often present the solutions while online, we agreed to always do a simple cursor shake when we enter the document – a way to say hi. And the other thing we agreed on was to create a “parking” mode. It is a designated space within a document where everyone can place their cursor – a great thing if someone is presenting.
HOW-TO BASICS
- TEAM COLLABORATION AND HANDOVER
From sourcing feedback and sharing prototypes to developer hand-off, Figma’s got you covered.
- INVITING TEAM MEMBERS
Add your partners by sharing a link directly to your project file.
- COMMON KEYBOARD SHORTCUTS
- Move object (V)
- Scale object (K)
- Artboard/frame (A) or (F)
- Rectangle (R)
- Text (T)
- Add/show comments ©
- Paste text (Cmd + V)
- Paste without formatting (Cmd + Shift + V)
- Show/hide interface (Command + .)
- Search all tools (Command + /)
- Duplicate (Option + drag) or (Command + D)
- See all keyboard shortcuts (Control + Shift + ?)
- FONT HELPER
Figma gives you access to an extensive catalog of Google Web Fonts. If you would like to use extra fonts in your Figma designs, you can use local fonts on your computer. If you’re using the Figma Desktop app, any local fonts will already be available to you. You can find these alongside the Google Web Fonts in the font picker. If you’re using Figma in your browser, you will need to install the Figma Font Helper application. This allows you to access any local fonts in the browser.
- ARTBOARDS / FRAMES
In Figma, you can add layers directly to the Canvas. If you’re designing for a specific device or screen size, you may want to create a container for your designs. This is where frames (or artboards) come in. They allow you to choose an area of the canvas to create your designs in. When you are done with your super-duper awesome designs you can export them via the lower-right export panel.
- FOLLOW ALONG WITH OBSERVATION MODE
Whenever somebody views a File or Prototype, we will add their avatar to the toolbar. This allows everyone to see who is currently accessing the File. If you click on a person’s avatar, you will enter Observation Mode. Like screen-sharing, Observation Mode shows you what’s happening on their screen, in Figma.
WHAT’S NEW IN FIGMA?
On this year’s edition of Config, a global design conference hosted by Figma that was held online from 21.-22. in April, we were introduced to new features in Figma. And most of them were an answer to the growing need for collaboration in the last year. Because, in the words of Dylan Field, a CEO of Figma, design is an ensemble and not a solo act. So without further ado, let’s get through all the new functionalities Figma now offers:
- FIGJAM
The first new thing we want to introduce you to is Figjam. Figjam is described as an online whiteboard that makes teams more engaged and focused on collaboration.
Figjam is here to make brainstorming easier and more enjoyable, as that is an important part of every project.
Another problem it tackles is working on a new project with new teammates. That can be very stressful, especially if you still don’t know anyone on your team and don’t know how they function or work. To help you meet the team and be ready to work with them on complex projects, Figjam offers icebreaker games you can play online.
Figjam’s job is to also make sprints easier and more collaborative. Especially Standups, a daily 15-minute event at the start of every day while working on the project (you can learn more about them, and Scrum methodology here). With stickers, everyone can more easily see what is currently being worked on and what is done. To make it a bit more engaging, teammates can now leave reactions on the board to express their feelings.
Those reactions (that you can express with emojis, stickers, markers, and dot vote) are also a very important part of the new feedback section. Figjam is a great way to gather all the feedback, and have everything in one place, so once the sprint is finished, you and your teammates can go through it and discuss what should be improved, but also discuss things well done.
They even offer free templates for Standups, Retrospectives, and other templates created by the Figma community that will help you before you develop your preferred framework.
OTHER NEWS IN FIGMA
- FIGMA ON THE MOBILE PHONE
Figma was on mobile for a while now but they have brand new updates for their application and we can’t wait to try it out. While it is still in beta, it will soon be available to all Figma users. A huge help when wanting to test mobile designs or when you want to view the design or prototype while being away from your computer. Currently, it is not possible to edit prototypes or files on the mobile app, but hopefully, we will see that upgrade soon as well.
- LEAVE AN AUDIO COMMENT
To create the best solution for teams that don’t work in the same offices, Figma also introduced a new feature Audio. It is still not available to the public, but if you would like to get notified you can do so here!
- ENHANCED MULTIPLAYER
We mentioned that multiplayer is one of the most important features and the main reason why we use Figma, so the fact that you can now add up to 500 users and work with them is going to be helpful.
- FIGMA COMMUNITY
Figma created a community of creatives that you can search through here. Share your design work or get inspired by browsing through the work of other creatives and connect with them via comments.
If you are interested in learning more about new releases in Figma, you can watch the full event here!
LET’S WRAP THIS UP
Figma for us here at Bornfight became a really important tool in a short period. The main reason for that is because Figma made working remotely feel more like working in the office, which is now extremely necessary.
FREE RESOURCES
