How to Merge Vectors Together in Figma: A Complete Guide to Boolean Operations and Workflow Tips
Merging vectors in Figma is a fundamental skill for designers who want to create complex shapes, icons, and illustrations without leaving the canvas. Whether you are building a logo, designing UI components, or crafting custom illustrations, knowing the exact command to merge vectors together Figma offers can save time and keep your layers organized. This guide walks you through the theory, step‑by‑step procedures, practical tips, and common pitfalls so you can master vector merging in Figma and apply it confidently to any project Practical, not theoretical..
Understanding Vectors in Figma
Before diving into the merging process, it helps to clarify what a vector is in the context of Figma. A vector is a shape defined by mathematical points, lines, and curves rather than pixel‑based raster data. Because vectors are resolution‑independent, they stay crisp at any size, making them ideal for icons, logos, and scalable UI elements.
In Figma, every shape you draw—rectangle, ellipse, polygon, or freeform path—is a vector object that lives on its own layer. When you need to combine two or more of these objects into a single shape, you use Boolean operations (also called vector operations) or the Flatten command. Both approaches produce a new vector layer that retains the editability of the original paths, depending on the method you choose Most people skip this — try not to..
Why Merge Vectors?
Merging vectors serves several practical purposes:
- Simplify the layer panel – Fewer layers mean easier navigation and less clutter.
- Create custom shapes – Combine basic primitives to produce unique icons or illustrations.
- Prepare assets for export – A single merged vector exports cleanly as SVG, PDF, or PNG without extra groups.
- Enable further editing – Some Boolean results remain editable, allowing you to tweak individual points after the merge.
Understanding the why helps you decide which merging technique fits your workflow best.
Core Methods to Merge Vectors in Figma
Figma provides three primary ways to merge vectors: Boolean operations, Flatten, and third‑party plugins. Each method has distinct advantages and limitations.
1. Boolean Operations (Union, Subtract, Intersect, Exclude)
Boolean operations are the most common and flexible way to merge vectors. They treat selected shapes as sets and apply set‑theory logic to produce a new shape.
| Operation | Icon | Result | When to Use |
|---|---|---|---|
| Union | ⊕ | Combines the area of all selected shapes into one. | Designing lenses, Venn diagram sections, or shared regions. Even so, |
| Subtract | ⊖ | Removes the area of the top shape(s) from the bottom shape. Worth adding: | Merging overlapping icons, building complex silhouettes. |
| Exclude | ⊗ | Shows everything except the overlapping area. | |
| Intersect | ∩ | Keeps only the overlapping area of all selected shapes. | Creating cutouts, knock‑out text, or hollow shapes. |
Step‑by‑Step: Using Boolean Operations
- Select the vectors you want to merge. Hold Shift and click each layer, or drag a selection box around them.
- With the shapes selected, locate the Boolean operations button in the top toolbar (it looks like two overlapping circles).
- Click the button to reveal the four operation icons.
- Choose the desired operation (e.g., Union to merge vectors together Figma style).
- Figma creates a new vector layer that replaces the selection. The original layers are hidden but can be restored by toggling the eye icon in the layers panel if you need to revert.
Tip: Hold Option (Mac) / Alt (Windows) while clicking a Boolean operation to create the result as a new layer without hiding the originals. This is useful for non‑destructive experimentation.
2. Flatten Selection
The Flatten command merges selected vectors into a single shape while preserving the exact visual appearance, but it converts the result into a flat vector network where individual points are no longer grouped by original shape.
When to Use Flatten
- You need a single path for export (e.g., sending to a developer who prefers a single
<path>SVG). - You plan to apply further vector editing (like adding points with the Pen tool) and want unrestricted access to all vertices.
- You are certain you won’t need to adjust the original shapes separately later.
How to Flatten
- Select the vectors you wish to combine.
- Right‑click (or use the context menu) and choose Flatten Selection, or press the shortcut ⌘ + E (Mac) / Ctrl + E (Windows).
- Figma replaces the selection with a flattened vector group. You can double‑click the group to enter vector edit mode and manipulate points directly.
Caution: Flattening removes the ability to undo the merge via Boolean operation history. If you might need to revert, duplicate the selection first or use a Boolean operation instead Practical, not theoretical..
3. Using Plugins for Advanced Merging
Figma’s community offers plugins that extend merging capabilities beyond the native Boolean set. Popular options include:
- VectorMerge – Provides additional modes like “XOR” and “Difference with multiple sources.”
- Shape Boolean – Allows you to preview results before applying them.
- Combo – Combines multiple Boolean operations in a single click.
To use a plugin:
- Go to Resources → Plugins → Browse plugins.
- Search for the desired plugin, install it, then run it from the Plugins menu.
- Follow the plugin’s UI instructions—usually select shapes, choose a merge mode, and apply.
Plugins are handy when you need repetitive merging tasks or want to keep a history of operations without manually duplicating layers.
Best Practices for Merging Vectors in Figma
To ensure your workflow stays efficient and your files remain manageable, consider these guidelines:
-
Name your layers clearly before merging. After a Boolean operation, the resulting layer inherits the name of the topmost selected layer; renaming afterward avoids confusion.
-
Use frames or groups to organize complex illustrations. Merge vectors inside a frame to keep the outer structure intact.
-
use constraints and layout grids when merging UI components; merged vectors should still respect the parent frame’s resizing behavior.
-
Keep a copy of the original shapes (duplicate them and hide the copy) if you anticipate needing to revert or iterate.
-
Check the resulting path direction (especially for Subtract and Exclude) if you plan to apply fills with gradients or strokes; reversed paths can cause unexpected visual artifacts.
-
**Optimize for
-
Optimize for performance and file size by simplifying paths and removing unnecessary anchor points after merging. A cleaner vector structure reduces rendering load and improves export efficiency.
Final Thoughts
Merging vectors in Figma is a powerful technique, but its effectiveness hinges on thoughtful execution. Prioritize clarity in naming conventions, preserve original assets when possible, and rigorously test merged shapes for unintended distortions. But whether you opt for Boolean operations, flattening, or plugins, always align your method with the project’s long-term needs. By blending technical precision with strategic foresight, you can transform complex vector layers into streamlined, functional elements that elevate your designs without compromising flexibility That alone is useful..
Remember, the goal is not just to combine shapes but to enhance your workflow. Because of that, experiment with these strategies, and let your creative process guide which tools and techniques resonate most with your workflow. With practice, vector merging becomes an intuitive part of crafting polished, professional designs in Figma That's the part that actually makes a difference..
