Design

The Figma Design Tool

Getting started with Figma as your design tool.

Figma

Design Tools

A comprehensive guide to the best tips and tricks in Figma.

Source Code

You can also view the source code for each section in the course.

Detail Notes

You can also view the detail notes for each section in the book.

Design Tools

With the availability of so many design tools, it's easy to get overwhelmed when it comes to select the best one that fulfills all our needs. Here, I'd like to mention that there's no such thing called "the best" design tool. Every tool has its own set of advantages and features that makes it stand out, but we can easily search for a tool that works best for us. Mentioned below are some of the amazing design tools available to us.

Figma

  • Figma is called the collaborative interface design tool. And it stands out for its collaboration feature. It gives users the ability to share a design file with multiple team members and get instant feedback from each other via comments. These days most of the other design tools have also implemented the collaboration feature but Figma is the one that first brought this to the table.

    Figma also provides a lot of useful resources, plugins, and techniques that make your workflow smoother.

Why use Figma?

  • Only a few years ago, in 2016, Figma came out as the first design tool that utilized the power and accessibility of the Web while promising the same powerful features you’d expect from a native app. They surprised everyone with their real-time collaboration feature. Designers were ecstatic to finally be able to share their designs with their co-workers and clients with zero friction, and see multiple mouse pointers drawing shapes simultaneously. It was like magic.

    We’ve come a long way since. Figma has set the bar to the highest level by continuously improving and implementing new features. Today, everything exists on the Web, and Figma makes full use of it by bringing everything together for designers and developers.

    Let's take a look at some of the special features that make Figma stand out.

    VECTOR NETWORK

    Figma introduced a powerful new way to design vectors. Instead of connecting paths one to one, you can create web-like connections, making the whole process of creating shapes more flexible.

  • STYLES

    In Figma, most of the foundation elements are set in the Styles, which contains Colors (including gradients and images), Text, and even Effects. You can make them readily available as a Library. As you design, you can set these styles in your Inspector, for things like TextFillStroke, and Effects.

  • COMPONENTS

    Components are building blocks for any design project. Theses are collections of elements put together in a reusable way, such as buttonsformsnavigationscardscells, and overlays. Component elements like text content, colors, and images can be customized in the Inspector. A button component can be duplicated many times, with different content and styles.

    Additionally, you can have Components within Components, allowing you to customize even the most complex groups of elements, like icons, states, and complex themes. In Figma, it's very easy to add different design elements as Component and publish them as customizable design assets.

  • TEAM LIBRARY

    Imagine Abstract, Google Docs and Sketch in a single tool. Imagine a more cohesive and smoother experience. That’s Figma. Team Libraries allow you to share your components, styles and assets across your whole team. You can enable and disable these libraries by clicking the ON/OFF toggle anytime you want.

  • CONSTRAINTS

    Constraints in Figma are the same as Sketch. They allow you to set distances from the parent container. It also enables you to scale or align elements.

  • REAL-TIME COLLABORATION

    Figma truly is the Google docs of design tools. Once you start collaborating with fellow designers, developers, and clients in real-time on a design project, you’ll never want to go back. You can share your design with anyone and they can watch your progress, comment, and even participate as you bring your pixels to life.

  • REAL-TIME COLLABORATION

    Figma truly is the Google docs of design tools. Once you start collaborating with fellow designers, developers, and clients in real-time on a design project, you’ll never want to go back. You can share your design with anyone and they can watch your progress, comment, and even participate as you bring your pixels to life.

Figma Pricing

To get started, let's head over to figma.com and sign up for a free account.

Figma Download

You can either use Figma directly from your browser or you can download the desktop app from the Downloads page. A specialty of Figma that you already know is Cross-Platform. It works with Mac, Windows, and also Linux devices. Download the Figma app based on your OS.

The Editor in Figma

Getting familiar with the Figma interface

This tutorial describes the Figma interface. It divides it into 4 sections and then gives a brief description of each section.

Getting Started

Once you've created an account, you'll be redirected to the Figma dashboard which contains the details as well as different tabs. This is where you can create new files, import files, go through your recent files or search through the existing ones.

The Editor

Most of the modern design tools, especially the UI design tools look almost the same. This is so that the user doesn't feel overwhelmed while working on different tools or while migrating from one tool to another. The editor is where you end up once you create a new file.

Basic Tools - Figma Tutorial

Getting to know the tool panel in Figma

Figma gives its users access to a lot of tools. In this tutorial, we'll go through all the basic tools available to us.

Frame

The frame tool is what allows you to create frames on the canvas. You can nest frames inside each other as well. Let's start by adding a frame.

  • To create a frame, either click on the Frame tool in the toolbar or press one of the following keys - F or A
  • Once you click on the frame tool, you can either choose one of the preset devices from the Properties panel or draw a custom one on the canvas

 

Grids

Grids are essential to understanding the negative spacing when you're designing for iOS, Android and Web. For mobile, it’s common to use an 8-point grid. For Web, it’s a little less about spacing and more about division, like the 960 grid. It's good to have some grid in place, like the default 10-point grid. This ensures that all the elements fall on clean pixels, avoiding half pixels as much as possible.

Shape Tools

Next up are the Shape tools. You can access all the basic ones via the Shape tools in the toolbar. The shapes available include - Rectangle, Line, Arrow, Ellipse, Polygon and Star. To insert a shape, do the following:

  • Click the Shape tools option and select your preferred shape
  • Here, we'll be adding a rectangle but you can add any shape you'd like

Alignment

