Design+Code logo

Quick links

No results found

Suggested search

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.

Purchase includes access to 30+ courses, 100+ premium tutorials, 120+ hours of videos, source files and certificates.

Learn with videos and source files. Available to Pro subscribers only.

Purchase includes access to 30+ courses, 100+ premium tutorials, 120+ hours of videos, source files and certificates.

Templates and source code

Download source files

Download the videos and assets to refer and learn offline without interuption.

check

Design template

check

Source code for all sections

check

Video files, ePub and subtitles

Browse all downloads

1

The Figma Design Tool

Getting started with Figma as your design tool

0:54

2

The Editor in Figma

Getting familiar with the Figma interface

1:17

3

Basic Tools

Getting to know the tool panel in Figma

2:14

4

Position, Size, Rotation, & Corner Radius properties

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

1:27

5

Color Styles

Working with color styles on Figma

1:13

6

Masks

Learning how to use masks in Figma

1:47

7

Dark Mode with Selection Colors

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

1:17

8

Gradients

Working with gradients on Figma

1:36

9

Creating Backgrounds

Design backgrounds in Figma

2:37

10

Blending Modes

Learn to interesting techniques with Blending Modes

2:02

11

Alignment, Distribution, & Tidy up Properties

Exploring Alignment and Tidy up in Figma

1:24

12

Union and Corner Radius

Working on union and corner radius

2:53

13

Shadow and Blur Effects

Exploring ways to incorporate shadows and blur to your design

1:48

14

Using Images

Steps on how to use images in Figma

2:00

15

Fill, Stroke, & Advanced Stroke

Get to know more about the Fill and various Stroke options in Figma

3:21

16

Text Properties and Styles

Explore and learn about Figma's type properties

1:37

17

Google Fonts and Custom Fonts

Playing with Fonts on design

1:13

18

Accessibility

Exploring a11y in design

19

Responsive Design

Designing responsive layouts in Figma using Constraints and Auto Layout

3:07

20

Constraints

Working with Constraints in Figma

1:11

21

Layout Grid

Learn to design using grids, columns, rows and margins.

2:00

22

Auto Layout in Figma

Working with Auto Layout for responsive design

1:45

23

Vector Mode

Exploring vector mode to edit and customize vector shapes

0:55

24

Vector Network

Learn to use vector networks and design icons

1:19

25

Perspective Mockups

Use realistic mockups to present your designs

2:00

26

3D Mockups

Adding 3D mockups to design

1:20

27

Using Illustrations in Design

Incorporate illustrations into your design

2:03

28

Booleans

Using booleans to design icons

2:24

29

Icon Design

Learn how to design icons using the tools provided by Figma

1:48

30

Components

Make your design more reusable by using components.

1:50

31

Team Library

Publishing your design styles and components

2:14

32

Creating Confetti

Working with Confetti plugin

1:59

33

Looper Shape Duplication

Working with Looper Figma plugin

1:41

34

Apple Watch Ring

Creating apple watch ring in Figma

2:23

35

Exporting Assets in Figma

Learn about exporting assets in Figma for implementation

1:39

36

Exporting CSS Code

Working with CSS code on Figma

1:04

37

Designing with Data

Plugins to help you design with real content

1:57

38

Prototyping

Quickly create an entire flow for your app design in Figma

2:25

39

Version History

Working with version history on Figma

1:25

40

Multiplayer, Commenting, & Previews

Learn about collaboration & sharing with Figma

1:36

41

Variants

Combining similar components into variants

5:39

42

Interactive Components

Creating reusable interactions using interactive components

43

UIKits

Designing using UIKits in Figma

4:47

44

Plugins

Exploring and Designing using Plugins in Figma

5:47

Meet the instructor

We all try to be consistent with our way of teaching step-by-step, providing source files and prioritizing design in our courses.