Codecademy Logo

Prototyping with Figma

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.

Screenshot of the Figma editor with the toolbar highlighted.

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.

Screenshot of the Figma editor with the canvas highlighted.

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.

Screenshot of the Figma editor with the frames tool highlighted. Options for preset frames, such as phone and desktop, are shown on the right sidebar. A preset iPhone frame has been added to the canvas.

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.

Screenshot of the Figma editor with the layers panel (located on the left sidebar) highlighted.

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.

Screenshot of the Figma editor, with the properties panel (located on the right sidebar) highlighted.

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.

Screenshot of the Figma editor in Prototype mode. "Prototype" and "Design", which are located at the top of the properties panel, are highlighted.

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.

Screenshot of the Figma editor.