Learn

While we’ve reached the end of our Figma tour, we hope you feel inspired to continue learning and practicing. We investigated some foundational Figma features together, and there’s much more to discover!

To fuel your creativity and further develop the prototype you designed in this lesson, check out these resources from Figma about Components and Animations. No matter what corner of Figma you decide to explore after this lesson, remember to take it step by step.

Before you go, let’s reminisce on a few highlights from our tour:

  • Figma is a browser-based design software that is used in many contexts, such as UX, UI, 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.

  • In Figma, the editor is the workspace where projects are created, edited, shared, and reviewed. The editor consists of four main components: toolbar, properties panel, layers panel, and the canvas.

  • The toolbar is located at the top of the Figma editor. In the toolbar, there are tools for adding objects on the canvas and moving them around. There are also tools for collaboration and review.

  • The canvas is the gray area in the middle of the Figma editor. As objects are added to the design file, they appear on the canvas as layers. These layers can be moved around by dragging them or nudging them with the arrow keys. Because the canvas is expansive and nearly limitless, there’s no need to worry about running out of space.

  • 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 container for other layers that usually represents a page of a product. For example, text, shapes, and images may be placed inside of frames. Figma offers many preset frames, such as frames that are the dimensions of a smartphone, tablet, or laptop screen. Custom frames can also be created.

  • 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 in the right sidebar of the Figma editor, it provides options for adjusting the properties of layers that have been added to the canvas.

  • Figma has two modes: Design and Prototype. Design mode has tools for creating designs. Prototype mode has features for turning designs into interactive prototypes. The mode can be toggled at the top of the properties panel.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?