Prototyping with Figma
Figma Editor
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.
Figma
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.
Toolbar
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.
Canvas
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.
Layer
In Figma, any object that is added to the canvas is considered a layer. Frames, shapes, text, and images are all considered layers.
Frame
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.
Layers Panel
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.
Properties Panel
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.
