3D Illustrations

Add to favorites

Enhancing Project Design with 3D Illustrations

Figma Handbook

The Figma Design Tool

0:54

The Editor in Figma

1:17

Basic Tools

2:14

Position, Size, Rotation, & Corner Radius properties

1:27

Color Styles

1:13

Masks

1:47

Dark Mode with Selection Colors

1:17

Gradients

1:36

Creating Backgrounds

2:37

Blending Modes

2:02

Alignment, Distribution, & Tidy up Properties

1:24

Union and Corner Radius

2:53

Shadow and Blur Effects

1:48

Using Images

2:00

Fill, Stroke, & Advanced Stroke

3:21

Text Properties and Styles

1:37

Google Fonts and Custom Fonts

1:13

Accessibility

Responsive Design

3:07

Constraints

1:11

Layout Grid

2:00

Auto Layout in Figma

8:17

Vector Mode

0:55

Vector Network

1:19

Perspective Mockups

2:00

3D Mockups

1:20

Using Illustrations in Design

2:03

Booleans

2:24

Icon Design

1:48

Components

1:50

Team Library

2:14

Creating Confetti

1:59

Looper Shape Duplication

1:41

Apple Watch Ring

2:23

Exporting Assets in Figma

1:39

Exporting CSS Code

1:04

Designing with Data

1:57

Prototyping

2:25

Version History

1:25

Multiplayer, Commenting, & Previews

1:36

Variants

5:39

Interactive Components

5:40

UIKits

4:47

Plugins

5:47

Blob Background

4:45

Wave Background

6:46

3D Shapes

12:27

Parallax Prototyping in Figma

7:52

3D UI Perspective Design

7:16

Glass Icon

9:16

Crystal Ball with Water Effect Animation

12:54

Design and code a line animation with letters

29:38

Futuristic line animation

19:30

Import from Adobe Illustrator to Figma

3:16

Create an Illustration in Figma

4:07

Remove BG plugin

2:27

Circular Lines Advanced Stroke

3:27

Publish Design to Community

4:49

Turn Image into Vector

3:11

Prototype with Scrolling Content

3:42

Hug Content and Resizing

2:04

Advanced Auto Layout

4:13

Circular Text on Path

5:57

Mirror Prototype

2:39

Sticky Nav and Tab Bar Prototyping

4:37

Video in Figma Prototype

5:04

Mesh Gradients

3:03

Figma Sections

3:53

Unsplash Stock Photos

2:07

Angular Gradient

4:17

Radial Gradient

5:11

After Delay Animation Prototyping

3:14

UI Wireframe

2:53

Lottie Animations

3:55

Design Sign Up Screen

6:42

Content Generator

2:53

Design Lint Missing Style

2:36

Slice Tool

2:04

Adaptive Layout with Breakpoints

6:25

Chart Designs

4:51

Design Modals

4:08

Batch Rename

2:35

Design Onboarding Screen

2:28

Animated Button Prototype

3:06

Smart Selection

2:15

Component Properties

4:37

RedLines

2:54

Interactive Calendar

7:46

Measure Distance

3:33

Variable Fonts

2:51

AI Plugins

6:16

Text Animation

3:11

Resize Layers

2:36

View Layer Outlines

2:23

Prototype Connections

2:38

Export SVG Files and Code

2:47

3D Illustrations

4:14

UI Placeholder

2:38

Dark Mode Switch

4:23

100

Dev Mode

6:26

101

Dark Mode Variables

10:04

102

Figma to HTML

10:51

3D Illustrations image 1

About 3D Design

One of the biggest design trends of the past year has been 3D illustration. By using 3D design, designers are able to take their 2D ideas and bring them to life in three dimensions, creating a visual style that is suitable for a variety of applications, including graphic design, website design, digital interfaces, and social media assets.

3D Illustrations image 2

What is a 3D Illustration?

A 3D illustration is a digital representation of an object or scene created using 3D software. It is typically created using 3D modelling techniques, which involve building a digital model of the object or scene using polygons, vertices, and other 3D shapes. 3D illustrations can be static or animated, and they can be used for a variety of purposes, including visual effects in film and video games, product visualization and design, architectural and interior design, and more. 3D illustrations are often used to create realistic representations of objects or spaces that can be difficult or impractical to create in the real world. They can also be used to create abstract or fantastical scenes and objects that would be impossible to create in reality.

