Figma Masterclass 2023 | Figma Tutorial for Beginners

Introduction to Figma - Free Beginner tutorial

We're kicking off 2023 with a smashing Figma tutorial to help you go from zero to hero in just a few minutes. In this tutorial, we have tips that'll revamp your design skills and get you on the fast track to success!

How do I start learning Figma?

You're probably at a point where you're either jumpstarting your career in the UI/UX design industry or upgrading your design skills to take you to the next level. If so, you've come to the right place! This tutorial will guide you through the basics of the Figma design tool and teach you how to create impressive designs using Figma's most powerful features, tricks, and best practices.

Note that this tutorial covers only the essential tools and building blocks of Figma. If you're looking for a more advanced Figma course, check out our Ultimate Figma Masterclass course. This course has trained over 5,500 Figma designers and helped them land UX design jobs, increase their rates, and acquire more freelance clients.

In this tutorial, we'll show you how to design the Tesla.com website from scratch, using Figma's most powerful design tool features and industry best practices such as Auto Layout Figma Components, Component Properties, Global Styles, Design Systems and more.

Let's get started!

How to Recreate the Tesla.com Website in Figma?

If you scroll through Tesla's website, you'll immediately notice how the website and interface contain text, beautiful images of the Tesla models, and several buttons below. Scrolling once on the interface, the mouse automatically slides to the next section, and the title and background image change accordingly. This interface is what we will be designing.

To keep things simple, we'll be estimating some of the text sizes, shapes, and titles as our main focus will be on utilizing Figma's top-tier features and industry-proven approaches to recreate the website. At the end of the free tutorial, we will also learn the basics of how to prototype the website and recreate the animation or interaction.

NOTE: Before you start designing, download the exact Figma file we'll be using to make the website here: https://thedesignership.gumroad.com/l/uqppdq 

For us to better understand this tutorial, we'll break it down into 3 easy stages:

• Preparation stage
• Design stage
• Prototyping stage

Preparation Stage: Creating and Managing Figma Components, Global styles, and more

It's important to organize what you'll be using as you build your website to ensure consistency throughout all designs. Therefore, setting up content such as global styles and reusable Components - including logos, images, colors, and textiles - is crucial to your preparation stage.

In the file you've just downloaded, we've prepared 4 different sections or frames where you can place your logos, images, colors, and so on in one whole place - keeping your workspace organized and workflow efficient.

‍

Collecting logos and images to use

Before starting the actual design work, it is necessary to gather all the required logos and images from the Tesla website and place them into the assets frame. Here are the easy steps to collect your logos and images:

LOGO

1. Open the assets frame and navigate to the Tesla website.
2. Right-click on the logo and select "inspect."

NOTE: It is essential to use Google Chrome to access files without the debugger.

1. When the logo is selected, hit <span class="command-icon">Command</span> + <span class="only-latter">C</span> [Cmd+C] or Control + C [Ctrl+C] to copy it.
2. Return to Figma and select the assets frame.
3. Hit Command + V [Cmd+V] or Control + V [Ctrl+V] to paste the SVG.

Logo resizing

It is possible to copy and paste SVGs directly into Figma, but it is important to note that the original final size saved on the web will be pasted. Here’s how you can resize the logo:

1. Click on the link icon to constrain the proportions of the element.
2. Divide the original width or height by two.

By following these steps, the logo is resizes perfectly vertically and horizontally.

IMAGES

Let’s go back to the website to collect the images. Follow these simple steps:

1. To add the background image of the model, go back to the website and right-click on it.
2. Select "inspect."

NOTE: The image tag may not appear as web developers usually include many invisible elements on the website. If this happens, you can always search for the image tag like so:

1. Hit Command + F [Cmd+F] or Control + F [Ctrl+F]on your keyboard and type IMG.
2. Hit enter until you find the right image tag.
3. Right-click on the image tag and open it in a new tab.
4. Copy the image and paste it into Figma.
5. Holding down shift and option on a Mac, resize the image, and align it to the center.

Extracting colors for Figma Design Tools

To improve the design workflow, it is important to identify all colors used on the Tesla website and make reusable Color Styles in the form of color squares. This eliminates the need to remember the exact hex code of every color and saves time by streamlining the workflow.

Simply head to the Tesla website and follow these steps to get your colors:

1. Right-click on the element you want to grab the color of and click 'Inspect' to see the variables used for coding their styles.
2. Once on the element copy the color hex code, head back to Figma, and perform the following:
3. Select the rectangle in your color frame by holding the Command [Cmd] key or Control [Ctrl] and clicking on the preferred rectangle.
4. Change the fill to your identified hex code.

