C O D I T R O N

Technologies

Figma : An Introduction To A Powerful UI Design & Prototyping Tool

By, Yogini Nanaware
11th August 2022

Figma is a strong design tool that helps you to create anything: websites, applications, logos, and much more.

By learning Figma, you’ll take your first steps into Interface Design and User Experience Design. These skills are essential for building an impressive portfolio for yourself and potentially for your own company.

Figma is an interface design application that runs within the browser—but it’s far more than that. According to me, it’s probably the best application for team-based collaborative design projects. Let’s take a look!

Different tools within Figma are:

  1. Frames
  2. Grid columns and rows
  3. Shapes
  4. Import images
  5. Text
  6. Labelling and grouping
  7. Navigation bar
  8. Button design
  9. Header title and scaling
  10. Additional text settings
1) How to Make a Frame in Figma:

First, we’ll create a frame. Where our design will live. You’ll size a frame however you want depending on your requirements.

This example will be a website, so select the Desktop Frame – but you’ll also create mobile application frames, or even custom frames & more.

  • Select the Frame tool from menu.
  • Select the Frame size as per the custom choice.
2) How to Add Grids and Columns in Figma:

We start with the design, you’ll be wanting to add grids that help you keep the alignment of content for your page consistent.

You can add grids to a frame and customise them. As an example, I often prefer 12 grids as this is often the default for website development.

  • Select the frame you want to grid.
  • Select Layout Grid on the right panel.
  • Select Columns and 12 units.
3) How to Use Shapes in Figma:

Use the shapes and elements in Figma to form squares, circles, lines, and more. These are creating a design on a page.

  • Select the Square Shape tool.
  • Create a square.
  • Begin to shape and size it.
4) How to Add Images in Figma:

Add images online or locally to your page. Images are an important part of designing a website, for the hero section.

Let’s add a logo as our first image which we’ll increase the very best left of the screen.

  • Drag and drop an image from your local & online to your designing desktop.
  • An image from the shapes image upload option.
  • Resize and place the image on the design of your website.
5) How to Add Text to a Design in Figma:

The font will default to Roboto, but you’ll change the font family, size, and colour at any stage.

In this example we will use the right panel to change the colour and size of the font, and later the font family also .

  • Select the Text tool.
  • Add “About” text because the beginning of the navigation.
6) How to Label Elements and Create Groups in Figma:

Working with many layers in Figma can get confusing, so label all of your elements as soon as you create them. Even better is to group different sections and shapes with labels like “Hero Background” or “Navbar”.

  • Select your element/s and right click to group or press Ctrl + G.
  • Name your group.
7) How to add navigation bar in figma:

A simple but useful top/bottom navigation bar to use in your website designs. The top/bottom nav bar are often resized in your mobile or every device screen by just resizing it. You can activate or deactivate the text and status of each tab.

8) Button design:

Make a rectangle and add a label on the button. Establish fixed width & height.Select both the label and therefore the container and centre them with the alignment tools and left-right padding.

9) Scaling:

We recommend using the Font Size property to regulate the size of your Text. However, you’ll also use the Scale tool to resize text. This is often handy when you want to resize a group of elements at once.

  • Select the size tool in the move drop down in the toolbar. Or, press the K keyboard shortcut.
  • Select the Text layer and hover over the bounding box until the size handle appears.
  • Click and drag to Scale your Text. The Font Size will change within the Text section of the Properties Panel.
10) Additional text settings:
  • Click the icon to look at, create and apply text styles
  • Click the arrow to browse an inventory of web, local, and shared fonts to seek out a typeface or font family
  • Use the arrow to pick a font weight or style.
  • Use the arrow to regulate the size of your text
  • Adjust the vertical distance between lines of text using the road height field.
  • The horizontal distance between letters with letter spacing
  • The vertical distance between paragraphs with paragraph spacing.
  • How text overflows or wraps with resizing behaviour.
  • The horizontal alignment of text within the text box.
  • The vertical alignment of text within the text box.
  • Click to open the sort settings panel and explore more text properties.
Conclusion:

Figma is straightforward to start using, but there is a lot to learn to use it to its full potential. With the fundamentals of shapes, images, and text, you’ll easily start prototyping an internet site, designing a mobile application, and far more.

We hope this guide to Figma’s essential features inspires you to explore the tool and start using it to speed up your projects.

Coditron Technologies

Contact Us

Address

Corporate Office : Greens Center, Thergaon Pune 411033

Operation Office: USA: PO Box # 582973 ElkGrove CA 95758