Image by Freepik

Types of 3D Illustrations

Each type of illustration is created using a specific technique and style, and the range of techniques and styles can vary significantly. It is important to note that the technique used plays a significant role in determining the type of illustration.

Architectural Visualization

This type of 3D illustration is used to create realistic 3D models of buildings, interiors, and landscapes. It is commonly used in the design and construction industry to help visualize projects before they are built.

Character Design

This type of 3D illustration involves creating 3D models and animations of characters for use in films, video games, and other media.

Product Visualization

This type of 3D illustration is used to create realistic 3D models of products for marketing and sales purposes.

Medical Illustration

This type of 3D illustration is used to create 3D models and animations of the human body and various medical procedures for use in education and training. You will see this kind of 3D illustration on an Online Anatomy course or website.

Scientific Illustration

This type of 3D illustration is used to create 3D models and animations of scientific concepts and phenomena for use in education and research.

Concept Art

This type of 3D illustration is used to create conceptual designs and prototypes for products, characters, and environments. It is commonly used in the entertainment industry to help visualize ideas before they are fully developed.

3D Illustrations Resources

Here are some valuable resources to help you create unique designs, including a website, Figma file and plugin.

Figma Community

If you're looking for high-quality 3D design assets, the Figma Community is a great resource to check out. For free, a wide selection of 3D files is available, including icons, avatars, and full-fledged characters that you can download and use any of these in your web and app UI to design uniquely. 3D illustrations can add value to your projects, particularly if you want to create something visually impressive.

Freepik

Freepik is a website that offers a wide range of graphic resources such as illustrations, vector art, icons, PSD files, and photos, and it is one of the top 3D websites. The website's original goal was to provide graphic designers with access to high-quality graphic resources for free. is a website that offers a wide range of graphic resources such as illustrations, vector art, icons, PSD files, and photos and is one of the top 3D websites. The website is known for its high-quality graphics and its focus on providing resources for free or at a low cost.

Saly by Alzea Arafat

SALY is an excellent pack of illustrations that can enhance any project. It was created by Alzea Arafat in 2021 and quickly gained popularity, with over 8,000 duplicates in its first month of release. The collection is regularly updated by the creator and currently includes around 30 illustrations with vibrant colors and unique personalities. You can easily duplicate the collection in Figma and use it for your personal projects.

Illustration by Icons 8

Icon8 also offers a collection of human illustrations that are available for free download and use in online projects. These illustrations are divided into two styles: "Casual Life" and "Business Style." The Business Style collection includes characters in formal attire with a range of poses, some featuring individuals and others featuring groups. The Casual Life collection includes characters in everyday wear with relaxed poses. With such a diverse and thoughtful resource collection, you are sure to find a perfect match for any project you are working on.

3D Objects by Shapefest

ShapeFest, created by Joseph Angelo Todaro, is a massive library of free 3D objects that can be used for various design projects. The collection offers a wide range of options, and you can download the images in high-resolution PNG format for use in both personal and commercial projects.

Nikuu by Paperpillar

Nikuu is a free illustration pack featuring 3D characters and items that can be used to create 3D illustration scenes for UI UX projects, apps, and more. These vibrant and trendy graphics are available as a Figma file, which you can easily copy and paste into your Figma files directory.

3dicons by Vijay Verma

3dicons is a collection of high-quality, open-source 3D icons that have been designed in Blender and made available to the public for free. These icons are licensed under the Creative Commons CC0 license, which means that they can be used freely for personal and commercial projects, and can be modified, shared, and redistributed without any restrictions. This resource is meant to help designers and content creators create beautiful and effective designs more efficiently.

Vectary-3D Plugin

The Vectary-3D plugin for Figma allows you to add a third dimension to your 2D illustrations. You can easily insert your Figma design into a 3D mockup or create your own custom 3D elements. It also provides the option to set your desired perspective in 3D and position it in the scene with just one click.

Create 3D Shape

