
Learn scalable vector graphics on Figma by drawing Homer Simpson, following along with tools and commands to practice practical vector design, with flexible pacing and a free two-hour course.
Learn to add images on Figma by dragging and dropping a PNG image from your desktop or using the place image option to locate and insert it.
Learn to zoom in and out in Figma using Ctrl/Cmd plus the mouse wheel, and use the zoom menu or manual input to set a specific percentage.
Set up a Figma workspace by creating and naming a frame, placing and locking a reference image, duplicating it with alt drag or copy-paste, and setting opacity to 30.
Learn to use the pen tool for vector drawing in Figma, adjust stroke and corner radius, and group multiple vector pieces into a hair piece for a cohesive illustration.
Learn the difference between the pen tool and the move tool, how to enter vector mode, switch tools, and edit vector objects and handles for precise drawing in Figma.
Draw Homer Simpson's eyes in figma using the pen tool from the right eye, adjust points and handles to shape lines, and reset with escape or undo as you refine.
Draw the left eye in Figma using the pen tool, create points, and drag handles to shape the curve, then zoom in to refine the outlines.
Create an earpiece vector in figma with the pen tool, adjust curves with handles, apply rounded stroke ends, and group and rename the vectors.
Practice drawing Homer Simpson's mouth in Figma with the pen tool to shape bezier curves, adjust points and handles, zoom, and apply the end point to create a rounded smile.
Add color to the mouth in Figma's vector mode by using the paint bucket tool to fill areas, select colors from the palette, and apply black or other colors.
In scalable vector graphics on Figma part 1, learn to create eye dots with the ellipse tool, fill black, duplicate, group as eyes, and apply white with the bucket tool.
Draw the head in Figma by starting at the earpiece, closing loops to apply color, and use the pen tool, bucket tool, and layers to place hair on top.
Organize and group layers for the head, then prepare the body by drawing the shirt and hands, while hiding and locking background elements.
Select the pen tool to place and bend points, adjust bezier handles for smooth curves, set stroke size, switch to vector mode, and position the polo shirt's shoulders and hands.
Learn to use the pen tool in Figma to build the right hand and shoulder. Adjust points and curves, apply rounded edges, and color fill the vector.
Finalize a vector illustration in Figma by using the pen and bucket tools to add fills, adjust shapes, and manage layer visibility for a cohesive character.
The lecture guides creating legs and shoes in a vector illustration using the pen tool, handles, and color fills in Figma, culminating in a Homer Simpson figure.
Change colors quickly in Figma using the color picker and selection colors, unify colors across a frame, group layers, and scale vectors for crisp scalable graphics.
Export your Figma creation by selecting a frame, body, or head (or all elements), choosing PNG, JPEG, or SVG, and exporting either as a single frame or as separate PNGs.
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.