Complete Figma Tutorial For UI UX Designers - Introduction to Figma


Figma is a UI/UX Design application available in Mac, Windows and also in web browsers. Using Figma we are able to create an excellent design, prototype and we can also generate our design as actual code like CSS, SVG. Figma is also capable of handing the vector files like SVG In simple words Figma is a design tool developed for all the designers.

In this Tutorial we are going to see how we can design Elements and how to prototype you designs using Figma.

Account Setup

Figma is free for individual designers. Creating a new account in Figma is very simple, all we need to do is go to enter your Email and Password for your account. That’s it, your account is ready, you can start designing.

Tools and Interface

1. Page

Page is used to organize your design based on your preference. The page will be very useful when the number of your design elements are huge. We can able to create as much page as we need in Figma


Frame is a container for all design elements in Figma similar to Artborad in other tools like Sketch, Adobe XD. To create a new Frame Click the # in the Top toolbar it will open the new right sidebar with all default Frame Sizes. If you want you can create a Frame with custom size. Press A or F key in your keyboard to open the right sidebar with default Frame Sizes.

Figma can handle any number of files in a single page without any delay while editing or while loading the Frames. We can Zoom out all the way to fit all the frames in a single screen and Zoom in all the way in to edit very tiny details in your design.

3. Text and Shape tools

Text is a very important part, that is why Figma Provides a large number of features for Text. Some of the most important features are Font Family, Font Color including gradient color, change the letter case, decorations and more.

To select the text box click the T in the top toolbar or press T key from you keyboard.

4. Shape Tools

In Designing tools All the Elements like button, Input box, Form, Header, Footer and section all of them are denoted using the Shares only. So Figma provide a list of share to create you design.

Share that are provided by the Figma tools are:

  • Rectangle
  • Line
  • Arrow
  • Ellipse
  • Polygon
  • Star

Shape border, background color, shadow and much more properties can be easily editable. For background color plain and gradient color features are also available.

We can provide Border radius, Color, Strock and lot more, the best thing is we can able to add these properties to Multiple Elements at the same time by selecting all of them and the property values.


The best and advanced feature in Figma is commenting on the design and prototype file. Comments take collaboration to the next level between the designers and client. You can use comments to respond to feedback, tweak your designs and iterate faster.

Click the comment icon in the toolbar to enter commenting mode. Once entered to the commenting mode cursor will turn into a location icon. Click at any location on the Canvas to create a comment.

Follow us via social media to get the updates notified. If you have any queries regarding Figma please Contact us.

Leave a comment

Please note, comments must be approved before they are published