Get a tour of Figma, with a focus on foundational features for designing and prototyping.

Prototyping with Figma

The last stop on our tour is the grand finale: Prototype mode. Your wireframes look polished, but they are static &mdash; it’s time to bring them to life!   

So far in this lesson, we have been exploring and working in Design mode, which provides the tools to create a design. Now, we’ll switch over to Prototype mode, to access the tools to turn the design into a prototype. We can switch between Design and Prototype at the top of the properties panel.

![Screenshot of the top of the properties panel. Prototype is bolded, indicating that the editor is in Prototype mode.](https://static-assets.codecademy.com/Courses/intro-to-ui-and-ux/prototyping-with-figma/right-sidebar/prototype-mode.png)

To transform a design into a prototype, we need to add connections between frames.
A __connection__ has three elements: a hotspot, a connection, and a destination.

To create a __hotspot__ (starting point), select a frame or a specific layer. When deciding where to place the hotspot, consider how someone might interact with the product. In the example design, someone would tap the “Sign Up” button to reach the next page, so this is a good place to add a hotspot.

With the hotspot selected, we can select the __connection node__ (the plus sign on the right of the hotspot) and drag a connection to the destination frame.

![Screenshot from the example design. The "Sign Up" button is selected, and a connection node, which looks like a plus sign, appears on the right of the button.](https://static-assets.codecademy.com/Courses/intro-to-ui-and-ux/prototyping-with-figma/connection-node-revised.png) 

Once a connection has been created, we can select the connection (the blue arrow) to open a menu with the __Interaction Details__. 

![A screenshot of the example design. A connection arrow has been created from the "Sign Up" button to the next frame.](https://static-assets.codecademy.com/Courses/intro-to-ui-and-ux/prototyping-with-figma/prototype-mode/connection-arrow-revised.png)

From here, adjustments can be made to tailor the interaction’s trigger, animation style, and speed. 

![The interaction details menu, which displays the trigger, starting point, destination, and animation style and timing.](https://static-assets.codecademy.com/Courses/intro-to-ui-and-ux/prototyping-with-figma/prototype-mode/interaction-details-revised.png) 

After dragging out a connection or two, we should review the prototype to check if it’s working as intended. Select Present (the Play button), which is on the right side of the toolbar. Another tab will open where we can view and interact with the prototype. 

After seeing our prototype in action, we may want to add, remove, or customize some connections. As we update the prototype in the editor, we can keep the Presentation tab open. The changes we make are automatically reflected in the Presentation tab, so we can easily move between adjusting the connections and testing them. 

Prototype Mode

In this lesson, you will take a guided tour of Figma. Beware that this is not the type of tour where you will simply sit back and enjoy the ride! At each stop along our route, you’ll put your new Figma knowledge into action. You’ll leave this tour with a souvenir that you design yourself: a two-page prototype for a fictional Codecademy mobile app.

With our destination in mind, let’s start from the beginning. [__Figma__](https://www.figma.com/) is a browser-based design software that is used for graphic design, UX, UI, and much more. We can compare it to programs like [Adobe XD](https://www.adobe.com/products/xd.html), [Sketch](https://www.sketch.com/home/), and [InVision](https://www.invisionapp.com/). While Figma is used for a wide variety of projects, a few UX and UI artifacts that we can design in Figma include: wireframes, prototypes, personas, user journey flows, and sitemaps.

It’s also helpful to know that Figma supports collaboration. Because Figma is browser-based, team members can seamlessly collaborate on the same file in real-time. These collaboration capabilities can be useful in the production process, as many stakeholders may be involved.

Before this tour leaves the station, note that Figma has a multitude of tools and complex functions, so it can feel overwhelming at the start. We will build a foundation together, and you can deepen your skills through continued practice. Take it step by step, and have some fun along the way!

Intro to Figma

Your design file won’t be empty much longer! At this stop on our tour, you’ll discover how to use tools from the toolbar to create low-fidelity wireframes.

While there’s no one right way to design in Figma, it’s common to start by adding a frame. A __frame__ typically represents a page of a product. Using the __toolbar__, located at the top of the editor, we can add frames and other objects to the canvas.

The __canvas__ is the gray area in the middle of the editor, and it’s essentially limitless, so we don’t need to worry about running out of space. Once objects are added to the canvas, we can move them by dragging them or nudging them with the arrow keys. Note that objects on the canvas are referred to as __layers__, which we’ll talk about more in a later exercise.

Before we learn how to add frames to the canvas, note that there are many tools to cover in this section. You don’t need to memorize these descriptions, and as you continue interacting with the tools, they will become second nature.

One strategy for increasing efficiency is to use keyboard shortcuts. The shortcuts are included in the exercise and they are displayed in Figma when you hover over the icons.  For a full list of shortcuts, press <kbd>command</kbd> / <kbd>control</kbd> + <kbd>shift</kbd> + <kbd>?</kbd> or select the little Question Mark (?) in the bottom right corner of the Figma editor and select "Keyboard Shortcuts."

Let’s start with the left side of the toolbar:
<img src="https://static-assets.codecademy.com/Courses/intro-to-ui-and-ux/prototyping-with-figma/toolbar/edit-group.svg" alt="A screenshot of the tools on the left side of the toolbar: main menu, move tool, frame tool, shapes tool, pen tool, text tool, hand tool, and comment tool.">

| Tool | Description |
| --- | --- |
| <img style="margin: 0; padding: 5px; width:auto;" src="https://static-assets.codecademy.com/Courses/intro-to-ui-and-ux/prototyping-with-figma/toolbar/menu.png"> | The __main menu__, which has the Figma “F” icon, includes a dropdown menu with options for managing the design file. |
| <img style="margin: 0; padding: 5px; width:60px;" src="https://static-assets.codecademy.com/Courses/intro-to-ui-and-ux/prototyping-with-figma/toolbar/move.svg"> | The __move tool__ <kbd>V</kbd>, which has an icon that looks like a cursor, allows us to select and move objects around on the canvas. |
| <img style="margin: 0; padding: 5px; width:auto; height: 60px;" src="https://static-assets.codecademy.com/Courses/intro-to-ui-and-ux/prototyping-with-figma/toolbar/frame.svg"> | The __frame tool__ <kbd>F</kbd> allows us to add a frame to the canvas. We can choose from preset frames listed in the right sidebar, or we can create a custom frame by selecting the frame tool and dragging a frame to the desired dimensions. |
| <img style="margin: 0; padding: 5px; width: 60px;" src="https://static-assets.codecademy.com/Courses/intro-to-ui-and-ux/prototyping-with-figma/toolbar/rectangle.svg"> | The __shapes tool__ allows us to add standard shapes to the canvas, such as rectangles, ellipses, and polygons. Images can also be added from the shapes tool. |
| <img style="margin: 0; padding: 5px; width:auto; height: 60px;" src="https://static-assets.codecademy.com/Courses/intro-to-ui-and-ux/prototyping-with-figma/toolbar/pen.svg"> | The __pen tool__ <kbd>P</kbd> allows us to draw out custom shapes. |
| <img style="margin: 0; padding: 5px; width:auto; height: 60px;" src="https://static-assets.codecademy.com/Courses/intro-to-ui-and-ux/prototyping-with-figma/toolbar/text-tool.svg"> | The __text tool__ <kbd>T</kbd> allows us to add text. Select the text tool, then select an area on the canvas and begin typing. |
| <img style="margin: 0; padding: 5px; width:auto; height: 60px;" src="https://static-assets.codecademy.com/Courses/intro-to-ui-and-ux/prototyping-with-figma/toolbar/hand.svg"> | The __hand tool__ <kbd>H</kbd> allows us to navigate around the canvas without selecting or moving any objects. |
| <img style="margin: 0; padding: 5px; width:auto; height: 60px;" src="https://static-assets.codecademy.com/Courses/intro-to-ui-and-ux/prototyping-with-figma/toolbar/comment.svg"> | The __comments tool__ <kbd>C</kbd> allows us to add a comment. Select a frame, object, or area on the canvas. Then, type the comment. Once the comment is added, anyone who opens the file will be able to see it. |

In the middle of the toolbar, the file name, and where it’s stored, are visible. This is a reminder to make sure you have given your design file a descriptive name. 

![A screenshot of the middle of the | <img style="margin: 0; padding: 5px; width:auto; height: 60px;" src="https://static-assets.codecademy.com/Courses/intro-to-ui-and-ux/prototyping-with-figma/toolbar/hand.svg"> | The __hand tool__ <kbd>H</kbd> allows us to navigate around the canvas without selecting or moving any objects. |toolbar, which includes where the file is stored and what it is named. ](https://static-assets.codecademy.com/Courses/intro-to-ui-and-ux/prototyping-with-figma/toolbar/file-title.svg)

Here’s an overview of the right side of the toolbar. 

![A screenshot of the right side of the toolbar, which includes: profile avatar, share button, present button, and Zoom/view options.](https://static-assets.codecademy.com/Courses/intro-to-ui-and-ux/prototyping-with-figma/toolbar/presentation-options.svg)


| Tool | Description | 
| --- | --- |
| <img style="margin: 0; padding: 5px; width:auto; height: 60px;" src="https://static-assets.codecademy.com/Courses/intro-to-ui-and-ux/prototyping-with-figma/toolbar/avatar.svg"> | __Profile Avatars__ will appear on the right side of the toolbar to indicate who has the design file open, including you! Hover over the avatar to see the name of the person viewing the file. |
| <img style="margin: 0; padding: 5px; width:auto; height: 60px;" src="https://static-assets.codecademy.com/Courses/intro-to-ui-and-ux/prototyping-with-figma/toolbar/share-button.svg"> | The __Share button__ provides options for sharing the design file, such as inviting specific people to view the file, or getting a shareable link. |
| <img style="margin: 0; padding: 5px; width:auto; height: 60px;" src="https://static-assets.codecademy.com/Courses/intro-to-ui-and-ux/prototyping-with-figma/toolbar/play.svg"> | The __Present button__, <kbd>command</kbd> / <kbd>control</kbd> + <kbd>P</kbd> which looks like a play button, allows us to preview the design. If the design has been turned into a prototype, we will be able to interact with it in the presentation mode. |
| <img style="margin: 0; padding: 5px; width:auto; height: 60px;" src="https://static-assets.codecademy.com/Courses/intro-to-ui-and-ux/prototyping-with-figma/toolbar/viewport.svg"> | The __Zoom/View options__ allow you to zoom in <kbd>command</kbd> / <kbd>control</kbd> + <kbd>+</kbd> and zoom out <kbd>command</kbd> / <kbd>control</kbd> + <kbd>-</kbd>. In addition to using the keyboard shortcuts, we can select from preset zoom options or type in a specific value. |


Toolbar

You’re only halfway through the Figma tour, and you’ve already designed low-fidelity wireframes. Groovy! Before making our designs higher fidelity, we need to make an important stop: the layers panel.

The __layers panel__ is located on the left side of the editor. It shows a dynamic list of everything that is currently on the canvas. This list is divided into frames and layers. If a layer is on the canvas, but not in a frame, it will be listed on its own. If a layer is inside a frame, it will be listed beneath that frame. 

We can press the arrow next to the frames icon to hide and reveal the list of layers that the frame contains. Within a frame, the layers are listed from front to back. For example, if text is on top of a shape, the text layer will be listed before the shape layer because it’s closer to the front.

![A screenshot of the layers panel in the Figma editor, which shows a frame and layers listed beneath the frame.](https://static-assets.codecademy.com/Courses/intro-to-ui-and-ux/prototyping-with-figma/layers.png) 

But why does this matter? Most notably, the layers panel helps us stay organized. A design file can include dozens of frames and hundreds of layers. The layers panel allows us to see what’s on the canvas at a glance.

To gain the most value from the layers panel, we want to build the habit of naming everything. By giving each frame and layer a descriptive name, we can stay organized as the design grows.

The layers panel also provides another way to select and manipulate layers. Imagine that you can’t find an image you placed in a frame. If you can’t locate the image on the canvas, you can access it from the layers panel. 

If we select a layer from the layers panel, we have several options for manipulating that layer:

* __Rename__: Layers can be given more descriptive names by double-clicking on them in the layers panel.

* __Reorder__: A layer can be dragged to a new spot on the list, which changes the layer’s position (from front to back) within its frame.

* __Lock__ and __Unlock__: Layers can be locked and unlocked by pressing the lock icon. If the layer is locked, it cannot be selected or moved on the canvas.

* __Hide__ and __Unhide__: Layers can be hidden and revealed by pressing the eye icon. If the layer is hidden, it will not be visible on the canvas, but it will be visible in the layers panel.

* __Menu__: Right-clicking on a layer will open a menu with several options for manipulating the layer.

Layers Panel

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](https://help.figma.com/hc/en-us/articles/360038662654-Guide-to-Components-in-Figma) and [Animations](https://help.figma.com/hc/en-us/articles/360039818874-Create-advanced-animations-with-smart-animate). 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.

A board for hanging tools that contains both physical tools, such as a hammer, and figma tools, such as the frame tool, pen tool, etc.

Let's Review

Now that you have your free Figma account set up, our tour is officially up and running! 

Opening Figma brings us to the __dashboard__. This is where we create new files and access files we have already created. If we’re collaborating with a team, we’ll also be able to access any files that have been shared with us.

Another feature we can access from the dashboard is the [__Community__](https://help.figma.com/hc/en-us/articles/360038510693-Guide-to-Figma-Community), a hub of free resources created by Figma users. 

To get started with designing, we’ll select the “New design file” button, which opens the Figma editor.

![Screenshot of the “New design file” button on the Figma dashboard.](https://static-assets.codecademy.com/Courses/intro-to-ui-and-ux/prototyping-with-figma/new-design-file-revised.png)

The __Figma editor__ is divided into four areas: the toolbar at the top, the layers panel on the left, the properties panel on the right, and the canvas in the middle.

On the top right of the editor, note the Design and Prototype tabs. We will start our project in __Design mode__, which provides the tools needed to create designs. As promised, you will be creating a prototype in this lesson, so we’ll get into Prototype mode later in the tour. For now, make sure you are in Design mode.

![A screenshot of the Design and Prototype tabs, which are located in the top right of the Figma editor. The Design tab is bolded, indicating that the editor is in Design mode.](https://static-assets.codecademy.com/Courses/intro-to-ui-and-ux/prototyping-with-figma/design-mode.png)

While exploring Figma, we will build habits that keep us organized. To achieve this on our tour, we will consistently emphasize the importance of naming everything. Our first opportunity to name something happens right away! 

We’ll give this design file a descriptive name, so we can easily find it later. Note that this file name can be updated at any time. 

Getting Started in Figma

In your design file, you have a few low-fidelity wireframes and an organized layers panel. While this is great progress, the design looks a little…plain. Fortunately, our next stop is the properties panel, which will help you customize the design and increase its fidelity.

If we select a layer on the canvas, the layer’s properties (such as size, color, and position) will be displayed in the __properties panel__ on the right side of the editor. The number of properties for a single layer can be quite extensive &mdash; in some cases, we need to scroll within the properties panel to access everything. In this exercise, we’ll focus on a handful of properties that you can use to stylize your wireframes.

Let’s start with general properties that apply to most types of layers. 

__Alignment tools__ allow us to precisely align a layer within a frame. These tools are located at the top of the properties panel, and the icon for each tool shows two lines aligned to a specific position. 

![A screenshot of the alignment tools in the properties panel. There are six alignment tools: align left, align center (horizontally), align right, align top, align center (vertically), and align bottom.](https://static-assets.codecademy.com/Courses/intro-to-ui-and-ux/prototyping-with-figma/right-sidebar/alignment-tools.svg)

__X__ and __Y coordinates__ represent a layer’s position within a frame in pixels. The X and Y coordinates for a frame represent its position on the canvas. These coordinates will update if we drag the layer to a new position, or if we enter new values for the coordinates. 

The __width__ (W) and __height__ (H) of a layer are displayed near the top of the properties panel. If we drag a layer to resize it, its width and height will be updated. We can also type in width and height values to change the layer's size.

![A screenshot of the X and Y coordinates and width and height values in the properties panel. The X and Y variables have values listed next to them, which represent where the layer is within the frame. The W and H values represent the layer’s width and height.](https://static-assets.codecademy.com/Courses/intro-to-ui-and-ux/prototyping-with-figma/right-sidebar/size-coordinates-properties.svg) 

__Fill__ displays what color(s) or image(s) are in the layer. A layer can have one fill, multiple fills, or no fill at all. 

![ A screenshot of the Fill property in the properties panel.](https://static-assets.codecademy.com/Courses/intro-to-ui-and-ux/prototyping-with-figma/right-sidebar/fill.svg)

Selecting the Fill icon opens the __color picker__. At the top left of the color picker, there is a dropdown menu that provides options for applying a solid color, gradient (Linear, Radial, Angular, Diamond), or image. 

![A screenshot of the color picker, which includes the dropdown menu in the top left corner of the color picker.](https://static-assets.codecademy.com/Courses/intro-to-ui-and-ux/prototyping-with-figma/right-sidebar/color-picker.svg)

__Stroke__ allows us to add a border. After adding a border, we can customize its color, weight, and style.

![A screenshot of the Stroke property in the properties panel. Beneath the text that says Stroke, the color, weight, and style of the stroke are displayed.](https://static-assets.codecademy.com/Courses/intro-to-ui-and-ux/prototyping-with-figma/stroke-revised.png)

Now, let’s take a look at some properties that are specific to text layers. 

__Text__ properties allow us to view and update the typeface, size, weight, and much more for a text layer.

![A screenshot of the Text properties. In this section, the text’s typeface, size, weight, alignment, and more are displayed.](https://static-assets.codecademy.com/Courses/intro-to-ui-and-ux/prototyping-with-figma/right-sidebar/text-properties.svg) 

Finally, we’ll investigate the corner radius property, which only applies to layers that are made up of lines.

__Corner Radius__ allows us to round the corners of a layer. If the corner radius is zero, there is no rounding on the corners. We can type in a value to round the corners. 

![A screenshot of the corner radius property in the properties panel. The corner radius is located below the width and height values, and the icon looks like a curved corner.](https://static-assets.codecademy.com/Courses/intro-to-ui-and-ux/prototyping-with-figma/corner-radius-highlighted-revised.png)