Figma is a browser-based design software that is used in many contexts, such as UX design, UI design, and graphic design. A few examples of UX and UI deliverables that can be designed in Figma include wireframes, interactive prototypes, user flows, and sitemaps.
The toolbar, located at the top of the Figma editor, provides tools for adding objects on the canvas and moving them around. There are also tools for collaboration and review.
The gray area in the middle of the Figma editor is the canvas. As objects are added to the design file, they appear on the canvas as layers.
In Figma, any object that is added to the canvas is considered a layer. Frames, shapes, text, and images are all considered layers.
In Figma, a frame is a layer that holds other layers. While custom frames can be created, many premade options are available, such as frames that are the dimensions of a smartphone, tablet, or laptop screen.
The layers panel is located on the left sidebar of the Figma editor, it displays a dynamic list of all layers as they are added to the canvas.
The properties panel is located on the right side of the Figma editor, it provides a multitude of options for adjusting and manipulating the properties of layers that have been added to the canvas.
Design v. Prototype Mode
In the Figma editor, Design mode has tools for creating designs. Prototype mode has features for turning designs into interactive prototypes.
In Figma, the editor is the workspace where projects are created, edited, shared, and reviewed. The editor consists of four main components: toolbar, layers panel, properties panel, and canvas.