10 Figma Features to Know in 2022

Documentation
March 27, 2022
3 min
Figma features grouped on a purple background
Key points

Figma is a collaborative design tool that enables you to create web mockups with a single click. This design software allows for seamless collaboration among various stakeholders thanks to its intuitive interface.

Figma sets itself apart from some of its competitors, such as Sketch and Adobe XD, with its simple and intuitive features. You can create graphic elements, mockups, illustrations, and web and mobile prototypes in just a few clicks. It combines aesthetic elegance with technical performance to be the best tool in this category.

Among all of Figma's features, here are 10 that you need to know in 2022. Start designing in Figma 👇

Pages

When you start a new project in Figma, you arrive on a page. This is where everything happens; this is where you'll begin designing your web mockup. You can insert all the necessary graphic elements for your project, including texts, images, shapes, illustrations, calls to action, frames, and more.

One challenge you may face as a web designer is organizing this page. For the same project, you may sometimes need to create a graphic brief, test various ideas, add different types of elements, integrate a style guide, create a UX mockup, then a UI mockup, and develop a design system, among other tasks. All these elements can be challenging to structure on a single page. Additionally, this would slow down the loading time of your page, making it difficult to work on. To solve this issue, Figma allows you to create multiple pages within the application. You can thus create a separate page for each of your graphic needs within the same project.

For example:

  • Page 1: Graphic Audit
  • Page 2: Style Guide
  • Page 3: UX Prototyping
  • Page 4: UI Mockup
  • Page 5: Design System
Figma designer interface with focus on pages

Frames

The Frame feature in Figma is widely used by web designers. Comparable to artboards in other web design tools like Adobe XD, frames allow you to specify a dedicated area for creating your design. Figma offers predefined frames for various devices to help you create mockups for websites or mobile applications:

  • Tablet
  • Computer
  • Smartwatch
  • Paper
  • Social Media
  • etc.

This way, you can create web mockups while adhering to the dimensions: width and height of the selected screen.

Frame Keyboard Shortcut: F
Figma designer interface with focus on frames

Components

Components or Figma components are reusable elements that you can utilize throughout your project design. They help ensure that the entire project maintains a consistent and uniform style guide. Components are generally used for elements that frequently appear in your web mockup, such as:

  • Buttons,
  • Call to action sections
  • Navigation bar / Navbar
  • Footer
  • Icons
  • etc.

There are two types of components in Figma:

  1. The main component: this defines the main properties of your component in terms of design, color, dimensions, etc. This will be the primary model.
  2. An Instance: this is a copy of your main component. Any modifications made to the main component will apply to all Instances.

This allows you to design each of these elements just once, through a main component, and then duplicate it as many times as you want in the mockup using the Instances.

Component Keyboard Shortcut: Ctrl / Cmd + Alt + K
Preview of a component with 'contact us' button in Figma

Styles

Just like components, styles in Figma will help you enhance productivity and consistency in your projects. The style functionality in Figma is used to define the color or appearance of objects in a project or layout, or to set the structure and arrangement of objects within a project. Therefore, you can use styles to:

  • Standardize your colors
  • Standardize your texts
  • Standardize your effects
  • Standardize your layout grids
Figma interface with a mask and a selection of colors

Figma Library

Figma features a Library functionality where you can access all the components and styles you've created in your project. It's also possible to retrieve components and styles you've created in other projects by sharing them.

Effortlessly create web mockups by reusing elements from your previous projects using the Figma library. Using components from your library to your Figma project can be done by a simple drag and drop.

Figma designer interface with focus on the library

Comments

Figma is a true collaborative tool for web design projects. Its commenting feature allows you to work with others on the same project and iterate on your web mockups by adding comments anywhere on the page.

  • Add text comments
  • Add images
  • Add links
  • Tag individuals
  • Select areas for your comments
Comment Keyboard Shortcut: C
Figma designer interface with focus on comments

Presentation Mode

Once your web mockup is completed, you may find it challenging to visualize it from the Figma design interface. To get a better overview of your Figma mockup, you can use presentation mode. By activating presentation mode, Figma will display all content in your frames one by one. You can thus navigate through each frame, meaning each page of your web mockup, on the device you select: computer, phone, tablet.

Presentation mode will also allow you to interact with your mockup, showcasing the various animations you've created using the prototyping functionality. You can navigate through your mockup, activate buttons, and more. Figma's presentation mode is a highly representative simulation of your future website or web application.

Figma presentation mode with MacBook Pro screen

Figma Plugins

Figma has very powerful native functionalities, which you can extend by adding plugins. These are applications, web platforms, or other no-code tools whose features you can utilize within Figma. For example, you can add royalty-free images in Figma via the Unsplash plugin, download SVG format icons using the Iconify plugin, or preview fonts in Figma using the Better Font Picker plugin. There are hundreds of plugins that cater to diverse and varied design needs.

Browse Figma Plugins
Figma plugin download platform

Figma Community

The Figma community is a no-code community that includes designers, graphic artists, developers, teachers, students, and design enthusiasts who share ideas, web projects, and other designs created in Figma. A wealth of knowledge and ideas available for free to everyone. You can find all sorts of projects there: web mockups, wireframes, UX templates, UI mockups, icons, illustrations, and more. You can reuse these models for free to help and inspire your own Figma projects. You can also share content with the community.

How to join the Figma community?
How to share designs with the Figma community?
Figma community platform

Project Sharing

One of Figma's strengths is its collaborative aspect. Alongside its powerful commenting feature, it provides the ability to share your web projects:

  • Invite others to collaborate on your project
  • Share a viewing link for the project

This way, you can work together in real-time on the same web mockup to evolve it further.

Figma project sharing interface
Thomas Labonne
Thomas Labonne
Co-founder

Suggested articles

Webflow Localization, Credial's Use Case
Documentation
Webflow

Webflow Localization: Practical Guide & Credial's Use Case

Webflow Localization: Practical Guide & Credial's Use Case
Visuel showcasing digidop.fr switching to digidop.com
News
Digidop

Digidop.fr is now Digidop.com

Digidop.fr is now Digidop.com
Photo of the Digidop team with the Digidop Logo 2024
News
Digidop

A Look Back at an Exceptional 2024 and Vision 2025

A Look Back at an Exceptional 2024 and Vision 2025

Want to turn your website into your most valuable asset?

Contact us today