We will cover some basics of creating a 3D shape using shape, gradient colour and inner shadow. Alternatively, you can use the Vectary-3D plugin to create 3D shapes directly in Figma. If you want to learn how to create a beautiful 3D illustration, you can watch my tutorial about how to create 3D Shapes.

Shape: The first step in creating a 3D shape is to create a geometric shape like squares, circles, and triangles using the Shape tool. Let’s use an ellipse and create a circle of 200 by 200.
Gradient: Once the shape have been created, the second step is to fill the shape with a gradient color. We're going to use Linear and choose two colors, and we're going to place the color direction diagonally.
Lighting: Add radial on top of your color gradient, the starting color is white with 100% opacity, and the ending color is white with 0% opacity. Place the color direction in the diagonal lighting direction. Lighting is an important aspect of 3D shape, it helps to create the illusion of depth and realism in a scene.
Shadow: To create realistic lighting, 3D artists will use a combination of direct and indirect light sources and shadows and reflections. Create a rectangle of 194 by 54, then go to edit object to create a trapeze, fill with linear with the black but with different opacity. The starting color is 100% opacity, and the second is 0%. The final step is to add effect, set 50 to layer blur.

Conclusion

I hope this tutorial provides you with the knowledge and resources you need to master the art of 3D illustration. By using 3D illustrations, you can create a more immersive and engaging experience for your audience, helping them to better understand and connect with your designs.

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

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

BACK TO

Export SVG Files and Code

Download source files

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

Design template

Source code for all sections

Video files, ePub and subtitles

Videos

Assets

ePub

Subtitles

The Figma Design Tool

Getting started with Figma as your design tool

0:54

The Editor in Figma

Getting familiar with the Figma interface

1:17

Basic Tools

Getting to know the tool panel in Figma

2:14

Position, Size, Rotation, & Corner Radius properties

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

1:27

Color Styles

Working with color styles on Figma

1:13

Masks

Using masks to clip content and compose your design in Figma

1:47

Dark Mode with Selection Colors

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

1:17

Gradients

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

1:36

Creating Backgrounds

Design backgrounds in Figma

2:37

Blending Modes

Learn to interesting techniques with Blending Modes

2:02

Alignment, Distribution, & Tidy up Properties

Exploring Alignment and Tidy up in Figma

1:24

Union and Corner Radius

Working on union and corner radius

2:53

Shadow and Blur Effects

Exploring ways to incorporate shadows and blur to your design

1:48

Using Images

Steps on how to use images in Figma

2:00

Fill, Stroke, & Advanced Stroke

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

3:21

Text Properties and Styles

Explore and learn about Figma's type properties

1:37

Google Fonts and Custom Fonts

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

1:13

Accessibility

Exploring a11y in design

Responsive Design

Designing responsive layouts in Figma using Constraints and Auto Layout

3:07

Constraints

Working with Constraints in Figma

1:11

Layout Grid

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

2:00

Auto Layout in Figma

Working with Auto Layout for responsive design

8:17

Vector Mode

Exploring vector mode to edit and customize vector shapes

0:55

Vector Network

Learn to use vector networks and design icons

1:19

Perspective Mockups

Use realistic mockups to present your designs

2:00

3D Mockups

Adding 3D mockups to design

1:20

Using Illustrations in Design

Incorporate illustrations into your design

2:03

Booleans

Using booleans to design icons

2:24

Icon Design

Learn how to design icons using the tools provided by Figma

1:48

Components

Make your design more reusable by using components.

1:50

Team Library

Publishing your design styles and components

2:14

Creating Confetti

Working with Confetti plugin

1:59

Looper Shape Duplication

Working with Looper Figma plugin

1:41

Apple Watch Ring

Creating apple watch ring in Figma

2:23

Exporting Assets in Figma

Learn about exporting assets in Figma for implementation

1:39

Exporting CSS Code

Working with CSS code on Figma

1:04

Designing with Data

Plugins to help you design with real content

1:57

Prototyping

Quickly create an entire flow for your app design in Figma

2:25

Version History

Working with version history on Figma

1:25

Multiplayer, Commenting, & Previews

Learn about collaboration & sharing with Figma

1:36

Variants

