The UX Designer’s Guide to Figma | Designlab (2024)

If you're a UX or UI designer (or are interested in becoming one), then you've probably heard of Figma, a browser based interface design platform.

So what is Figma, and what can it do for you?

In this article, we'll take a comprehensive look at all that this interface design tool has to offer. We'll discuss what Figma is used for, its key features, how much it costs, and more.

What is Figma?

Figma is a cloud-based vector design tool that enables UX and UI designers to create, collaborate on, and share their designs.

Designers using Figma can create high-fidelity prototypes and user interface designs for web, mobile, and desktop applications. Figma is also popular among product managers and developers, as it offers an easy way to share designs and collect feedback.

What is Figma Used for?

Figma can be used for a variety of design projects, including:

• Creating wireframes and prototypes
• Designing user interfaces
• Conducting usability testing
• Collaborating with teammates
• Sharing designs with stakeholders

How Much Does Figma Cost?

Figma offers a free plan and a paid Professional plan.

The free plan includes unlimited projects, up to three editors per project, and basic version history.

The Professional plan costs $12 per editor per month and includes additional features such as advanced version history, plugin support, and real-time collaboration.

Note: Designlab students are eligible for a complimentary 1-year subscription of the Figma Professional plan (a $144 value). Learn more here.

Key Features of Figma

Some of the key features that make Figma so popular among designers are:

1. Layout and Design Features

Unlike the desktop based UX design tools, design and prototyping in Figma can all be done in the same file. This saves a lot of time and hassle for designers, as you don't have to constantly switch between different software programs.

Figma also offers powerful layout features that make it easy to create responsive designs. With auto-layout, you can quickly adjust the spacing and position of elements on your canvas without having to manually adjust each object.

And with its component instances feature, you can create multiple variations of a component (e.g., buttons with different states) while only having to design one master component.

2. Prototyping Features

Figma also offers powerful prototyping features that enable you to quickly create high-fidelity prototypes. With Figma, you can add transitions, triggers, and animations to your designs with just a few clicks. You can also preview your prototypes on mobile devices using the Figma Mirror app.

3. Interaction and Animation Features

Figma also offers powerful interaction and animation features. With the Interactions panel, you can add actions to any object on your canvas. For example, you can make a button change color when it's hovered over or make a text field expand when it's clicked.

You can also add animations to your prototypes using Figma's built-in timeline. With the timeline, you can create sophisticated animations without having to use an external tool like After Effects. Simply select the objects you want to animate and add keyframes to create your animation. It's that easy!

For more animation control, Figma also offers a Smart Animate feature. With Smart Animate, you can automatically generate animations between any two states. For example, you can create an animation that makes a button expand when it's clicked. Simply select the start and end states, and Figma will do the rest! Check out the free tutorial video below.

[MID_ARTICLE_CTA]

4. Responsive Resize Features

Responsive design is foundational to creating any kind of interface design work. Traditionally, this meant that you would have to create your desktop page design, then recreate the work on Figma. Now, Figma makes responsive design easy with its responsive resize feature. With responsive resize, you can quickly change the size and position of objects on your canvas to create different variations of your design.

For example, let's say you're designing a header for a website. With responsive resize, you can easily create a version of the header that looks good on both desktop and mobile devices. Simply select the objects you want to resize and enter the new width and height values. Figma will automatically adjust the position of other elements on your canvas so that everything still looks great.

And if you need even more control over how your designs look on different devices, Figma also offers a Device Preview feature. With Device Preview, you can see how your designs look on various screen sizes and orientations.

5. Collaboration Features

Figma is a cloud-based design tool, which means that it's easy to share files and collaborate with other designers. Simply click the "Share" button in the top-right corner of your screen to get started.

With Figma, you can add people to your team and give them different levels of access (e.g., view only, comment only, edit). You can also use the built-in commenting system to give and receive feedback on prototypes (and other design files). All comments are threaded, so they are easy to follow.

Simply click on an object to leave a comment, and even @mention specific team members in comments to get their attention.

6. Sharing and Handoff Features

Figma makes it easy to share your designs with others. Simply click the "Share" button in the top-right corner of your screen and enter the email addresses of the people you want to share with, whether they already have their own Figma login, or are simply guest users.

When it's time to hand off your designs as code to a developer, there are a couple of different options:

1. You can use the export option to export your designs as HTML, CSS, or JSON files.
2. Use the Inspect tab to view the code of any element—or group of elements—in the design file.

Figma Plugins & Community

Figma has a robust plugin ecosystem that allows you to extend the functionality of the design tool and automate repetitive tasks. For example, there are plugins that help you generate color palettes, convert images to vectors, or even add real-time voice chat to your design files.

If you still have questions that your own team (or tutorials) haven't answered, the Figma community is a great place to find resources, ask questions, and connect with other designers online.

How to Get Started with Figma

While Figma's active online community gives you access to a wealth of free video and written tutorials, it can be helpful to start with a more structured Figma training course that will walk you through the fundamentals, and show how they can be used in real-life UX/UI design projects.

→ Check out our roundup of the best Figma courses available online.

In addition to standalone online Figma classes, you can also find some great resources on eputed online learning websites like Udemy or Skillshare.

Looking for a foundational introduction to Figma?

Sign up for Figma 101, a free online training course that covers the key functionalities of Figma. In just 30 minutes a day, you’ll learn to:

• Use all of Figma’s core features, including interface basics, keyboard shortcuts, and shape tools.
• Cover advanced tips and tricks, like understanding vector networks, Boolean commands, and libraries.
• Design your own mobile app, and make prototypes to present and share.

Sign up for Figma 101 to start mastering this software tool for your website and mobile app design process.

Already have some Figma knowledge but want to take your skills to the next level? Check out our Advanced Figma course, where you'll learn the strategies and workflows of the most skilled and experienced product designers in a supportive and mentor-led environment.