What Figma 101?

1. Home
2. What Figma 101?

Figma 101: The Beginner's Guide

What is Figma?Figma is a vector graphics editor and prototyping tool - think of it as Adobe Illustrator for the web. With Figma, you can design high-fidelity prototypes that look and feel just like your final product, without a single line of code.Why use Figma?There are lots of reasons to use Figma, but here are a few of our favorites:It's collaborative: With Figma, multiple people can work on the same file at the same time. That means no more emailing design files back and forth or losing track of who made what changes.It's fast: With Figma, you can create complex designs quickly and easily. No need to fiddle with code - just drag and drop to make changes.It's online: Figma runs in the browser, so there's no need to download or install anything. Plus, you can access your files from anywhere, on any device.

How do I get started with Figma?

Fortunately, getting started with Figma is easy - even if you've never used a vector graphics editor before. In this tutorial, we'll walk you through the basics of creating a design in Figma.By the end, you'll have created a simple button that you can use on your own website or app.

Creating a new file

To create a new file in Figma, first log in or sign up for an account at www.figma.com. Once you're logged in, click the "Create New File" button in the top left corner of the screen.A pop-up window will appear asking you to choose a template for your new file. For this tutorial, we'll be starting from scratch, so select "Blank" from the list of options and click "Create".Now that you have a new file open, let's take a tour of the interface.On the left side of the screen is the toolbar - this is where you'll find all of the tools you need to create your design. We'll be using some of these tools later on in the tutorial.In the center of the screen is your canvas - this is where you'll actually be creating your design. The canvas starts out blank when you create a new file, but we'll be adding stuff to it soon!On the right side of the screen is the Inspector panel - this is where you can adjust properties like colors, sizes, and spacing for elements on your canvas. We'll be using this panel later on as well.Finally, at the very top of the screen are some helpful menu options - we won't be using these much in this tutorial, but feel free to explore them on your own time.

Adding an object to your canvas

Now that you know your way around the Figma interface, it's time to start adding stuff to your canvas! To do this, simply select the "Rectangle" tool from the toolbar on the left side of the screen (it looks like.. well. a rectangle). Then click and drag on your canvas to draw a rectangle shape.Easy enough so far, right? Let's try something a little more complex.

Adding text to your design

To add text to your design, select the "Text" tool from the toolbar on the left side of screen (it looks like. a capital T). Then click anywhere on your canvas and start typing! You can change things like font size and color by using the Inspector panel on the right side of screen.

Creating hyperlinks

. You can also add hyperlinks to elements in your design by selecting them and clicking the "Link" button in Inspector panel on right side of screen.

Now that you know how to add basic shapes and text to your design, let's learn how to style them.

Styling objects in your design

. You can change properties like colors, sizes, and spacing for elements in your design by using Inspector panel on right side of screen.

That's it!You now know everything you need to get started with Figma.

So what are you waiting for? Go ahead and create something amazing!