The top of Properties panel contains various alignment options. Provided below is the list of all the options as well as their keyboard shortcuts:

  • Align Left (Alt + A)
  • Align Horizontal Centers (Alt + H)
  • Align Right (Alt + D)
  • Align Top (Alt + W)
  • Align Vertical Centers (Alt + V)
  • Align Bottom (Alt + S)

Resize

You can resize any layer by selecting it and then, dragging the corners. Hold Shift to keep the same aspect ratio and hold Option to resize from center in order to keep the same alignment. Alternatively, you can change the 'W' (width) and 'H' (height) values in the properties panel. Make sure to click the Constraint Proportions option so that it scales proportionately.

 

Image

In Figma, images can be edited on the fly after importing. You can control settings like Exposure, Contrast, Saturation and much more without having to leave the design tool.

 

Color Picker

Click on the Fill to start customizing the background. As with most design tools, you can change the color by clicking the color on the wheel or via the eyedropper tool. Alternatively, you can input the HEX code or choose from one of the preset colors. The opacity value can also be changed from here.

 

Gradients

Figma also gives you the option of replacing the solid colors with gradients. There are multiple gradient options. You can find the gradient options in the color picker. You can play around with different combinations of colors, the opacity as well as the direction of the gradient!

Position, Size, Rotation, & Corner Radius properties - Figma Tutorial

Working with Position, Size, Rotation, & Corner Radius properties

In this following tutorial, we'll learn to use Position, Size, Rotation, & Corner Radius properties in Figma.

Color Styles - Figma Tutorial

Working with color styles on Figma

Styles in Figma allow you to specify a set of properties for elements. You can create styles for basically anything, be it Text or Color and even Effects. In this section we'll focus on Color Styles.

Color Styles

Like Grids, Colors and Gradients can be saved as styles. This is important when it comes to reusing certain styles. Saved styles make the design process more consistent. Most designs need different colors to be used mainly for the following:

  • Backgrounds
  • Texts
  • Buttons
  • Gradients

Masks - Figma Tutorial

Learning how to use masks in Figma

In this following tutorial we'll explore how we can use outline Masks in Figma.

Masks

Masks allow us to show specific areas and hide the rest of an image or object. Masking is a very effective way to control the visibility of some specific areas of any layer.

Dark Mode with Selection Colors - Figma Tutorial

Learn to design and adapt for designs for Dark Mode with Selection Colors

Dark Mode nowadays is widely used by many as it decreases power consumption, makes it easier for people to read in low light and it reduces eye strain. Many also prefer dark mode to light mode as an aesthetic choice. However, adapting your designs for Dark Mode is more than inverting the shades.

Dark Mode Colors

When choosing dark mode colors, use dark shades for distant elements, and light shades for closer elements as distant elements receive less light compared to the elements that appear nearer. The further the object, the darker it appears and settles more into the background.

Gradients - Figma Tutorial

Working with gradients on Figma

Gradients enable your design to leave a better impression compared to solid colors. These are mainly used for buttons and backgrounds but you can also use them for text layers. There are several types of gradients. In this tutorial, we'll add a linear gradient.

Creating Backgrounds - Figma Tutorial

Design backgrounds in Figma

Backgrounds are the layout elements that are seen and scanned first, thus bringing attention. Having a background adds more personality and sets the mood of your design, making things look more attractive. It also elevates focus on the important content by bringing depth to your design and giving users a pleasant experience.

Types of Backgrounds

There are many options available when it comes to backgrounds. It depends on your design what you want to communicate to the viewer. As you can see in the example image, different backgrounds are being used, and all convey different emotions.

  • 3D: Brings a sense of Playfulness
  • Illustration: Perfect for Storytelling
  • Abstract Patterns: Helps in setting the vibe
  • Photography: To Showcase your Products

Blending Modes - Figma Tutorial

Learn to interesting techniques with Blending Modes

Blend Modes let you determine how two layers are blended with each other. This process includes taking pixels from each layer and applying calculations to them. Each pixel has a numerical representation. There are many ways to blend two layers.

Dynamic

The interesting use of Blend modes is that it makes your designs dynamic. As you can see in the example image, the changed background color does not affect the waves below. This eliminates all the nuisances caused when there's a change in themes. Keep everything consistent!

Blending Options

Figma offers 16 blend modes that are divided into 5 categories - Normal, Darken, Lighten, Contrast, Comparative and Composite Modes.

Alignment, Distribution, & Tidy up Properties - Figma Tutorial

Exploring Alignment and Tidy up in Figma

In this following tutorial, we'll learn to use different Alignment, Distribution, and Tidy up Properties in Figma

Alignment

Alignment properties are located at the top of the properties panel. There are 6 alignments, and 3 distribution properties are available in Figma. The 6 alignment properties are:

  1. Align Left
  2. Align Horizontal Center
  3. Align Right
  4. Align Top
  5. Align Vertical Center
  6. Align Bottom

And the 3 Distribution properties are:

  1. Tidy Up
  2. Distribute Vertical Spacing
  3. Distribute Horizontal Spacing

You can align a single layer to the artboard by selecting the layer and clicking the properties. Or you can align a layer to another layer, or multiple layers by selecting them together and clicking the properties.

Union and Corner Radius - Figma Tutorial

Working on union and corner radius

 

Need any help with the projects?

Subscribe email to get news & updates

Am fined rejoiced drawings so he elegance. Set lose dear upon had two its what seen held she sir how know.

0
Would love your thoughts, please comment.x
()
x