Introduction to Figma

How many designers have been scarred for life by such exchanges:

• "Could you make a Halloween theme for our website?"
• "Sorry, I can't find these files anymore..."
• "Can I be a designer without a MacBook?"
• "In your dreams!"
• "Why is your markup different from the designer's work?"
• "Photoshop displays fonts differently from the browser."
• "I want my money back!"

No program had provided a solution to all these problems until Figma was released. Let's get acquainted with it! Figma is an online tool for prototyping and creating a design. In Figma, you can create layouts and prototypes of web pages that are used by developers to create a website or interfaces, and by customers to evaluate the preliminary result.

Figma

Figma is an online tool for UI/UX and graphic design with a collaboration feature. Take a look at its main page:

Here are some benefits of using this tool:

1. It's free for personal use.
2. It allows for real-time collaboration.
3. You can work with it from any computer that has a browser and an internet connection.
4. It allows you to maintain multiple versions of your project.
5. A large user community.
6. Easy graphics export to the local file.
7. Currently, it's the world's most popular graphics editor for creating interfaces, designing applications, and websites.
8. Project automation. You may write programs that will change the website appearance once the design changes.

To start with Figma, just sign up at figma.com and create something. For example, draw a star figure.

This picture shows interface of Figma project:

This tool is easy to master if you have previously used Sketch, Omnigraffle, or Adobe XD.

The power of Figma

The wireframe is a draft of the final product. Wireframes are the design of the final product with minimal detail, where there are no pictures and colors, instead they have gray color and placeholders. This allows you to gain experience interacting with the future interface and evaluate features at an early stage in order to match them with the goals of the project.

Interface is what your final product looks like. The difference between wireframe and interface is like the difference between a concept car and a production model, dreams/plans and reality.

Collaborative work

Another important and useful feature of Figma is the possible work on one project. You can share a link to your project and another person will be able to get into your project -- leave comments there or make edits.

Use cases

Let's see what else Figma can do!

• Creating software diagrams and flow charts. Isn't it good to get an in-depth understanding of how your program works?

• Customer Journey Maps. Buying a cup of coffee can be an adventure. You may stand in a line, forget your wallet, or show up at the café during non-working hours. Good business considers every possible occasion and marks it on a map, Customer Journey Map (CJM) in our case.

• Infographics. Say no to cold hard statistics data. Let's add pictures, icons, and images to make your answers even to these questions more informative and interesting:

- "How many people got tangled up in blankets in the 1960s?" - "What are the most popular sports in the Western Hemisphere?"

• Vector graphics, such as software icons, company logos, and even tattoos.

There are two main views in the Figma -- prototype and canvas view. The first one allows you to open the layout in the prototype view for presentations of interaction with the interface, the second, the main one, allows you to work with the layout and make changes. The screenshot below represents the prototype view. The canvas view you always saw at the screenshots before.

Getting started

Sign in to the tool. You will see your Dashboard:

Open a Figma Project by opening a .fig file or following the project link.

On the left panel, you can see the layers block. It includes parts of the project: text blocks, images masks, and shapes.

Here you can select an individual element on the project page and see its styles in the right column. You can also see the main dimensions of the element, text options, and color. Most of the information can be copied as CSS code:

By selecting a single element on the page, you can hover over any other element and measure the distance between them.

You can export any layer or group of layers as a raster image, such as PNG or JPG. The selected image or layer can be exported by selecting Export in the right column.

Plugins

Every designer, illustrator, programmer and other users should to be familiar with such a tool as plugins. Plugin is an additional program which expands the list of features of the program. There are plugins inside the Figma, which are in the section on the official website -- page with plugins Figma.

You can also create your own plugin and publish it in the Figma plugin center. The basic principle of plugins in Figma is simplicity and ease of use! Using plugins can really simplify your work. They can automate processes and add useful functions to work in Figma.

Conclusion

Figma provides a wide range of options for personal use and collaboration. This tool allows you to create projects of varying complexity: from a chatbot wireframe to submarine blueprints. All you need is a browser and an internet connection. The purpose of Figma is to free designers from routine menial work so they can focus on new tasks and great projects. Currently, Adobe has acquired Figma, which means that the capabilities and functions of Figma are growing every year.