The world of graphic design software is huge and the competition is fierce. Figma is a design tool leading UX/UI designers around the world. But what do you know about this intuitive tool?
Although it’s simple, there’s also a learning curve if you’re used to other design tools. Let’s learn about Figma and how to use it. Welcome to Figma 101.
What is Figma?
If you’ve worked as a graphic designer or web designer in the past few years, you’ve probably heard of Figma. You may have even used it.
Figma is a design tool and it has gradually become a favorite of digital designers, reaching options like Adobe XD, Adobe Photoshop, and Sketch, for web design and more. However, since Adobe acquired Figma in 2022, there may be some changes that will disturb the ranking.
Figma has many uses. It is mainly used for digital design, and you cannot design in CMYK for printing. Here are some of the main uses of Figma:
- UX/UI design
- Application design
- web design
- Presentation design
You can use Figma mockup plugins to showcase your designs, convert real web pages to Figma designs using plugins, and even create master templates for Figma designs to save time for repetitive design types.
How much does Figma cost?
You can create a Figma account for free on the Figma site or by downloading the Figma app. A free account provides functionality for all aspects of app design. You can design with Figma and FigJam – Figma’s collaboration tool.
If you use Figma as a hobbyist or as a freelancer, the Free Forever version is almost perfect. You still have access to all plugins, can invite unlimited collaborators, use unlimited personal files, and use Figma on all platforms.
While the free version of Figma offers more than enough for any average designer, a subscription to Figma Professional allows you to invite teammates, work from team libraries , get access to unlimited Figma files and version history, and more, for $12 per month per publisher. If you are a student or an educator, you can get Figma Professional for free.
Whether you use the Figma app or the browser version, you can easily follow the course.
When you open Figma, you have the option to launch a new Figma file, a new FigJam file, or import a file created in another program, such as Sketch or Adobe XD. If you’ve used Figma before, you’ll also see your past Figma projects that you can open and work on.
Opening a new file at first seems incredible. Unlike many other design programs, you don’t start with your board or canvas, but with a completely blank design page. But with a spirit full of inspiration, it won’t remain an empty space for long.
The horizontal menu at the top left starts with the option Main Menu Figma logo. Icon selection Main Menu, you can navigate to your other files, Figma quick actions, common file options, and access to plugins, widgets, and libraries.
Then you will see the Transfer furniture (v), with the Scale furniture (K) hidden under it. These tools allow you to move elements or scale parts of your drawing. And to the right of these tools, you will see the Region tools, Outline (F), Sectionand slicenested one inside the other.
In Figma, a frame is what other programs call an artboard or canvas. Choose Outline to draw your custom canvas size. When selected, the menu on the right shows pre-made frame options for common device sizes: smartphones, tablets, desktops, smartwatches, presentations, and social media options. You can also click and drag your frame directly to give it a custom size.
Returning to the top left menu, to the right of the regional tools are the following tools Shape tools, Pen tools, and Text furniture. Followed, then, by Resources-Parts, pluginsand widgets-and the Hand to transfer to your file. And finally, the tool Comments which is great for taking notes and collaborating with teammates.
When a frame is drawn, selecting its title will activate the frame, ready to be drawn. The menu on the right shows titles for Design, Prototypeand Investigate. As the name suggests, the Design option is the menu you’ll use to design your frame elements.
Although the initial design menu is fairly simple, the menu options change as you add elements to your design. Initially the menu goes from top to bottom with alignment tools, magnification tools, Auto layout, Layout Grid, Layers, To fill, Stroke, Effectand Export. Some of them are collapsed by default, but clicking the icon + you can open any menu or press – to reduce it.
Once you’ve drawn the basic frame of the project, you can use the Shape or Pen tools to draw shapes or add image placeholders, and you can add text using the Text tool as you see fit . Probably already done in other software.
Once you have shapes or text in the frame, use the various options in the right menu to edit and design those elements. The website Layers offers opacity and blending modes; together Filling you can add color or insert images with some editing functions like Exposure, Contrast, Temperatureetc.
As you assemble elements into your project, layers build up on the left side of the screen. Layers next to the menu Assets Tab. You can double-click a layer title to find the item, and vice versa; you can double-click a design element to find the highlighted layer. By double-clicking on titles, you can rename them for optimal organization.
To the right of the menu Design The menu option is the Prototype menu. Once you’ve finalized the visual aspects of your design and placed the image and text boxes where they need to go, you can use the prototype tools to add animations and transitions to your designs.
The website Prototype lets you link frames or parts together as transitions. You can choose the order and mode of transition from each frame to another.
This works great if you’re creating a Figma presentation that animates from slide to slide, but the tool also lets you view animations for buttons or menus for app and web design. . You can add multiple transitions per page for all kinds of things, to see how users will act on your website when it goes live.
While using Figma to design a website is not the same as creating a live website, you can hand your Figma design over to your development team who can recreate your prototype interactions as real animations for your website. This means you can switch between pages based on clicks, time, or other interactions.
Getting started with Figma is easy
You now know how to navigate the Figma layout and how the basic design and prototyping tools work. Since Figma is so accessible, it’s time to think about this design tool and see what you can do.