NOTE: If other elements use RGB, take note of the RGB numbers, change the fill option to RGB instead of hex, and place the numbers there.

You will need 4 colors for this project, which include:

1. Dark Gray (100% opacity) - labeled as Dark Gray
2. Gray (80% opacity) - extracted from and labeled as Button Primary
3. light gray (65% opacity) - extracted from and labeled as Button Secondary
4. white (100% opacity) - extracted from button text and labeled as White

Once you have all the colors, you can reuse the colors for other elements by copying and pasting the fill on the rectangle.

Making reusable colors

To streamline your design process, we can create reusable colors, typography, and UI elements in Figma. Let's start by creating reusable colors.

1. Click on the rectangle with the color you want to reuse.
2. On the right panel in Figma, you'll find an icon with four circles in the Fill section. Click the icon and hit the plus button.
3. Set a name for your reusable color and click 'Create Style'.
4. Repeat the same steps for all other colors.

If you want to edit the reusable color, you can easily do the following:

1. Right-click on the style you created and click 'Edit style'.
2. Under 'Properties' you can change the color fill.

NOTE: Editing your style will affect the color of every element that uses the same style.

Creating Reusable Typography Styles

Once you have created reusable colors, you can move on to creating reusable typography. Text styles used on the Tesla website are also defined to make text resizing simple. By selecting the appropriate style for headings, menu links, simple links, or paragraph text, resizing can be accomplished quickly and easily.

To keep things simple, we'll eyeball the text sizes from the Tesla website. Follow these steps to create the typography:

1. Resize the Heading font size to 48 pixels, keeping it semi-bold.
2. Resize the Menu Link, Link, and Paragraph text font size to 16 pixels, keeping it Semi-Bold with the 'Dark Gray' color style in place.
3. For the link text style, add an underline to the link by selecting it and adding underline decoration.

Making reusable typography

Similar to the colors, we can turn these typography styles into text styles, allowing us to reuse them without manually creating them every time we need them.

1. Hold down the Command [Cmd] key or Control [Ctrl] to select the heading title and change its style to 'Dark Gray' and bold.
2. Click the four circles icon in the Text section found on the right panel in Figma and hit the plus button.
3. Set a name for your reusable typography style and click 'Create style'.
4. Repeat steps 2-4 for the other text styles to make them reusable.

Now that you've created your reusable text styles, we can proceed to get the UI elements of the Tesla landing page.

Designing responsive and reusable UI elements using Figma's Auto Layout

Creating basic Components within Figma is another crucial aspect of the preparation stage. These can be reused in multiple ways throughout all designs to keep them consistent.

Finally, we can create reusable UI design elements. We need buttons, of course, so we will show you how to create responsive buttons from scratch:

1. Create a new Text Box, type in "Button," and change the Text Fill to the 'White' Color Style.
2. Select the text and wrap it inside an Auto Layout using the Shift + A keys [Shift + A].
3. Change the Button Fill to the 'Button Primary' Color Style.
4. Rename the element name to 'Button/Primary'.
5. Adjust the padding and radius.
6. Select Button Primary and hit the Command + D keys [Cmd + D] or Control + D [Ctrl +
   D] to duplicate the button and create 'Button Secondary'.
7. Press the Shift + Arrow down button [Shift + ↓] and drag down the duplicated button to keep aligned with the original button.
8. Change the duplicate button's name to 'Button Secondary' and rename the element to 'Button/Secondary'.
9. Change the Fill color of the button to 'Button Secondary' Color Style and the text color to 'Dark Gray' Color Style.

Auto Layout [Shift + A]

Auto Layout enables you to align a button to the left, right, or center, and add horizontal padding to the left and right. With Auto Layout, you can also change the color or fill of buttons you create. Auto Layout is a powerful tool that allows you to adjust buttons in any way you want, without compromising their layout.

Making reusable buttons/ui elements

Now that you've learned to create your buttons, we'll take it up a notch to help make your workflow easier. By following these steps, you won't have to manually create your buttons every single time you want to have them:

1. Select both of the buttons you created.
2. At the top panel of Figma, click the diamond-shaped icon with a drop-down called 'Components'.
3. Click 'Components set' to group the two buttons together into one Component.

Components in Figma

Placing elements into one component set will move them to the component section in Figma's Components, Plug-ins, and Widgets tab [Shift + I]. To use the figma Components that you just created, simply search for the component you labeled, in this case, 'Buttons', and add the Components to your design.

