My first weeks using Figma
By: Jordy Van Den Boom
Tags: Figma, Design Systems, Design Teams, Design

So a few weeks ago I started my first project in Figma 🎉. I wanted to try this design tool for a very long time because I see companies like Dropbox, Trello & AirBnB switching to the unknown. After a few weeks the right opportunity came by and I was able to explore the unknown myself. Below you’ll find a brain dump of things that I found out while exploring Figma.

I really tried to came up with a fancy title like ’10 things you need to know about Figma’ or ‘Figma will change your life’, but the truth is that you just need to dive into the unknown and find out yourself. Hopefully these findings will help you through the idea of what Figma could bring to your table.

#1 It’s not browser only

Figma is a browser-based web application, which means it can be run on all full desktop operating systems. Figma also has native Desktop Apps available for both macOS and Windows devices.

#2 Designs are in the cloud

Design files are saved in the magical cloud. When you’re not connected to the internet they are accessible on your desktop (and editable). Your design will sync to the cloud once you’ll connect to the internet. The last sync will rule the Artboard/Frame. So watch out with both working on the same feature when not connecting to the internet. All cloud data is stored at AWS within their own VPC.

#3 Smart Text Styles

Creating text styles is as easy as in Sketch. The only benefit over Sketch is that Figma works with labels instead of stacks. So the first name you type before the “/” will be the name of the nested label. Also an extra good bonus is that you can rearrange and rename the text styles on the go.

The first name you type before the “/” will be the name of the nested label.

#4 Easy to use Color Styles

Adding Color Styles and working with them is exactly the same as in Sketch. From a more systematic perspective it’s really nice that you really need to detach a color style if you want to use something outside of your library. This makes you think in more generic solutions.

#5 Grid Styles (!)

You can actually add grids to your Local Styles. For me personally this is amazing because one of the problems I often have is that multiple designers design on different grids. This also makes sure that you don’t need a separate boilerplate to kickstart a design.

#6 Collaborating as it should be

One of the main perks of Figma is of course the ability of collaborating all together in 1 source of truth. Sharing goes as easy as sharing a link to the file or specific Frame, or invite someone by e-mail.

Collaborating comes in 3 roles:

Owner: The person that creates the file. Editor: People that actually work within the file. (designers, developers, copywriters) Viewer: People that only need to have viewing-rights. (stakeholders)

#7 Auto Layout is my new favourite feature

Auto Layout allows you to create dynamic Frames that respond to their contents. It takes a few tries to know how it works. But when you know how, it will make your life way easier.

This is what you can do with Auto Layout:

Create buttons that grow or shrink as you edit the text label.

Quickly build and rearrange lists that adapt to new items.

Combine Auto Layout Frames to build complete interfaces.

The video (with super boring voice over) explains it well

#8 New way of work

It’s often a challenge to really work together on bigger projects and iterate on each others work. With being able to work in the same file and actually see what your colleagues are creating you get a whole new vibe that I never experienced before. I was kinda afraid that someone came to close in my ‘designer-bubble’, but it worked to other way around to be honest. Everyone is much more included in shipping a feature/product.

#9 Components are a bit tricky

Components work almost the same as in Adobe XD. You’ll create a master component, and can use an instance of that component to use in all your interfaces. You can override the text properties, fill, stroke, effect and bounding box of an instance. For me it’s still a bit weird to think that you have a ‘symbol’ that can still have different properties. But in the end you’ll find out that it really accelerate you as designer.

#10 Team Library is the new Symbol Library

Styles and Components live in the Files they are originally created in. To reuse Styles and Components across your Files and Projects, you can publish them to your Team Library. As designer you can manually choose which libraries you want to use or hide

#11 Shortcuts are a bit weird

Shortcuts was the only pain in the ass that I really had compared to other design tools. The regular R (for rectangle), O (for oval), L (for line), etc work as expected, but you need weird shortcuts for viewing your grid or hide your interface. After a while I get used to it, but I’m happy to use a more narrow keyboard for all the awkward combinations.

#12 Plugins work amazing!

I remember installing my first plugin. I clicked ‘install’ (within Figma btw, no download is needed), and it was there. From what I’ve read, the plugin-builder from Figma is super nice to build upon.

Cool plugins

Figmotion (Principle in Figma)

Vectary 3D (Honky bonky in Figma)

Todo (Simple todo list plugin to check off your tasks inside Figma)

#13 Preview: Scale down to fit width 100%

I think I’m one of the few designers that normally exports an artboard and opens it in a browser to see what it looks like in a specific viewport. With the ‘Scale down to fit width 100%’ I can just see the preview on another tab within Figma. Works great. Only downside is that you can’t exclude it from the client so you have Figma on your first screen, and your preview on your second screen.

#14 Figma mirror works as you expect

It works. Simply download the app and click a Frame to sync. You don’t need to be on the same internet, you just need to be logged in to the same account on mobile and dekstop.

Concluding

In my honest opinion I think Figma is a tool that I would love to keep in my workflow. It feels super light and haven’t crashed or anything in the last two weeks of using it. I’m keeping my fingers crossed that Figma will be the go-to tool when designing something systematic. A tool where you really need to work in some sort of system together with larger teams and a lot of stakeholders. This would give a clear way to Adobe XD to fully focus on more graphic heavy interfaces with better integration between XD/PS/AI. Want to be honest, Illustrator is still the king of pen-tools.

Key take ways why to choose Figma