Combining similar components into variants

5:39

Interactive Components

Creating reusable interactions using interactive components

5:40

UIKits

Designing using UIKits in Figma

4:47

Plugins

Exploring and Designing using Plugins in Figma

5:47

Blob Background

Create a simple blob background in Figma

4:45

Wave Background

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

6:46

3D Shapes

Create 3D-looking shapes using vector tools in Figma

12:27

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

3D UI Perspective Design

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

7:16

Glass Icon

Learn how to design a creative icon using background blur

9:16

Crystal Ball with Water Effect Animation

Animate waves in a crystal ball using the prototyping tool

12:54

Design and code a line animation with letters

Learn how to animate lines using CSS in CodeSandbox

29:38

Futuristic line animation

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

19:30

Import from Adobe Illustrator to Figma

Best practices for importing an Illustrator file to Figma

3:16

Create an Illustration in Figma

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

4:07

Remove BG plugin

Remove an image background with the RemoveBG plugin in Figma

2:27

Circular Lines Advanced Stroke

Design a camera controller with clock lines in Figma

3:27

Publish Design to Community

Publishing design files in the Figma Community

4:49

Turn Image into Vector

Convert an image into vector in Figma

3:11

Prototype with Scrolling Content

Add vertical and horizontal scrolling on your Figma Prototype

3:42

Hug Content and Resizing

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

2:04

Advanced Auto Layout

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

4:13

Circular Text on Path

Make a circular text on path using ARC plugin in Figma

5:57

Mirror Prototype

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

2:39

Sticky Nav and Tab Bar Prototyping

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

4:37

Video in Figma Prototype

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

5:04

Mesh Gradients

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

3:03

Figma Sections

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

3:53

Unsplash Stock Photos

Insert beautiful images from Unsplash straight into your designs

2:07

Angular Gradient

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

4:17

Radial Gradient

Creating vibrant radial gradients in Figma for a professional design look

5:11

After Delay Animation Prototyping

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

3:14

UI Wireframe

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

2:53

Lottie Animations

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

3:55

Design Sign Up Screen

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

6:42

Content Generator

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

2:53

Design Lint Missing Style

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

2:36

Slice Tool

Export your designs using the slice tool in Figma

2:04

Adaptive Layout with Breakpoints

Creating flexible and responsive web designs with adaptive layout and breakpoints

6:25

Chart Designs

Exploring the endless possibilities of chart designs for data visualization

4:51

Design Modals

How to design modals that enhance user interfaces

4:08

Batch Rename

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

2:35

Design Onboarding Screen

Creating an engaging experience to drive user retention with onboarding design

2:28

Animated Button Prototype

How to create a dynamic interactive button

3:06

Smart Selection

Arrange layers more efficiently with smart selection

2:15

Component Properties

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

4:37

RedLines

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

2:54

Interactive Calendar

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

7:46

Measure Distance

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

3:33

Variable Fonts

Learn how to replace static fonts with the variable font version

2:51

AI Plugins

Enhancing design efficiency by exploring advanced AI tools in Figma to optimize your workflow

6:16

Text Animation

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

3:11

Resize Layers

Resize layers using the scale tool

2:36

View Layer Outlines

Understanding and organizing your design with view layer outlines

2:23

Prototype Connections

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

2:38

Export SVG Files and Code

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

2:47

3D Illustrations

Enhancing Project Design with 3D Illustrations

4:14

UI Placeholder

Insert a temporary element to visualize the design

2:38

Dark Mode Switch

Transform your design into dark mode in just one click

4:23

100

Dev Mode

Explore Figma's Dev Mode, your essential tool for simplifying design-to-code workflows

6:26

101

Dark Mode Variables

Learn how Figma's dark mode variable feature enhances design by allowing seamless transitions between themes

10:04

102

Figma to HTML

From Figma to Web: Simplifying HTML Export with Anima

10:51

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.

Sourasith Phomhome

UI Designer

Designer at Design+Code

19 courses - 74 hours

Design Multiple Apps with Figma and AI

In this course, you’ll learn to design multiple apps using Figma and AI-powered tools, tackling a variety of real-world UI challenges. Each week, a new episode will guide you through a different design, helping you master essential UI/UX principles and workflows