With component sets, any changes made to the elements within the set will automatically apply to every component used, saving you a lot of time and effort in designing!

A few key things to remember about Components:

1. When using Components, Figma will display an 'Instance'.
2. An Instance is what an element is called when the component is used. It is shown with a diamond-outline icon. The component set you've made appears with a diamond-shaped button made up of four solid squares.
3. The component set properties can be adjusted.
4. Selecting the component set in Figma shows a 'Properties' section on the right panel. Here, you can set the values for the type of component you are using.
5. Renaming your Components with specific keywords allows Figma to identify what the Components are.

In the preparation stage, you were quickly guided on how to inspect a live website to obtain its assets.

Then, we showed you how to use Figma's color palette to make sure all your colors match up. You also learned how to pick the right type style for your project. And, we even showed you how to whip up a button real quick. Finally, we taught you how to make a button that works great on any screen size using Auto Layout.

With all these elements ready, it's now time to start designing!

Design stage: Learn Figma Design Process with Grid System, Auto Layout, Constraints, and More

Thanks to the assets that you've prepared in the previous stage, designing the layout of the Tesla landing page has become a whole lot easier. In simple steps, you'll see just how quickly you can design a high-quality layout.

Designing the Background in Figma

1. To begin your design process, you can zoom out of your canvas and press 'F' on your keyboard (or select the Frame tool from the top menu) to access various predefined templates.
2. It's important to design within a frame, so you can select the MacBook Pro 16-inch as your starting point. Of course, you can choose any frame that suits your needs, but for this project, we'll be using the MacBook Pro 16-inch.
3. Click, drag, and place the frame you selected on your canvas.
4. Copy-paste (command + C [Cmd + C] or control + C [Ctrl + C] then command + V [Cmd+V] or control + V [Ctrl + V]) the image collected from the Tesla website.
5. Hold Shift and resize the image accordingly.
6. Rename the background image element to 'Background'.

Making Dynamic Headers, Menu Navigation, and more with Auto Layout

Logo placement

1. The header starts with the Tesla logo flushed on the upper left of the page. Simply copy-paste the logo from the assets frame and place it accordingly.
2. Rename the logo element to 'Logo'.

Menu Navigation with Auto Layout

For this project, we'll have to make headers for 'Model S', 'Model 3', 'Model X', 'Model Y', 'Solar Roof', 'Solar Panels', and links for 'Shop', 'Account', and 'Menu'.

1. Verify the content of your site navigation reference - in this case, the Tesla.com website.
2. Create your header by pressing 'T' on your keyboard (or select the Text Tool and place it on the page) and typing in the text you need on your frame.
3. Change the Text Style to 'Menu Link' to ensure that the text is adjusted to the correct style. Fill the text with the 'Dark Gray' Color Style.
4. Upon doing so, duplicate the text by pressing the command + d keys [Cmd + D] or control + d [Ctrl + D].
5. Once the text is duplicated, adjust the position of the duplicate text and rename the text accordingly.
6. Repeat steps 5 and 6 until you've made headers for 'Model S', 'Model 3', 'Model X', and 'Model Y'.
7. To layout the 'Solar Roof' and 'Solar Panels' headers, simply duplicate the other headers and rename them accordingly.
8. Auto Layout the Headers you've just created by pressing the Shift + A keys.
9. Rename the Auto Layout to 'Menu' on the left panel of Figma.

1. To create the three other headers, duplicate the 'Menu' by pressing the Command + D keys [Cmd + D] or Control + D [Ctrl + D] and holding Shift to adjust its position and alignment towards the right side of the page.
2. Delete the other three headers on the left panel under the duplicated 'Menu' Auto Layout.
3. Rename the three headers to 'Shop', 'Account', and 'Menu'.

NOTE: There would be no need to manually adjust the spacing for these texts as the headers use Auto Layout.

After accomplishing the headings, you'll notice that your frame is looking more and more alike our Tesla.com page reference. But, we could be even more accurate by applying a grid layout to our entire system.

Figma layout grid for website

1. Select the whole frame you're currently working on.
2. On the right panel in Figma, select the plus icon on the Layout grid section.
3. Adjust the grid by selecting the toggle button on the left-hand side of the 'Grid' option in the same section.
4. Make the following adjustments to the Grid's properties:
5. Change 'Grid' to 'Column'.
6. Change the column count from '5' to '12'.
7. Change the margin to '40'. This gives the page 40 pixels of margin on both sides.
8. Retain the gutter to '20'. This gives 20 pixels of space between columns.

