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!
Adobe and Figma
On September 15th 2022 it was announced on both the Figma blog and the Adobe blog that Adobe will be acquiring Figma at some point in the near future.
Figma has arguably been Adobe XD’s biggest competitor in recent years (and recognized by most as market leader in the UI and UX design tool space) so what this means for all involved remains to be seen! We’ll be updating this post when more announcements are made. But for now, Figma is still Figma.
Here are some interesting articles and videos by designers, business leaders, and industry professionals, to get you up to speed!
Now, on with the show. Let’s have a look at what Figma is!
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 for Beginners
Check out these videos if you’re interested in getting started with Figma. Or read on for more explanation of what Figma is.
Introduction to Figma
Learn how to use Figma, a powerful tool for user interface design.
5 Figma Tips and Tricks
Discover five useful Figma tricks and tips in this video with Adi Purdila.
Figma Features
Figma has always been extremely responsive to the wishes of the design community. If designers want it (components, animation, tools for design systems) Figma have always done their best to implement it as quickly (and robustly) as possible! So which features make Figma stand out from its competitors?
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.
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.
Auto Layout
If you’re going to learn Figma for UI design, you need to learn Auto Layout—it will make your life as a designer ten times easier! Adi Purdila will teach you how to use Auto Layout during this course, in just 30 minutes.
FigJam
Back onto the topic of 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 differentiating 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 these free Figma UI kits as both a jumping off point and an excellent time saver. Basically they’re pre-made canvases for expressing your design ideas.
You can access more Figma UI template kits with your Envato Elements subscription. There are more than 9,000 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.
Figma Tutorials and Resources
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.
And if you’re interested in learning more about the Figma UI tool, be sure to check out the following resources:
Recent Comments