Navigating in Figma

Once you signed up Figma and completing all of its onboarding process, click on new design file to create a new file, Rename the file to your project name, click on frame and choose your frame size accordingly to your project.

Menu Bar

Lets go through the menu

The first one is the main menu,

Then the move and scale menu,

Next is the frame, section and slice tool,

Then comes the shape tools all your rectangle, line, arrow, ellipse, polygon, star and place folders for images or videos are in the shape tools,

The pen and the pencil tool,

Text tool,

Plugin components and widgets tool box,

Hand tool,

Comment tool.

Side Menu

On the right side you have three different tabs Design, Prototype and Inspect.

Let take a look in Design tab, 

First section is the alignment section,

The second section is completely positioning, width height and constraint properties, rotation, corner radius and individual corners radius control,

The third section is constrain properties,

The fourth section is layer filter,

When using text the Fifth is text properties it’s such as font, size, font weight, font alignment, line height, letter spacing, paragraph spacing, auto height, alignment, text alignment and type settings.

Fifth section is fill in this section you can change the colors, opacity and the properties of a shape to solid, linear, radial, angular, diamond, image and video

Next section is the stroke in here you can change the width, color, opacity and where the stroke start from inside, centre or outside,

In the effect section we have four different effects layer blur, inner shadow, drop shadow and background blur

The final one being export section you have four different export formats dot PNG, JPG, SVG and PDF you can export in various different sizes from 0.5X to 4X.

Learn how to be a pro with Figma

Get Figma