Design+Code logo

Quick links

No results found

Suggested search

Figma Handbook

99 sections - 4 hours of video

icon

Add to favorites

icon

Notify me

A comprehensive guide to the best tips and tricks in Figma

Instructor avatar

Taught by Meng To

Purchase includes access to 50+ courses, 320+ premium tutorials, 300+ hours of videos, source files and certificates.

99 topics

All techniques are explained step-by-step, in a beginner-friendly format so that you can easily follow in a cohesive way.

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

Using masks to clip content and compose your design 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

We'll walk through all the different ways to use gradients in your work, as well as techniques when creating them

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

Explore the differences between Google Fonts and custom fonts for your website

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

8:17

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

45

Blob Background

Create a simple blob background in Figma

4:45

46

Wave Background

Create a wave design in Figma using the Bend tool and the Wave plugin

6:46

47

3D Shapes

Create 3D-looking shapes using vector tools in Figma

12:27

48

Parallax Prototyping in Figma

Learn how to create a parallax scrolling animation technique where the background and the foreground layers move at different speed

7:52

49

3D UI Perspective Design

Transforming your user interface with the power of three-dimensional perspective

7:16

50

Glass Icon

Learn how to design a creative icon using background blur

9:16

51

Crystal Ball with Water Effect Animation

Animate waves in a crystal ball using the prototyping tool

12:54

52

Design and code a line animation with letters

Learn how to animate lines using CSS in CodeSandbox

29:38

53

Futuristic line animation

Learn how to create a futuristic background with lines using the pen tool in Figma

19:30

54

Import from Adobe Illustrator to Figma

Best practices for importing an Illustrator file to Figma

3:16

55

Create an Illustration in Figma

Use the vector tool in Figma to create an illustration from scratch

4:07

56

Remove BG plugin

Remove an image background with the RemoveBG plugin in Figma

2:27

57

Circular Lines Advanced Stroke

Design a camera controller with clock lines in Figma

3:27

58

Publish Design to Community

Publishing design files in the Figma Community

4:49

59

Turn Image into Vector

Convert an image into vector in Figma

3:11

60

Prototype with Scrolling Content

Add vertical and horizontal scrolling on your Figma Prototype

3:42

61

Hug Content and Resizing

Learn how to choose the right resizing options including hug content, fixed width or height, fill container and text truncation

62

Advanced Auto Layout

Learn how to use spacing mode, canvas stacking, text baseline alignment, stroke values in advanced layout

4:13

63

Circular Text on Path

Make a circular text on path using ARC plugin in Figma

5:57

64

Mirror Prototype

View your prototypes on your mobile device using the Figma mobile app

2:39

65

Sticky Nav and Tab Bar Prototyping

How to fix the position with sticky Nav Bar and Tab Bar

4:37

66

Video in Figma Prototype

Apply a video as a fill using any vector network on your prototype

67

Mesh Gradients

Create beautiful and wave shaped gradients using shapes or the mesh gradient plugin in Figma

3:03

68

Figma Sections

Use sections in Figma to organize designs better and make it easier for collaboration

69

Unsplash Stock Photos

Insert beautiful images from Unsplash straight into your designs

2:07

70

Angular Gradient

Step-by-step guide to creating and customizing an angular gradient in Figma

4:17

71

Radial Gradient

Creating vibrant radial gradients in Figma for a professional design look

5:11

72

After Delay Animation Prototyping

The easiest way to animate anything on the web using simple after delay interaction in Figma

73

UI Wireframe

Use various tools and plugins to create a wireframe that helps you easily plan and design your user interface

2:53

74

Lottie Animations

Step-by-step guide to using Lottie animations in Figma to improve collaboration and enhance your designs

3:55

75

Design Sign Up Screen

Easily design a sign up screen in Figma for your app or website

6:42

76

Content Generator

Useful plugins that can help designers design with real content and save time

2:53

77

Design Lint Missing Style

Save time finding and fixing errors in your Figma designs with Design Lint

2:36

78

Slice Tool

Export your designs using the slice tool in Figma

79

Adaptive Layout with Breakpoints

Creating flexible and responsive web designs with adaptive layout and breakpoints

