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. Let’s take a look!
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.
Note: this is part of our regularly updated learning guide The Designer’s Guide to Figma. To learn more about this powerful app, try our free Figma design tool tutorial.
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.
If you do lose connectivity you can still keep working on any document you already had open. The Figma design tool will store your changes in your browser, then sync itself when you’re reconnected.
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.
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.
FigJam
Since we’re diving into collaboration, it’s worth talking about FigJam here. It has the same spirit as working on designs as a team, but it focuses on ideating. In other words, it’s the perfect spot for everyone to brainstorm and organize ideas digitally.
This new tool has a lot of useful team features, like:
- timer for staying on track
- shapes, diagrams, and objects
- audio chat within FigJam
You’ll still need to do your design work within Figma, but FigJam is useful for idea creation, planning, and gathering helpful contributions from your whole time.
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.
Sum It All 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!
Try Out Figma
If you’re ready to start with the Figma design tool, dip your toes in first. You can use this free Figma UI kit as both a jumping off point and an excellent time saver. Basically it’s a pre-made canvas for expressing your design ideas.
You can access more Figma UI template kits with your Envato Elements subscription. There are more than 9000 UX and UI kits available on the all-you-can-download platform. Each one is professionally made so you get professional results in your work.
More Figma Resources
If you’re interested in learning more about the Figma UI tool, be sure to check out the following resources:
Learn the Figma Design Tool
We’ve built a complete guide to help you learn Figma design, whether you’re brand new to Figma’s design tools, or you want to take your skills to the next level.
About Author
