askvity

How do you add custom shapes in Figma?

Published in Figma Shapes Plugin 4 mins read

Adding truly custom shapes in Figma, beyond the basic built-in tools, often involves leveraging the power of Figma plugins. While Figma provides fundamental shape tools like rectangles, ellipses, and polygons, creating more complex or parametric shapes typically requires a different approach.

Using Plugins to Create Custom Shapes

Based on the provided reference, adding custom shapes follows a workflow commonly found in shape-generating Figma plugins:

  1. Select the shape type you want to create.
  2. Click "Create" button to add the shape onto the canvas.
  3. Adjust the parameters in the plugin window to modify the shapes.

This process allows you to generate specific geometries that aren't available in Figma's standard shape library.

Finding Shape Plugins

Figma's Community is a vast resource for finding plugins that can generate various custom shapes. You can search for terms like:

  • "Shape generator"
  • "Pattern maker"
  • Specific shape names (e.g., "star generator," "helix")

Popular plugins often provide interfaces where you can define parameters like size, complexity, randomness, and other properties before generating the shape directly onto your canvas.

Steps for Adding a Custom Shape via Plugin

Here's a breakdown of the plugin-based method, aligning with the reference:

  1. Install a Suitable Plugin:
    • Go to the Figma Community (https://www.figma.com/community/plugins).
    • Search for a plugin that creates the type of custom shape you need (e.g., a plugin for generating complex stars, gears, waves, or abstract patterns).
    • Click "Try it" or "Install" to add the plugin to your Figma account.
  2. Run the Plugin:
    • Open your Figma design file.
    • Right-click on the canvas or go to Plugins > [Plugin Name] from the main menu.
    • This action typically opens a dedicated plugin window or interface.
  3. Select Shape Type (Step 1 from Reference):
    • Within the plugin window, choose the specific type of custom shape you want to generate from the available options. Plugins often offer multiple shape variations.
  4. Set Parameters (Step 3 from Reference):
    • Adjust the various settings, sliders, or input fields provided by the plugin. These parameters control the shape's characteristics (e.g., number of points, radius, angles, density, randomness). This is where you truly customize the shape's geometry.
  5. Create the Shape (Step 2 from Reference):
    • Once you've configured the parameters to your liking, click the "Create," "Generate," "Add to Canvas," or similar button within the plugin window. The plugin will then render the custom shape directly onto your current page in the Figma file.

Example Workflow

Imagine using a plugin to create a complex geometric pattern:

  • Run the "Pattern Generator" plugin.
  • Select the "Voronoi" pattern type.
  • Adjust parameters: Set the number of points, spacing, and randomness via sliders in the plugin window.
  • Click the "Create" button.
  • The plugin generates the Voronoi pattern as a vector shape (or group of shapes) on your canvas, ready for further editing.

Figma's Native Shapes vs. Custom Shapes via Plugins

It's important to distinguish between Figma's basic shapes and plugin-generated custom shapes:

Feature Figma Native Shapes Custom Shapes (via Plugins)
Availability Built-in, always available Requires installing a specific plugin
Complexity Basic (Rectangle, Ellipse, Polygon, Star, Line, Arrow) Highly complex, parametric, unique
Creation Using shape tools from toolbar Via a plugin interface/window
Customization Basic properties (corner radius, sides, ratio) Advanced parameters unique to the shape type

While you can modify native shapes using vector editing tools (Pen, Pencil) to create unique forms, plugins streamline the generation of complex or mathematically defined shapes that would be difficult or time-consuming to draw manually.

By utilizing plugins and following the steps outlined in the reference – selecting the type, clicking create, and adjusting parameters – you gain the ability to add a vast array of custom shapes to your Figma projects, expanding your design possibilities significantly.

Related Articles