What is Figma and how does it work?

What is Figma?

Figma is an interface design application that runs in the browser—but it’s actually much more than that. I would go so far as to say it’s probably the best application for team-based collaborative design projects.

Figma gives you all the tools you need for the design phase of the project, including vector tools which are capable of fully-fledged illustration, as well as prototyping capabilities, and code generation for hand-off.

Figma Runs Online

Even though Figma is browser-based there are desktop version for both Windows and Mac OS. Presumably these are wrap applications which are running a browser inside them, but whether that’s the case or not, Figma is always running online within those apps. 

Note: If you do lose connectivity you can still keep working on any document you already had open.

Collaboration

The “always online” nature of Figma actually provides some of the greatest strengths of the tool. One of those strengths is that Figma allows for live, real-time collaboration. You and your team members can all log into a design at once, simultaneously making changes to it. And the fact that these designs are all saved online means that you never have to worry about any team members falling out of sync with the project. The latest changes are always right then in the file, and you needn’t worry about transferring files between team members, or pushing files to and from any third-party storage platform.

This also means you can jump into a design at the same time as a client. So even if you’re in a separate location from your client you can still have a sit-down meeting where you’re both looking at the same thing. The client can make suggestions, and you can implement it right there and then.

On top of all these live collaboration tools you can also leave comments directly on the canvas.

Component Libraries

Figma allows you to build up libraries of reusable components which the whole team has access to. Components give designers a head start on any existing design systems, and when a component is updated in the central library those changes are made across all designs for everyone.

Prototyping and Code Output

For prototyping you can create connections and hotspots on your design so you can simulate how a user would flow through that interface. For the coding phase Figma can generate SVG code, CSS, and iOS and Android code.

The Little Things

So that’s covered the collaboration aspects of Figma, but the best part of Figma is actually more difficult to pinpoint. It’s that culmination of all the little things that Figma does really well, and there’s a long list of them. We’ve put a whole bunch of them together into a series called Figma Tips & Tricks. There are too many to mention here, but some of my favourites include:

• In Figma, a node on a vector can have multiple segments attached to it (more than just the standard two). The more complex shapes you can make with these are called “vector networks”.
• Figma allows you to quickly an easily import multiple images at once, placing them exactly where you want them.
• When you move an object around the canvas in Figma you’ll see its height and width reflected in the rulers.
• Copy the SVG code directly from an object within Figma, and conversely, you can copy SVG code from a code editor and paste it as a graphic onto the Figma canvas.

To Sum Up: What Figma Is

Figma is a browser-based UI and UX design application, with excellent design, prototyping, and code-generation tools. It’s currently (arguably) the industry’s leading interface design tool, with robust features which support teams working on every phase of the design process. If you haven’t already, try it!

• figma.com
• @figmadesign on Twitter