80

Chart Designs

Exploring the endless possibilities of chart designs for data visualization

81

Design Modals

How to design modals that enhance user interfaces

82

Batch Rename

Quickly and easily rename multiple files in Figma using the Batch Rename plugin

83

Design Onboarding Screen

Creating an engaging experience to drive user retention with onboarding design

84

Animated Button Prototype

How to create a dynamic interactive button

85

Smart Selection

Arrange layers more efficiently with smart selection

86

Component Properties

Reduce the number of variants in your design system by using component properties and editing them directly in the properties panel

87

RedLines

Measure distances and annotate your Figma designs before handoff with Redlines Figma plugin

88

Interactive Calendar

Learn how to use interactive components in Figma to create an interactive calendar with hover and clicked-on states

89

Measure Distance

Place your design elements in the right place with measure distance in Figma

90

Variable Fonts

Learn how to replace static fonts with the variable font version

91

AI Plugins

Best AI Plugins for Figma to help designers create better graphics

92

Text Animation

Create an impressive motion text animation using interactive component and after delay

93

Resize Layers

Resize layers using the scale tool

94

View Layer Outlines

Understanding and organizing your design with view layer outlines

95

Prototype Connections

Configure your prototypes so that anyone with view access can see the interactions

96

Export SVG Files and Code

Exporting your artwork as an SVG file allows you to easily embed it in your HTML and CSS code

97

3D Illustrations

Using 3D Illustration to Enhance Your Project Design

98

UI Placeholder

Insert a temporary element to visualize the design

99

Dark Mode Switch

Transform your design into dark mode in just one click

Learn by doing

What you'll build

Redesign your existing app or start from scratch as you follow along and learn the techniques.

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

What's included?

All courses come with downloadable files to help you design, code and follow the course offline.

300+ hours of video

300+ hours of video

Subtitles in English, Chinese

Subtitles in English, Chinese

Source files, ePub

Source files, ePub

UI, icons, illustrations

UI, icons, illustrations

Premium, support chat

Premium, support chat

Source files

Source files

Design templates and source code files are included to help you learn.

ePub files

ePub files

Read offline using Books for iOS, Mac or other apps that can read this format.

Video files

Video files

Download the videos so that you can watch later or offline using any video player.

Meet the instructors

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

Meng To

I design, code and write

Meng To is the author of Design+Code. Meng started off his career as a self-taught designer from Montreal and eventually traveled around the world for 2 years as his US VISA was denied. During his travels, he wrote a book which now has 35,000 readers.

icon

35 courses - 165 hours

course logo

Master No-Code Web Design with Framer

In this free Framer course, you'll learn to create modern, user-friendly interfaces. Start with dark mode and glass designs, then move from Figma to Framer, using vectors and auto layout for responsive websites. Add animations, interactive buttons, and custom components with code. Finally, you'll craft a design system suitable for teamwork or solo projects, all in a straightforward and practical approach.

4 hrs

course logo

Build SwiftUI Apps for iOS 17

In this course, we’ll be exploring the fresh and exciting features of SwiftUI 5! As we craft a variety of iOS apps from the ground up, we'll delve deep into the treasure trove that is SwiftUI's user interface, interactions, and animations.

4 hrs

course logo

Build Beautiful Apps with GPT-4 and Midjourney

Design and develop apps using GPT-4 and Midjourney with prompts for SwiftUI, React, CSS, app concepts, icons, and copywriting

4 hrs

course logo

Build SwiftUI apps for iOS 16

Create animated and interactive apps using new iOS 16 techniques using SwiftUI 4 and Xcode 14

5 hrs

course logo

Build a 3D Site Without Code with Framer

Design and publish a responsive site with 3D animation without writing a single line of code

3 hrs

course logo

Create 3D Site with Spline and React

Design and code a landing page with an interactive 3D asset using Spline and CodeSandbox

1 hrs

course logo

Build an Animated App with Rive and SwiftUI

Design and code an iOS app with Rive animated assets, icon animations, custom layouts and interactions

3 hrs

course logo

Build a SwiftUI app for iOS 15 Part 3

