There are many design tools out there to get your design ready from low to high fidelity wireframe. In this post, we will be exploring Figma – design tool. We will go over the basic features. If you already Figma and have used it before this post is not for you. Before, getting started with Figma. What is mockup? Mockup is a high fidelity design that represents your final product. In UX/UI design, creating mockup is an enssential skill that desinger should have to present the final product to all stakeholders for further consideration and investment. You can create wireframes and prototypes as well as other design works. There is no limitation, you only need an open-mind and the will to bring out your creative genius. Ok, let’s get into it.

New Learners

If you are new to the Figma, then welcome to the fresh start. To get started, you need to create a new free Figma account by following this article: Create a Figma Account. If you are a student in either formal education or certificate program on any online learning platform like Coursera or Edx, you then can create a free Figma Education account.

If you already have a figma account and want to upgrade to the Figma Education account, you need to through the following:

1. In your Figma account on the left hand, choose create a team.

2. Choose you team name and then select the new plan right below the create team button.

3. Then you choose the third option for Education plan.

That’s how you upgrade from a free account to the Education plan.

Once you get the account set up and running, you might want to get an overview of the tool with this video: What’s Figma?

Explore Basic Features in Figma

To import or a create a new file from scratch or from a template through the + New button on the top right corner.

Once you create a new design file, you will see the big grey space in the middle. That grey space called the Canvas, where you can create frames or pages for your design.

Navigation in Figma

To zoom in or zoom out, hold Cmd / Ctrl and then scroll up or down with your keypad or mouse scroller. The keyboard shortcut is + and -. You can also activate the zoom tool by holding down the Z key on keyboard.

To toggle between the Hand tool and Move tool, with V and H key. You can also activate the Hand tool by holding the spacebar, once you let go of the spacebar the cursor will become the Move tool automatically. This option also works in Adobe XD.

Panel and Toolbar in Figma

The panel on the right of the screen are the three tabs for Design, Prototype, and Inspect.

• Design tab – creating wireframes and mockups. This is the tab you’ll use when you begin to design a responsive website or wireframes or mockups.

• Prototype tab – creating low-fidelity prototypes of your wireframes and high-fidelity prototypes of your mockups. When you use this tab, you’ll be able to connect the pages and elements in your designs to make them interactive.

• Inspect tab – lets you and your collaborators view and copy the existing code and values for designs. For example, if you click the inspect tab and then select page, all of the code for each of the elements, like the color and typogaphy, is presented.

The toolbar in the top left of the screen. The Figma toolbar contains eight buttons:

• Move and scale tool. Move elements and components on a page or Canvas. This tool is kink of like your standard computer mouse cursor.

• Frame and Slice tool. Create new frames on a Canvas. After a frame is selected, the Layout Grid panel on the right provides the option to choose the pixel number. This step will help you to understand spacing as you add design elements later.

• Shape tool. Create basic shapes, like rectaangles, stars, lines, arrows, and ellipses.

• Pen and Pencil tool. Draw custom and freehand shapes.

• Text tool. Add copy to a design.

• Hand tool. Navigate across design

• Comments tool. Share or receive comments about designs with team members.

The tab on the left right below the toolbar are: Layers, Assets and DESIGN.

• Layers – elements that are created on the Canvas will appear here, groups, frames, components, instances, etc. It is useful feature to organize your design.

• Assets – this is where you find your components and other design elements that you want to imported to use for the current file.

• DESIGN – is where you can create multiple pages under the current file. You can duplicate your current page to make changes, so that you can have different version at hand.

That’s just the basic stuff that you probably use the most on the daily basis for your design work. To learn more about Menu and Tools, go here.

Create Frames

Well, we get the basic stuff done and now it is time to create frames. You might wonder why frames and not mockups. Frames set the foundation for the mockups like the devices and screen sizes that you are designing for. What goes inside the frame is when you leverage all the tools above to make the magic happens. Below are the step by step to create frames.

To create a new Frame: select the Frame Tool.

There are a few ways to choose the size of the Frame:

1. Click inside the Canvas to create a default Frame. The dimensions for default frames are 100 x 100 pixels.

2. Click and drag in the Canvas to create a Frame with the dimensions you prefer. When you click and drag, the width and height will automatically update based on how much you drag. you can also choose the preset frame in the Design panel on the right side of the screen.

3. Select a predetermined size for a Frame, like a specific phone model or tablet, in the Design panel on the right side of the screen. By selecting the Frame, it will be added to the Canvas automatically.

More on creating Frames in Figma

Additional resources

• Figma shortcuts

• Library of device sizes