Udemy

Scalable Vector Graphics on Figma - Part 1

Name: Scalable Vector Graphics on Figma - Part 1
Availability: InStock
Rating: 4.5 (62 reviews)

4.5(62)1k studentsBEGINNER

Korshub's take

Learning vector graphics by drawing Homer Simpson

Vector work is often treated as a specialty reserved for illustrators, something this course pushes back on directly, arguing it's essential for UX/UI and web design more broadly. Rather than starting with abstract theory, it teaches the fundamentals of vector graphics in Figma through a single hands-on project: drawing Homer Simpson.

Along the way it explains what SVG actually is, a format that defines shapes with math instead of pixels, so images scale and resize without losing quality, stay resolution-independent, and can be manipulated or animated with CSS and JavaScript.

Who it's for

Beginners, including designers who've avoided vector tools until now; each step is explained in detail before moving to the next.

Key takeaways

Core vector graphics concepts and tools inside Figma
A repeatable approach for sketching any object as a vector
What makes SVG different from raster formats like JPEG or PNG

About this course

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.

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.