Creating this Grid System allows you to better align your work and make more balanced designs for your site.

Dynamic Responsive Header Menu with Auto Layout and Adjusting Constraints

When the elements are in Auto Layout, they can be systematically moved with just your arrow keys. Let's further your design by making the following steps:

1. Select both your headers and logo and press Shift + A to Auto Layout the three elements.
2. Rename the new Auto Layout to 'Header'.
3. In the Auto Layout section on the right panel of Figma, change the spacing from '364' to '0'.
4. Press the three-dot icon on the Auto Layout section and change the spacing mode from 'Packed' to 'Space between to automatically create an even space between the three elements in your new Auto Layout.
5. Drag the size of the headers all the way to the ends of the page. Notice how the headers automatically have even spaces between them?
6. Change the margin to '40' in the Auto Layout section to automatically nest the headers inside the layout perfectly.
7. Change the padding to '20' In the Auto Layout section and move the headers all the way to the top. This will make the layout systematic and evenly balanced without having to manually adjust them.

To make the headers responsive to the frame, all you have to do is change their constraints to 'Left and right' on the Constraints section on the left panel of Figma.

Professional Heading Title designs in Figma

1. Verify the content of your heading title reference - in this case, the Tesla.com website.
2. To create the 'Model S' title and 'Schedule a demo' button, begin by clicking on the canvas and pressing 'T' on your keyboard (or select the Text Tool and place it on the page).
3. Type in "Model S".
4. Next, change the Text Style to 'Heading' and center it using the alignment tools.
5. To add the "Schedule a demo drive" button, duplicate the previous text by pressing the command + d keys [Cmd + D] or control + d [Ctrl + D] and change the text to "schedule a demo drive". 
6. Change the Text Style of "Schedule a demo drive" to 'Link'.
7. Auto Layout [Shift + A] the "Model S" heading and the "Schedule a demo drive" link and name the Auto Layout as 'Heading'.
8. Make the following adjustments to the 'Heading' Auto Layout's properties:
9. Set the Auto Layout direction to vertical.
10. Adjust the spacing between to 12 pixels and align as desired.
11. Use 4-pixel increments for all measurements and spacing to ensure responsiveness

Re-using Button Components in Figma

1. Open the shortcut for Components using Shift+I.
2. Select the Button Component and place it on the frame.
3. Double-click the button to edit its text and label it "Custom Order."
4. To create the second button, duplicate the "Custom Order" button by pressing the Command + D keys [Cmd + D] or Control + D [Ctrl + D] and holding Shift to evenly drag it across the frame.
5. Select the second button and on the right panel of Figma, under the 'Button' section, change the button type to 'secondary'.
6. Double-click on the new button and change its text to "View Inventory".
7. Adjust both of the button's sizes by selecting both of them and dragging them to the desired width.
8. PRO-TIP: Consider using the grid layout and centering the buttons for better alignment.

Auto Layout buttons in Figma

If you'll notice, the buttons created float on their own. To streamline and better organize the design, we can Auto Layout these buttons.

1. Wrap the buttons in an Auto Layout by selecting them and using the Shift + A shortcut.
2. Name the new Auto Layout "CTA" and adjust the spacing to keep it consistent and systematic.
3. Use 24 or 20 pixels for the spacing and align it to the gutters.
4. Finally, use 4-pixel increments for all measurements and spacing to ensure responsiveness.

Creating a Fully Responsive View

To ensure complete responsiveness of the view, we need to make a few more adjustments. The header aligns correctly when the frame is resized, but the image, title, and buttons do not sit perfectly. To fix this issue, we need to follow these steps:

1. Return to the original view and select the "Model S" text.
2. Under constraints on the right panel of Figma, center the heading.
3. Similarly, for the CTAs, center them or keep them left and right.
4. For the image, select the background image while holding command [Cmd] or control [Ctrl], and ensure that the horizontal is scaled or centered.
5. When the frame is resized, everything should remain centered perfectly in the design. The responsive view is complete.
   ‍

Figma Design Tool Preview

Once you're done, you can preview your design by doing so:

1. Select the frame.
2. Perform any of the following to turn off the Grid Layout:
3. Toggle the eye icon in the 'Layout grid' section on the right panel in Figma.
4. Use the shortcut Command + G [Cmd + G] or Control + G [Ctrl + G].
5. Click on the play icon to preview the design.

At this point, the design is looking awesome and it's nearly done. Plus, the design looks very similar to the original Tesla design. It's time to enter the final stage and prepare your design file for developer handoff.

