How to Use Figma: A Beginner’s Guide Step by Step

Launched in 2015, Figma is known as a leading UI (User Interface) design tool for websites and applications. 

What is Figma?

Figma is a cloud-based prototype tool and vector graphics editor used for designing user interfaces with superior remote collaboration capabilities. 

More and more businesses are choosing to use Figma because of its convenience. In this article, let’s explore the features and usage of Figma.

✔ Update 15/9/2022: Adobe officially confirmed its acquisition of Figma for $20 billion, promising to usher in a new era of creative collaboration. Source: Adobe.com

Numerous reviews praise Figma for its excellent features and intuitive and user-friendly interface. If you are already familiar with Photoshop, getting acquainted with Figma won’t take much time, and you may even find it simpler and easier to use than Photoshop. 

You can use Figma for free, however, if you want to access the full features of Figma, especially collaborative design features, you will need to upgrade to the Figma Pro plan.

Great advantages when using Figma

When companies and designers have to make a decision on what design tool to choose. Why should they choose Figma?

The great advantages of using Figma include:

✅ When traditionally sending files, sometimes files have errors that neither the designer nor the recipient detects, leading to unnecessary mistakes. Figma allows multiple users to work simultaneously on one design. Figma can be used on any operating system and browser. All team members can access the file to view the current design status in real time.

✅ Despite multiple people working on the same design file, the performance remains unchanged even as the number of design tools used and the level of editing increases.

✅ When working with clients, if you use Photoshop, you must export the entire file for the client to view. With Figma, you can export individual elements, the entire file, or publish drafts for clients to view and provide feedback more quickly. This enhances project progress and productivity.

✅ And many other features.

Figma Design Interface

Figma has a user-friendly interface. After creating an account and logging in, you will see the Figma interface as follows:

• New design file: Create a new design.
• New FigJam file: FigJam is referred to as Figma’s “whiteboard.” When designers collaborate on a design file, they need a place to discuss ideas and align processes, so Figma has introduced FigJam.
• Import file: Upload files from your computer.

In the Explore FigJam templates section, select “See all” to view more suitable template options. Before you and your team start designing any product, you will need to use FigJam.

The bell icon in the top right corner is the Notifications section, where you can easily track design file edits through notifications.

You can use Figma in a web browser or the Figma app. However, using Figma in a browser is much more convenient than using the app.

Basic Guide on How to Use Figma

First, let’s create a new design file – “New design file,” and then I will illustrate the basic operations in Figma.

Move, Pan, and Zoom tools

After selecting “New design file,” Figma will display the interface as follows.

The top left corner displays Figma’s tools. You can click on each icon to select the tool you want. The advantage of Figma is that if you don’t remember where a specific tool is located but know its name, you can easily find it by typing it in Quick actions.

After clicking on the triangle icon to draw two shapes, I use the Move tool (shortcut: V) to move each shape. If I want to move both shapes, I will use the Hand tool (shortcut: H).

The top right corner allows you to zoom the file according to your preference.

Tool Frame

Because Figma is an application for designing UI interfaces, it provides various pre-set Frame types with specific sizes for your design. However, when it comes to Social Media, Figma may not have the latest size updates, so you need to double-check the sizes and make adjustments if necessary.

If you want to resize, simply change the width (W) and height (H) in the top-right corner.

Tool Groups, Lock, and Hide Layers

Each layer in Figma is displayed similarly to Photoshop. You can easily use the mouse to rearrange the layer order. The padlock icon is used to lock a layer, and the eye icon is used to hide a layer.

To group layers together, select the layers you want to group and press Ctrl + G. To ungroup layers, press Ctrl + Shift + G.

Tool Opacity and Fill

You can adjust the Opacity level in the Layer > Pass through the section. In addition to the Pass through option, Figma also provides other blending modes similar to Photoshop.

Figma offers many features for creative design. Fill is used to add color to shapes, and you can also adjust the opacity level of the background/image. To create a gradient color background, in the yellow-highlighted arrow section, you have several options to choose from: Solid, Linear, Radial, Angular, Diamond, and Image. The Image option is used to insert an image into a shape. Practice regularly to create your favorite colors.

Tool Rulers and Layout

In the Quick actions… search box, type “Ruler” to instantly display the “Show rulers” option. Then you can simply grab and drag the ruler into your design.

When designing interfaces for mobile devices, you will need many rulers to align the positions of objects in your design. Manually creating each ruler is not feasible, so we should use Layout grids.

After selecting a Frame, you can change the Size in the Layout grid section to adjust the grid spacing. The layout grid is not dependent on pixel grids. This means that the layout grid is not tied to specific resolutions or sizes. Additionally, you can only apply the layout grid to one frame.

Tool History

To view the version history, in the Drafts/Untitled section, select “Show version history.” The History feature in Figma works similarly to Drive, allowing you to click to revert to a previous version.

