Duplicate Components in Figma
Tags: figma, figmatips, uxdesign, figmatutorial
Published: 2022-01-21 00:31:31

---
title: Duplicate Components in Figma
published: true
date: 2022-01-01 19:54:00 UTC
tags: figma,figmatips,uxdesign,figmatutorial
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1024/0*ChArVSFXTL1bAkDn.jpg)

In this quick post, we’ll take you through how to duplicate a component in Figma.

### Watch Video Tutorial

{% youtube -m0SGb0FetI %}

### Duplicate component

- First, select and hold **CRTL or Command + C** to copy the component frame.
- Past your component with **CRTL or Command + V**  .

At this point, you’ve created an instance of the component.

![](https://cdn-images-1.medium.com/max/1024/0*aNGA9nsaqH5JAzG2.png)

- Next, select the **Component Instance** and head to the right-hand sidebar.

![](https://cdn-images-1.medium.com/max/484/0*fEVKf8rWYakCJHuy.png)

- Go to the Instance section and hit the **three dots**  icon.

![](https://cdn-images-1.medium.com/max/484/0*ejGp6aidj_tv-EMD.png)

- In the drop-down menu, select **Detach Instance**.

![](https://cdn-images-1.medium.com/max/478/0*bvp7B23n_F7cs-I0.png)

- Now, go to the center top-bar menu and hit the **Create component** icon.

![](https://cdn-images-1.medium.com/max/590/0*Lrb1xRqJ2w0UZuIY.png)

- Go to the assets tap in the left-hand sidebar to preview your duplicated component.

![](https://cdn-images-1.medium.com/max/486/0*52AYJpbjei4VpAhy.png)

### Duplicate multiple component

- Select all the components you want to duplicate and hold **CRTL or Command + C** to copy.
- Now, hit **CTRL or COMMAND + V** to past.

![](https://cdn-images-1.medium.com/max/1024/0*Vq7srThdQQtWK94C.png)

For now all we’ve done is creating instances of our components.

- Next, let’s select all our Components Instances and go to the right-hand sidebar.
- Go to the Instance section and hit the **three dots**  icon.

![](https://cdn-images-1.medium.com/max/488/0*EGEwSy9gsWuENKy-.png)

- In the drop-down menu, select **Detach Instance**.

![](https://cdn-images-1.medium.com/max/470/0*z4aopjZDmHqimwuK.png)

- Now let’s create multiple components by selecting \*\*\*\*all the buttons frames, then head to the top-bar menu and hit the arrow besides the **Create component icon**.
- In the drop-down menu, select **Create multiple components.**

![](https://cdn-images-1.medium.com/max/328/0*-BtMtCeaMhsTZ1lc.png)

- Go to the assets tap in the left-hand sidebar to preview your duplicated component.

![](https://cdn-images-1.medium.com/max/241/0*u_fqSb-S1hga5owk.png)

That’s everything about duplicating components in Figma. In the next posts we’ll cover more concerning Figma components.

### Before you go

Feel free to visit our website [**captain-design.com**](https://www.captain-design.com/) where we are sharing generously, ready for commercial use [**Figma and HTML templates**](https://www.captain-design.com/).

You’ll find three things to help you kickstart your next project’s design :

- [**200+ free Figma templates**](https://www.captain-design.com/templates/) **.**
- [**Free Html + Bootstrap 5 templates**](https://www.captain-design.com/templates/tag/html) **.**
- [**Amazing Figma Plugins and UI kits**](https://www.captain-design.com/uikit/) **.**

_Originally published at_ [_https://www.captain-design.com_](https://www.captain-design.com/blog/duplicate-components-in-figma/) _on January 1, 2022._