Design and code a SwiftUI 3 app with custom layouts, animations and gestures using Xcode 13, SF Symbols 3, Canvas, Concurrency, Searchable and a whole lot more

4 hrs

course logo

Build a SwiftUI app for iOS 15 Part 2

Design and code a SwiftUI 3 app with custom layouts, animations and gestures using Xcode 13, SF Symbols 3, Canvas, Concurrency, Searchable and a whole lot more

3 hrs

course logo

Build a SwiftUI app for iOS 15

Design and code a SwiftUI 3 app with custom layouts, animations and gestures using Xcode 13, SF Symbols 3, Canvas, Concurrency, Searchable and a whole lot more

4 hrs

course logo

React Livestreams

Learn how we can use React Hooks to build web apps using libraries, tools, apis and frameworks

4 hrs

course logo

Design Founder Livestreams

A journey on how we built DesignCode covering product design, management, analytics, revenue and a good dose of learning from our successes and failures

2 hrs

course logo

SwiftUI Advanced Handbook

An extensive series of tutorials covering advanced topics related to SwiftUI, with a main focus on backend and logic to take your SwiftUI skills to the next level

4 hrs

course logo

iOS Design Handbook

A complete guide to designing for iOS 14 with videos, examples and design files

2 hrs

course logo

SwiftUI Handbook

A comprehensive series of tutorials covering Xcode, SwiftUI and all the layout and development techniques

6 hrs

course logo

Build a web app with React Hooks

Learn how we built the new Design+Code site with React Hooks using Gatsby, Netlify, and advanced CSS techniques with Styled Components.

4 hrs

course logo

UI Design Handbook

A comprehensive guide to the best tips and tricks for UI design. Free tutorials for learning user interface design.

2 hrs

course logo

Figma Handbook

A comprehensive guide to the best tips and tricks in Figma

4 hrs

course logo

SwiftUI for iOS 14

Build a multi-platform app from scratch using the new techniques in iOS 14. We'll use the Sidebar and Lazy Grids to make the layout adaptive for iOS, iPadOS, macOS Big Sur and we'll learn the new Matched Geometry Effect to create beautiful transitions between screens without the complexity. This course is beginner-friendly and is taught step-by-step in a video format.

3 hrs

course logo

SwiftUI Livestreams

This is a compilation of the SwiftUI live streams hosted by Meng. Over there he talks and teaches how to use design systems, typography, navigation, iOS 14 Design, prototyping, animation and Developer Handoff.

19 hrs

course logo

UI Design Livestreams

This is a compilation of the UI live streams hosted by Meng. Over there he talks and teaches how to use design systems, typography, navigation, iOS 14 Design, prototyping, animation and Developer Handoff.

26 hrs

course logo

UI Design for Developers

In this course we'll learn how to use design systems, set up break points, typography, spacing, navigation, size rules for adapting to the iPad, mobile and web versions, and different techniques that translate well from design to code.

3 hrs

course logo

Build an app with SwiftUI Part 3

This course was written for designers and developers who are passionate about design and about building real apps for iOS, iPadOS, macOS, tvOS and watchOS. SwiftUI works across all of those platforms. While the code is not a one-size-fits-all, the controls and techniques involved can apply to all platforms. It is beginner-friendly, but it is also packed with design tricks and cool workflows about building the best UIs and interactions.

4 hrs

course logo

Build an app with SwiftUI Part 2

This course was written for designers and developers who are passionate about design and about building real apps for iOS, iPadOS, macOS, tvOS and watchOS. SwiftUI works across all of those platforms. While the code is not a one-size-fits-all, the controls and techniques involved can apply to all platforms. It is beginner-friendly, but it is also packed with design tricks and cool workflows about building the best UIs and interactions.

4 hrs

course logo

Build a full site in Webflow

Webflow is a design tool that can build production-ready experiences without code. You can implement CSS-driven adaptive layouts, build complex interactions and deploy all in one tool. Webflow also comes with a built-in content management system (CMS) and Ecommerce for creating a purchase experience without the need of third-party tools.

3 hrs

course logo

Advanced Prototyping in ProtoPie

