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
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
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:
- The main component: this defines the main properties of your component in terms of design, color, dimensions, etc. This will be the primary model.
- 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
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 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.
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
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 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 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?
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.