4 hrs

SwiftUI Fundamentals Handbook

A comprehensive guide to mastering Swift programming fundamentals, designed for aspiring iOS developers. This handbook provides a structured approach to learning Swift's core concepts, from basic syntax to advanced programming patterns. Through carefully sequenced chapters, readers will progress from essential programming concepts to object-oriented principles, building a solid foundation for SwiftUI development. Each topic includes practical examples and clear explanations, ensuring a thorough understanding of Swift's capabilities. This handbook serves as both a learning resource and a reference guide, covering fundamental concepts required for modern iOS development. Topics are presented in a logical progression, allowing readers to build their knowledge systematically while gaining practical programming skills.

1 hrs

Design and Code User Interfaces with Galileo and Claude AI

In this course, you’ll learn how to use AI tools to make UI/UX design faster and more efficient. We’ll start with Galileo AI to create basic designs, providing a solid foundation for your ideas. Next, we’ll refine these designs in Figma to match your personal style, and finally, we’ll use Claude AI to turn them into working code—eliminating the need for traditional prototyping.

4 hrs

Build a React Native app with Claude AI

This comprehensive course explores the integration of cutting-edge AI tools into the React Native development workflow, revolutionizing the approach to mobile application creation. Participants will learn to leverage AI-powered platforms such as Claude and Locofy to expedite coding processes, enhance problem-solving capabilities, and optimize productivity.

13 hrs

Design and Prototype for iOS 18

Design and Prototype for iOS 18 is an immersive course that equips you with the skills to create stunning, user-friendly mobile applications. From mastering Figma to understanding iOS 18's latest design principles, you'll learn to craft two real-world apps - a Car Control interface and an AI assistant.

3 hrs

Master Responsive Layouts in Figma

Creating responsive layouts is a must-have skill for any UI/UX designer. With so many different devices and screen sizes, designing interfaces that look great and work well on all platforms is necessary. Mastering this skill will make you stand out in the field. In this course, we'll start from scratch to create this beautiful design using Figma. You'll learn how to make layouts that are easy to use and work well on any device. We'll cover key concepts and tools to help you master responsive design in Figma.

2 hrs

UI UX Design with Mobbin and Figma

Mobbin is a powerful tool for UI/UX designers seeking inspiration and innovative design solutions. This platform offers a vast collection of real-world mobile app designs, providing a treasure trove of UI elements and layouts.

2 hrs

3D UI Interactive Web Design with Spline

Learn to create 3D designs and UI interactions such as 3D icons, UI animations, components, variables, screen resize, scrolling interactions, as well as exporting, optimizing, and publishing your 3D assets on websites

3 hrs

Design and Prototype for iOS 17 in Figma

Crafting engaging experiences for iOS 17 and visionOS using the Figma design tool. Learn about Figma's new prototyping features, Dev Mode, variables and auto layout.

6 hrs

Design and Prototype Apps with Midjourney

A comprehensive course on transforming Midjourney concepts into interactive prototypes using essential design techniques and AI tools

8 hrs

iOS Design with Midjourney and Figma

Learn the fundamentals of App UI design and master the art of creating beautiful and intuitive user interfaces for mobile applications

1 hrs

UI Design for iOS, Android and Web in Sketch

Create a UI design from scratch using Smart Layout, Components, Prototyping in Sketch app

1 hrs

UI Design a Camera App in Figma

Design a dark, vibrant and curvy app design from scratch in Figma. Design glass icons, lens strokes and realistic buttons.

1 hrs

UI Design for iOS 16 in Sketch

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

3 hrs

Prototyping in Figma

Learn the basics of prototyping in Figma by creating interactive flows from custom designs

1 hrs

UI Design Quick Websites in Figma

Learn how to design a portfolio web UI from scratch in Figma

1 hrs

UI Design Android Apps in Figma

Design Android application UIs from scratch using various tricks and techniques in Figma

2 hrs

UI Design Quick Apps in Figma

Design application UIs from scratch using various tricks and techniques in Figma

12 hrs

Figma Handbook

A comprehensive guide to the best tips and tricks in Figma

6 hrs