ProtoPie is a cross-platform prototyping tool that creates prototypes nearly as powerful as those made with code, with half of the efforts, and zero code. It's perfect for designers who want to quickly experiment with advanced interactions using variables, conditions, sensors and more.

3 hrs

course logo

Build an app with SwiftUI Part 1

This course was written for designers and developers who are passionate about design and about building real apps for iOS, iPadOS, macOS, tvOS and watchOS. SwiftUI works across all of those platforms. While the code is not a one-size-fits-all, the controls and techniques involved can apply to all platforms. It is beginner-friendly, but it is also packed with design tricks and cool workflows about building the best UIs and interactions.

4 hrs

course logo

React Native for Designers Part 2

React Native is a popular Javascript framework that builds on top of React by using native components to create a real mobile app indistinguishable from one made using Xcode or Android Studio. The main difference with native development is that you get to use CSS, hot-reload, Javascript and other familiar techniques that the Web has grown over the past decades. Most importantly, you're building for both iOS and Android using the same codebase.

3 hrs

course logo

React Native for Designers

React Native is a popular Javascript framework that builds on top of React by using native components to create a real mobile app indistinguishable from one made using Xcode or Android Studio. The main difference with native development is that you get to use CSS, hot-reload, Javascript and other familiar techniques that the Web has grown over the past decades. Most importantly, you're building for both iOS and Android using the same codebase.

5 hrs

course logo

Design System in Figma

Learn how to use and design a collaborative and powerful design system in Figma. Design Systems provide a shared library of reusable components and guidelines and that will let you build products much faster

3 hrs

course logo

React for Designers

Learn how to build a modern site using React and the most efficient libraries to get your site/product online. Get familiar with Grid CSS, animations, interactions, dynamic data with Contentful and deploying your site with Netlify.

3 hrs

course logo

Swift Advanced

Learn Swift a robust and intuitive programming language created by Apple for building apps for iOS, Mac, Apple TV and Apple Watch

9 hrs

course logo

Learn Swift

Learn Swift a robust and intuitive programming language created by Apple for building apps for iOS, Mac, Apple TV and Apple Watch

4 hrs

course logo

Learn Sketch

Learn Sketch a design tool entirely vector-based and focused on user interface design

5 hrs

course logo

Learn iOS 11 Design

Learn colors, typography and layout for iOS 8

1 hrs

Flutter

Certificate

Figma

Certificate

SwiftUI

Certificate

UI Design

Certificate

Create a profile

Get certificates

After passing a test, we’ll award you with an online certificate. You can add them to your profile after completing the courses.

Stories

How students learned from our courses

See what people have learned and built by taking courses from Design+Code

Haawa

iOS Developer

Author avatar

Haawa

iOS Developer

Hey MengTo, I launched my iOS/watchOS app RunnerGoal almost completely built with SwiftUI. Thank you for the design lessons and many controls and animation that I used from you SwiftUI course. Man bowing deeply.

Jiani Li

UI/UX Designer/Developer

Author avatar

Jiani Li

UI/UX Designer/Developer

Bucket is now live in @AppAirport! Thanks to @designcodeio by @MengTo, I was able to learn #SwiftUI and built the app in 2 months.

Mogens Egeskov

iOS Developer

Author avatar

Mogens Egeskov

iOS Developer

After months of hard work i'm excited to share my new app "Read" which helps you reach your yearly book goal by telling you how many pages or percent to read daily. You can time your read.

Fabio Sasso

Founder of ABDZ

Author avatar

Fabio Sasso

Founder of ABDZ

My first iOS app is available on the AppStore. I literally didn’t know anything about SwiftUI (still not much) and in probably 4 weeks was able to recreate my android app for iOS. Highly recommend MengTo videos!

Andy Barnes

Product Designer working in London

Easy to follow but incredibly insightful tutorials. Makes learning new software and techniques and real pleasure everyday! Keep up the good work. 👏

Thomas Wang

Creator of digital products and experiences

So many great improvements and re-design. The quizzes and certificates are something that has been in the pipeline for a long time, awesome to see it in the platform for students to show their work!

Trusted by teams

110,000 people

Many startups look for designers who code and developers who design. They use our courses to help train new hires and expand skill sets.