Skip to main content

Figma UI Design SkillGuide

Chapters

  1. Getting Started
  2. Installation
  3. Tools & Interface
  4. Shapes & Drawing
  5. Images & Masking
  6. Styles & Effects
  7. Layout Grids
  8. Exporting
  9. Components & Variants
  10. Auto Layout
  11. Interactive Prototyping
  12. Style Guides
  13. Design Systems
  14. Figma Interview Questions
  15. Creating Your CV
  16. Setting Up Social Media Profiles
  17. Preparing Your Portfolio

Shapes & Drawing

Figma offers a range of Shape Tools that empower you to create basic geometric forms and building blocks for your UI designs. These tools are essential for crafting buttons, containers, icons, and other foundational elements. Let’s delve into each Shape Tool in detail:

Figma Shapes

  1. Rectangle Tool: The Rectangle Tool allows you to draw rectangles with precise dimensions. You can adjust the width, height, and corner radii of the rectangle to create square corners or rounded corners. This tool is widely used for creating buttons, cards, and frames.
  2. Ellipse Tool: The Ellipse Tool enables you to create perfect circles or ellipses by dragging diagonally. You can modify the width and height independently to achieve elliptical shapes. This tool is great for circular icons, avatars, and decorative elements.
  3. Polygon Tool: The Polygon Tool generates polygons with a specified number of sides. You can create triangles, squares, pentagons, and more. By adjusting the “Sides” setting, you can explore different shapes like stars and irregular polygons.
  4. Line Tool: The Line Tool lets you draw straight lines with customizable thickness and endpoints. Lines are useful for creating dividers, underlines, and other linear elements.
  5. Vector Line Tool: The Vector Line Tool enables you to draw freeform vector paths. This tool is particularly handy for creating custom shapes and intricate designs that can’t be achieved with basic geometric shapes.
  6. Arrow Tool: The Arrow Tool allows you to draw arrows with adjustable head sizes and line thickness. Arrows are valuable for indicating direction, progression, or interaction in your designs.
  7. Slice Tool: The Slice Tool helps you create slices around specific areas of your design. Slices are used for exporting parts of your design separately, such as individual icons or images. This tool is crucial for optimizing assets for development.
  8. Star Tool: The Star Tool generates stars with a specified number of points and inner and outer radii. It’s useful for creating decorative elements, badges, and stylized icons.
Each Shape Tool in Figma comes with properties that you can adjust to customize the appearance of the shape. These properties include fill color, stroke color, stroke thickness, corner radii (for rectangles), and more. By combining and modifying shapes, you can create a wide variety of UI components that form the foundation of your design. Remember that while these tools are essential for creating basic shapes, Figma’s versatility extends beyond them. The Vector Editing Nodes and Boolean Operations tools allow you to refine and manipulate shapes further, enabling you to craft intricate and unique design elements.

Figma Drawing

Figma’s drawing tools provide you with the means to create custom vector shapes and paths, allowing for the creation of unique and intricate design elements. Let’s explore these drawing tools in detail:
  1. Pen Tool: The Pen Tool is a fundamental instrument for creating custom vector shapes and paths. It operates through a series of anchor points connected by control handles, allowing you to define curves and angles with precision. You can click to place anchor points, and by dragging the control handles, you can shape the curves of the path. This tool is essential for crafting icons, illustrations, and complex design elements.
  2. Vector Editing Nodes: After creating a path with the Pen Tool, you can further manipulate it using the Vector Editing Nodes. When you select a path, anchor points appear along with their control handles. You can adjust these anchor points to modify the curvature and shape of the path. This tool gives you granular control over the intricacies of your vector shapes.
  3. Boolean Operations: While not a traditional drawing tool, Boolean Operations are closely related and allow you to combine, subtract, and intersect shapes to create more complex designs. This toolset includes operations like Union (combining shapes), Subtract (subtracting one shape from another), Intersect (finding the overlapping area), and Exclude (removing overlapping portions). By using these operations, you can create intricate patterns and design elements that would be challenging to achieve with basic shapes alone.
  4. Path Editing and Transformation: In addition to the Pen Tool and Vector Editing Nodes, you can manipulate paths using various transformation options. These include scaling (resizing), rotation, flipping, and skewing. These transformations help you refine your designs and achieve the desired visual effects.
  5. Pencil Tool: The Pencil Tool allows you to draw freeform paths by hand, similar to drawing with a pencil on paper. While it may not offer the same level of precision as the Pen Tool, it’s great for creating rough sketches, quick doodles, and organic shapes.
  6. Eraser Tool: The Eraser Tool allows you to remove parts of paths by clicking and dragging over them. It’s useful for refining or modifying the edges of existing shapes or paths.
The drawing tools in Figma provide you with a powerful toolkit for creating and manipulating vector graphics. Whether you’re sketching out initial ideas, refining intricate details, or combining shapes to craft complex designs, these tools give you the creative freedom to bring your vision to life. Remember that practice and experimentation will help you become more proficient in utilizing these tools effectively.