Drawing Shapes

In the menu, you can choose the shape you want to draw. To draw a square or circle, simply press and hold the Shift key while drawing.

One advantage of Figma is that circular dots appear at the corners when you click on a shape. You can easily change the corners from sharp to rounded. You can adjust the corner with a circle, as shown in the sample below.

Furthermore, in the top-right corner, you can adjust three parameters highlighted in yellow to achieve the desired shape. Stroke is used to fill the inner or outer border of the shape. The Effects section includes Shadow for adding shadows and Blur for blurring.

Tool Alignment and Distribution

To align the positions of layers, simply select the layers and choose Alignment (red-highlighted section). If you want to readjust the positions of layers, select Distribution in the yellow-highlighted section. Tidy-up is often used to arrange the positions of icons on the phone, aligning both horizontally and vertically.

Inserting Images and Text

To insert an image into your design, you can directly drag and drop the image file from your desktop to Figma or choose File > Place Image to insert an image.

Figma provides a full range of text editing features in the right-hand menu for you to adjust the text as needed.

Exporting Files

The advantage of Figma is that you can export/download individual elements within your design. For example, you can download a rectangular image file in PNG format to your device.

Detailed Guide on How to Use Figma

After you become familiar with the basic tools and features of Figma that I introduced earlier, designing a banner will become more attractive. I will guide you through creating a simple banner.

First, create a frame by selecting Frame > Social Media. Since I need a vertical banner with dimensions of 900x1200px, I adjusted the size in the W and H sections (highlighted in yellow).

Next, I will fill the background with color. You can choose a color by hovering your mouse until you find the desired color, entering the color values, or using the color picker tool (highlighted in yellow).

To pick colors from an existing image, place the image into the design by selecting Menu Figma > File > Place Image… Then click on the color picker tool and drag it to the desired color. 

If you need to adjust the saturation, select “Linear” and choose the appropriate color in each section.

I continue by drawing a rectangle inside the frame. When you move the rectangle with your mouse, Figma will display alignment indicators in red to help you align the rectangle with the frame.

Next, I select the Text tool. You can easily edit the font, size, and alignment of the text. Additionally, I add a stroke to make the text more prominent.

To add an image to the frame, I also select Menu Figma > File > Place Image…

The top menu has a Crop icon. I will use Crop to adjust the image to fit within the frame. If you want the image to fit perfectly within the blue rectangle, simply move the image into the frame.

Finally, I added other accessories from Freepik and PNGtree to make the banner more lively. To bring layers to the front or send them to the back, apart from rearranging the layer order in the left-hand side layer menu, you can also right-click and select Bring to Front or Send to Back.

FigJam for iPad: Easy Sketching and Idea Sharing

✅ Figma recently launched FigJam for iPad on March 15th, with full real-time collaboration features, direct editing of FigJam files on the iPad (previously, the iOS version only allowed viewing designs), and brainstorming design ideas together from the beginning.

You can use FigJam on iPad as an “online whiteboard.”

The strength of FigJam for iPad allows users to experience all the features of the web version of Figma (used on computers) and provides additional useful features, such as full support for Apple Pencil for direct note-taking on the design and Magic Keyboard.

Real-time synchronization and collaborative design are still among the strong points of Figma that few UX/UI design tools can compete with.

✅ Other notable features of FigJam for iPad include:

– [ ] Design in low-fidelity

– [ ] Annotate designs

– [ ] Sketch flows and diagram

– [ ] Hand-write notes

– [ ] Jot down ideas.

Source: https://www.figma.com/blog/introducing-figjam-for-ipad/

Should I subscribe to a Figma Pro account?

Figma is a great tool when you’re starting to learn user interface design. And suppose you have a design team or group. In that case, Figma can be considered a suitable tool because of its excellent cross-platform design collaboration capabilities (Windows, Mac, Android, iOS, etc.).

Considering all the advantages mentioned above, I believe upgrading to a Figma Pro account is a worthwhile investment.

You have been introduced to and used the tools and features in Figma through this article. Additionally, designing social media banners using Figma has become more accessible. More practice is needed to apply Figma to website design, application interface design, or mobile design. Wishing you success!

Sharing Free Figma Pro Accounts: https://www.facebook.com/groups/chiasepremiumdotcom 

UI/UX Design with Figma Course

Below, I will update and share free registrations for valuable Figma courses. After registering, you can access and use these courses indefinitely. The free access period is 24 hours and is limited to the first 120 registrations (according to Udemy’s new regulations). Therefore, I have posted the information on my blog and shared it on Fanpages, Groups, Telegram, etc., to make it convenient for you to stay updated and register (These are perfect Figma courses and entirely free for a lifetime).

UI/UX Design with Figma Course: https://chiasepremium.com/khoa-hoc-figma-thiet-ke-ui-ux-dang-ky-download-mien-phi/