Useful Tools

Mastering Figma Design Tool: Useful Tips and How-tos

6 minutes

Mastering Figma Design Tool: Useful Tips and How-tos

Everyone who has worked with Google Docs knows how convenient it is — easy to edit, collaborate, and save your files on the web. What if web designers had the same tool for their projects? Well, they actually have one and it’s Figma. In this Figma review, we’ll guide you through the most shining features of the platform that make it the designers’ tool of choice.

What is Figma

Figma is a cloud-based design tool which, unlike other popular design tools that work on exclusively on Mac OS or Windows, can also operate on Linux. Thus this platform enables the collaboration of designers who use different operating systems and need to generate SVG code, CSS, and iOS or Android code for their work.

The platform enables its users to create designs, make prototypes, and gather feedback all one platform.

Why use Figma

Before we drift into the beauties of the Figma design tool, let’s have a look at what makes this platform so attractive for designers.

  1. It’s web-based. Figma runs in your browser and you can work on your projects without having to save them as separate files to your computer — all edits are automatically saved to your cloud. But remember, you’ll need an active internet connection to save all the changes.
  2. It allows teamwork. With Figma, you can have a team of two to an unlimited number of editors, all depending on your pricing plan. You’ll always be able to see how many team members are working on a single project and what changes they’re making.
  3. It’s free for solo designers. All of the features are absolutely free to use without any trial periods.

Overall, Figma has three pricing plans. Let’s discover which functionality the platform provides for each of them.

Figma pricing plans

StarterProfessionalOrganization
Free

Use this plan to test the platform and get the feel for its basic functionality: prototyping, code attributes, commenting, unlimited storage space and unlimited viewers, Sketch import, and various file formats to import.

$12 per editor/month

Switch to the following plan if your project requires team editing and sharing. With this plan, you can enjoy an unlimited number of editors, projects, and free viewers, as well as unlimited version history and storage. You will also be able to create private projects and systems with shared UI components the whole team can use.

$45 per editor/month

Upgrade to this plan and enjoy an even wider range of functionality: unlimited number of teams, draft ownership, link access controls, or shared fonts. You’ll be able to dig deeper with the account controls ensured by activity logs reports, centralized member management, single sign-on (SSO), and remote provisioning with the organization’s identity provider.

Getting started with Figma

Upon sign-up, the user receives a welcome email with links necessary for onboarding: help center, video tutorials, forum, and useful resources.

figma welcome email
Welcome email from Figma

Besides, when users start working with the tool, they are offered a quick platform walkthrough. You can both work online, and download Figma desktop version to set your workflow offline. In fact, the interface is pretty intuitive, with the Layers Panel, which includes the elements of your project, a toolbar with tools and available options, and the Properties Panel all on the right side.

figma interface
Figma interface

Now let’s outline the most outstanding features and options of Figma and see how you can apply them.

Figma features and useful options

Prototyping

Figma allows you to make a clickable version of a website or an app by creating as many screens as you need. This way you’ll be able to test, edit, or adjust any feature ― button functionality, elements’ rollover, modal window animation ― without having to switch between the tabs. You’ll be able to create connections and hotspots for your design to simulate how it will look in a real setting.

Simply switch to Prototype in the Properties Panel and start creating paths and interactions.

figma prototyping
Creating interactions between elements using Figma Prototyping Mode

Components

These are UI elements that can be reused across your projects. This feature allows you to create symmetrical components by flipping them or repeat patterns by tiling the components. You can create components from buttons, fields, or menus. To create a Master component, click Create Component button in the Options Menu or right-click on the layer and choose Create Component option.

You can reuse Master Components by creating Instances. You can also make these components out of UI elements like colors, blocks, buttons, shapes, and landing pages as separate components.

In order to create Instance Components, choose the Master Component, hold the hotkey (Alt or D for Windows and Mac OS respectively), drag the instance from the component and copypaste it to another location if necessary.

figma components
Creating instance components

Remember, the Instances you create are linked to the Master components, meaning that all of the changes you make to the latter will apply to all the former ones. For example, by updating the shape or color of the button in the Master Component, you will update its child components across your website design.

Vector Networks

This Figma feature allows you to create complex vector shapes since you are no longer limited by only two lines coming from two points. You can use the pen tool to draw extra lines from any point of the shape you’ve created.

figma vector networks
Vector Networks in use

On top of that, Vector Networks can ease your HTML routine as you can copy the SVG code from external source and paste it as a vector layer directly into Figma. You can also copy Figma vectors as SVG codes. To do this, just right-click on the element, choose copy as SVG, and paste the code into the HTML or any web project you’re creating.

Built-in commenting, editing, and sharing

With Figma, you can create a team and select what each team member has permission to do with your projects: either view or view and edit as well. You can also watch how team members update or change the design in real time.

figma editing
Real-time team editing

Your team can leave feedback or discuss any element of the project right in the working area and pin it anywhere on the canvas, just like in Google Docs. To leave your comments, choose the speech bubble in the upper menu, click on the element you would like to comment, and write your feedback.

figma commenting
Commenting on a project created with Figma design tool

Version control

With Figma, you can track the history of each collaborator and even roll back to the previous version. The service automatically saves the versions when users close the tab with the project or if no changes have been made within 30 minutes. To get quick access to this option, select the drop-down icon on the left of the project name in the toolbar. You will see the version history on your right with an option to name, restore or duplicate a specific version.

figma version history
Version history menu

Figma design tool in action

Upon getting familiar with the platform and its functionality, we decided to try Figma design options out and create a simple page for an eBook. First, we clicked the “+” sign in the upper menu. Following that, we clicked the “Frame” icon in the toolbar to create a frame and organize our design on the canvas. Next, we filled our project with the necessary layers — text blocks, rectangles, and images — and configured all the spaces between the elements.

Here’s what we managed to create:

figma design example
An eBook page created with Figma design tool

Keep in mind that you won’t be able to make a quality print, as the platform lacks the primary palette for painting — CMYK palette — or size switch between millimeters and centimeters.

Final take

Figma feels like a tool which has been carefully thought through by designers for designers. The platform allows you to

  • work online and save your designs on a cloud without having to depend on your computer’s storage;
  • create designs on various operating systems;
  • collaborate with the team in real-time, comment, edit, and share the files;
  • enjoy useful functionality like prototyping, vector networks, creating components, and their instances to edit, test, adjust your design, and expand its possibilities.

We hope our Figma review has cleared up the platform’s inside tricks and you got inspired enough to try it out. Create your designs with Figma and marketing projects with SendPulse. See you!

Date of publication:

26 Mar. 2019

Anya Brui

Hi, fellow marketer! I'm Anya and I love good design, travels, and rock. I'm here to share my insights with...

1 Star2 Stars3 Stars4 Stars5 Stars
Loading...
Average Rating: 5/5
Total Votes: 32
Share:
Twitter