Prototyping stage: Figma Prototypes with Animations, Fixed Position Elements, and More

In this third lesson, we will share best practices, tutorials, and suggestions on how to create interactive models so you can make better designs and conduct user testing using Figma. You will also get feedback on the progress you have made in completing a project.

Designing a Sticky Header on Scroll

As seen on the website, the header stays fixed to the top while scrolling. To achieve this effect:

1. Select the header in the design.
2. Under constraints on the right panel in Figma, choose "Fix position when scrolling." 

Now, when previewing the design and scrolling, the header will stay fixed to the top, similar to the header on Tesla.com.

Create Smooth Figma Smart Animate Effects

The final step is to create the desired interaction on our website. As you may recall, if we scroll down on the website, it smoothly moves to the next section and changes the title and background image. To recreate this effect, we need to make a few changes in Figma.

1. On the left panel in Figma, select the CTA, Heading, and background image while holding down the shift key.
2. Wrap these elements in a frame by holding down the Option + Command + G [⌥ + Cmd + G] or Alt + Control + G [Alt + Ctrl + G] keys.
3. Alternatively, you can also select the 'Object' tab and click 'Frame selection'.

4. Adjust any excess borders to fit the frame. Select the "Clip Content" option after adjusting the borders to ensure the image is clipped correctly within the frame.
5. Name this section "Section - S."
   
   

NOTE: Clipping the content allows Figma to crop everything beyond the frame.

If you head back to our web reference, you'll notice that every image or page fills up the entire viewport of the landing page. Even as you scroll down, the size does not change. To recreate this effect, we need to follow these steps:

1. Using Figma, click on the frame and identify the existing height of the frame. In this project, the height of the frame is 1117.
2. Double the length of the frame by multiplying it by 2. [Height of frame * 2]
3. Duplicate the Section - S frame by pressing the command + d keys [Cmd + D] or control + d [Ctrl + D] keys.
4. Hold the Shift key to align the section and bring it down to the space below.
5. Rename the "Model S" heading to "Model 3".
6. Head back to the website and grab any image by using the same technique we did in the preparation stage.
7. Add the image to the section by pasting it onto the background image. Rename the new section to 'Section - 3'

Once you have the 2 sections ready (Section - S and Section - 3), you have to make sure to follow these steps accordingly:

1. Select the parent, and hide the duplicated section by adjusting the size of the frame to its original size.
2. Select the 'Macbook Pro 16" - 1' section and rename the section to 'Homepage' on the left panel in Figma.
3. Duplicate the homepage using the command + d keys [Cmd + D] or control + d [Ctrl + D] keys.
4. Expand the collapsed homepage. Select 'Section - S' and 'Section - 3', and move them up to display 'Section - 3' and occupy the entire viewport by holding down the Shift key and dragging it until it fits the screen.

Figma animation - Prototyping in Figma

Now that you've accomplished everything you need for the homepage, its time to animate and prototype the page:

1. Select the first homepage.
2. Select 'Prototype' on the right panel in Figma.
3. Click on the "+" icon to the right of the selected page, dragging the arrow over to the next page. This will pop open a small window to adjust the interaction details.
4. Adjust the interaction settings to the following:
5. Page movement to 'On a click'.
6. Animate with 'Smart Animate'.
7. Page transition to 'Ease in and out'.
8. Duration to '600 ms (milliseconds)'.
9. Choose the second page, and follow steps 3 to 4 for the second page.
10. Create the animation and test the interaction.
    ‍

Figma Smart Animation Preview

To activate the product presentation mode, click on the play icon. This will load the mode, and you will only need to click once to slide down to the next section. Clicking again will bring you back to the original state. You may notice that the header stays fixed in its position and follows along as you navigate.

Best way to learn Figma Tutorials

Efficient time management is crucial. This is why Designership's Ultimate Figma Masterclass is one of the best Figma tutorials in town: you can learn to use the Figma interface at your own pace while having a 1 on 1 guide with industry experts. With over 90 videos, step-by-step Figma tutorials, and additional resources, this course is your key to becoming a Figma pro. This course walks you through hands-on Figma Design training from the very basics of opening Figma all the way to becoming comfortable working within the Figma environment.

Looking for more Figma tutorials or Figma-related content? Check out these links!

• 10 Reasons Why You Need to Know About Figma
• Figma Crash Course: Responsive Grid Layout
• Figma Tutorial: Smart Animate - Create UI & Web Animations

‍