Learn the basics of vector graphics by sketching Homer Simpson with me

What you will learn

The basics of scalable vector graphics on Figma

How to use vector tools on Figma

How to sketch Homer Simpson from start to finish

How to draw any vector object on Figma


While vector graphics might seem challenging to learn, it is essential in UX/UI design and web design in general. I remember delaying my learning or thinking that vector graphics were primarily for illustrators, and as a UX/UI designer, I believed it wasn’t necessary for me. However, once I overcame that hurdle and learned to use vector tools effectively, I discovered that I actually enjoy working with it a lot.

Scalable Vector Graphics on Figma – Part 1

This is a step-by-step course designed for beginners. It aims to gradually introduce the essential tools and concepts, significantly simplifying the learning process. Throughout the course, we will dive into drawing Homer Simpson on Figma, while acquiring a solid foundation in the fundamentals of vector graphics.

Once you complete the training, you will gain the knowledge and skills to sketch any other image or object using the same approach.

Get Instant Notification of New Courses on our Telegram channel.

Remember, that this is a beginner-friendly course. Each and every step will be explained and covered in detail so that you can easily follow along with me.

This training course is free and will remain so. I really hope that you will consider joining, and I look forward to seeing you inside.

What is SVG?

Scalable Vector Graphics (SVG) is a format for displaying two-dimensional vector graphics on the web. Unlike raster images (such as JPEG or PNG), SVGs use mathematical equations to define shapes and lines, allowing them to be scaled and resized without losing quality. They are resolution-independent and can be easily manipulated and animated using CSS and JavaScript. SVGs are widely supported by modern web browsers and are commonly used for icons, illustrations, logos, and interactive graphics.



Introduction – Set Up – Work Files

Adding Images on Figma
Zoom In & Out
Setting Up Figma Workspace

Sketching Homer’s Head

Starting from the Hair
Pen and Move Tool – Vector Mode
Right Eye
Left Eye
Adding Color to the Mouth
Adding Color to the Eyes
Connecting All the Elements Together

Sketching Polo Shirt and Hands

Polo Shirt
Right Hand
Last Touches

Sketching Legs and Shoes

Legs and Shoes
Changing Color – Fast Method

What’s Next

What’s Next