by
Lessons:7Length:38 minutes
Using figma for svg design 400x277
  • Overview
  • Transcript

3.1 Wrapping Up

Well done—you’ve just completed “Figma for SVG”! Let’s have a quick recap of everything you’ve learned.

3.1 Wrapping Up

Hey, welcome to the final video in Figma for SVG. This video is just gonna serve as a summary for you. You can come back and listen to this video again any time you just need a primer or a reminder of all the things that you need to know to use Figma for SVG work. All right, so first up, your drawing tools include shape tools and path tools. The shape tools have a bunch of presets and options, while the path tools allow you to create freeform shapes, however, when you export the SVG only the rectangle, ellipse and line are going to correspond with SVG basic shape elements. The star, polygon, and arrow, are all gonna export as path elements. Once you've drawn your shapes, double click them, or click the Edit Object button to go in and start working with the nodes. When you wanna change the behavior of nodes in Figma, you don't change the node type like you do in other programs, instead you change the mirroring settings and that controls how the drag handles will come off the nodes relate to one another rather than our focus being on the node itself. When you want to add a node, click on the middle of a segment. When you wanna delete it, hit either Backspace or Shift, Backspace to delete the node but keep the shape closed. Use the curve tool to change the curvature of a segment. Use the bucket tool to toggle fills on and off. Take advantage of Figma's vector network functionality to have as many segments coming off one node as you like. And use Alt drag to duplicate either a segment or a node. Apply fills and strokes to an object over on the right side of the interface, you can have multiple fills and multiple strokes. To use gradient fills and strokes jump into the color picker and choose the type of gradient you want in there. There's no gradient tool so don't try to look for that on the interface, just open up the color picker and then that will let you access your gradients in there. When you come to exporting SVG, if you want to export directly to an SVG file, then you'll need to make a selection in the document and create the SVG export settings for that section, or you can copy the SVG code for that section either from the file menu or by right-clicking, then you'll have that code ready to be pasted into whatever project you're working on. There's some things that you can do in Figma will be re-created perfectly in SVG and some things won't be. As for what will be recreated perfectly in SVG, linear and radial gradients work perfectly but angular and diamond gradients don't, they just show up as a radial gradient. Multiple fills and strokes also work perfectly. In the Effects category, you can use inner shadows and drop shadows. You can use the layer blur effect, but you cannot use the background blur effect. And you can use any of the blending mode options and that will be recreated perfectly in your SVG. All right, so that wraps us up. We've covered all the most important things that you need to know to get started creating vectors in Figma, that you can then use as SVGs in your web design projects. Thank you so much for taking this course and I will see you in the next one.

Back to the top