The world of graphic design software is vast with intense competition. Figma is a design tool that is increasingly popular among UX/UI designers globally. But how familiar are you with this user-friendly tool?
While it may appear straightforward, there’s a learning curve if you’re accustomed to other design software. Let’s explore Figma and its functionalities. Welcome to Figma 101.
What Is Figma?
If you’ve been a graphic or web designer in recent years, you’ve probably heard of Figma. Perhaps you’ve even used it.
Figma is a design tool that has become a favorite among digital designers, rivaling options like Adobe XD, Adobe Photoshop, and Sketch for web design and more. However, since Adobe’s acquisition of Figma in 2022, the leaderboard may see some changes.
Figma serves various purposes primarily in digital design and doesn’t support CMYK for print. Key uses for Figma include:
- Prototyping
- UX/UI design
- App design
- Web design
- Presentation design
You can utilize Figma mockup plugins to showcase your designs, convert real webpages to Figma designs via plugins, and even create master templates for efficiency in repetitive design types.
How Much Does Figma Cost?
You can create a Figma account for free on the Figma site or by downloading the app. The free account offers functional features for all design aspects, including Figma’s collaboration tool, FigJam.
For hobbyists or solo freelancers, the Free Forever version is highly suitable. It includes access to all plugins, the ability to invite unlimited collaborators, use unlimited personal files, and access Figma across platforms.
Although the free version suffices for most designers, a Figma Professional subscription offers additional capabilities like inviting teammates, working from team libraries, accessing unlimited Figma files and version histories, and more for $12 per month per editor. Students and educators can access Figma Professional at no charge.
How to Use Figma: The Basics
Whether you choose the Figma app or the browser version, it is straightforward to get started.
Upon opening Figma, you can either start a new Figma file, a new FigJam file, or import a file created in another program such as Sketch or Adobe XD. If you have previously used Figma, your recent projects will be displayed for quick access.
Navigating the Figma Workspace
When you open a new file, it initially appears empty. Unlike other design programs, you begin with a blank page, not an artboard or canvas. However, with inspiration, this space will soon be filled.
The top left horizontal menu starts with the Main Menu icon, represented by the Figma logo. This menu allows access to your files, quick actions, typical file operations, and access to plugins, widgets, and libraries.
Next to the Main Menu, you’ll find the Move tool (V) and the Scale tool (K). These tools help in moving elements or adjusting their size. Adjacent to these are the Region tools: Frame (F), Section, and Slice.
In Figma, a frame functions like an artboard or canvas in other programs. Select Frame to create a custom-sized canvas. The right-hand menu provides premade frame options for common devices like smartphones, tablets, desktops, smartwatches, presentations, and social media formats. Alternatively, you can click and drag to create a custom-sized frame.
Continuing to the right of the Region tools, you’ll find Shape tools, Pen tools, and the Text tool. Then, there are Resources (Components, Plugins, and Widgets), followed by the Hand tool for file navigation and the Comments tool for notes and team collaboration.
The Figma Design Menu
With a frame created, click on its title to activate it for design. The right-hand menu includes options for Design, Prototype, and Inspect. The Design menu is where you’ll create design elements within your frame.
The initial Design menu is simple, but it evolves as you add elements. It includes alignment tools, sizing tools, Auto layout, Layout grid, Layer, Fill, Stroke, Effects, and Export options. Some options are minimized by default but can be expanded by clicking the + sign or minimized by hitting –.
Once the main frame is drawn, use the Shape tools or Pen tools to create shapes or image placeholders, and add text using the Text tool in ways similar to other software.
With shapes or text on the Frame, use the right-hand menu options to edit and design these elements. The Layer menu offers opacity and blend modes; Fill lets you add colors or images with editing features like Exposure, Contrast, Temperature, and more.
As elements are added, layers build in the left-hand Layers menu next to the Assets tab. Double-click a layer title to locate the element or vice versa. You can also rename titles for better organization.
The Figma Prototype Menu
Adjacent to the Design menu, the Prototype menu lets you add animations and transitions once the visual design is complete.
This menu allows connecting frames or components as transitions, choosing the order and method of transitioning. It’s useful for creating presentations that animate from slide to slide and for visualizing app or web design animations. Multiple transitions can be added per page to see how users interact with your website when live.
Though designing a website in Figma isn’t the same as creating a live website, you can hand off your Figma design to your development team, who can translate your prototype interactions into real animations. This enables transitions from clicks, timed events, or other interactions into the actual website.
Getting Started With Figma Is Easy
Now you’ve learned how to navigate the Figma interface and the essentials of its design and prototype tools. Given Figma’s accessibility, it’s time to explore and create with this powerful design tool yourself.