When to Turn Copied Elements Into Figma Components
By Khushi Yadav
Turn a copied element into a Figma component as soon as you've pasted it into a third place, or as soon as you expect it to change. A pasted copy is independent: change one and the others stay as they were. A component's instances stay linked to the main component, so one edit updates every copy. Plain copy and paste is still the right tool for one-off layers, exploration and reference images.
Copy and paste vs components: the difference
| Pasted copies | Component instances | |
|---|---|---|
| Linked to a source | No | Yes, to the main component |
| One edit updates every copy | No | Yes |
| Local overrides (text, colour) | Every copy is fully editable | Yes, while keeping the link |
| Shareable across files | Copy and paste again | Through a published library (paid plans) |
| Best for | Exploration, one-offs, reference | Anything that repeats: buttons, icons, nav, cards |
Figma's own guide describes components as reusable elements such as buttons, icons and layouts, and notes they're available on all plans. Anyone with edit access to a file can create them.
Signs a pasted element should become a component
- You've pasted it into a third frame or file.
- Someone asks to change it "everywhere", such as a corner radius or a label.
- It needs states (default, hover, disabled) or sizes.
- It needs a light-mode and dark-mode version.
- A developer asks what it's called, or two designers are using slightly different copies.
If none of those apply, leave it as a pasted layer. Mood-board images, a screenshot of a bug and a competitor's layout don't need to be components.
How to turn a pasted element into a component
- Select the layers that make up the element.
- Right-click and choose Create component, or press Ctrl+Alt+K on Windows (Option+Command+K on Mac).
- Give it a name. Slashes create grouping, so
Button/Primarysits under Button. - To use it elsewhere in the same file, copy and paste it or press Ctrl+D. Figma's help says that within one file, pasting or duplicating a component creates an instance.
If you've selected several separate elements, the Create component options in the right sidebar include Create multiple components, which makes one component per frame, group or path.
Replace the old pasted copies with instances
The old copies aren't linked to anything, so swap them out:
- Copy an instance of the new component (Ctrl+C).
- Select a stray pasted copy on the canvas.
- Use Paste to replace (Ctrl+Shift+R on Windows).
Figma swaps the selected object for the instance, and the instance takes on the replaced object's constraints. Repeat for each copy, then delete any leftovers.
Add states and sizes as variants
When a button needs several states, don't paste and recolour it. Create one component per state, select them all and choose Combine as variants in the right sidebar. Figma puts them in a component set with properties such as size and state. Variants work on all plans.
Sharing components across files
Inside a single file, components work on every plan. To use them in other files, publish the file as a library: open the Assets tab, click the Libraries icon and choose Publish next to the current file. According to Figma's help, publishing needs a paid plan, a Full seat with edit access, and a file that lives in a folder rather than in your drafts.
On the free Starter plan, components can't be published to other files. Copying an instance into another file still works; Figma's help notes that instances and published main components can be pasted across files.
Where the system clipboard still fits
Components don't replace the clipboard. They replace one particular use of it: pasting the same UI element again and again. The clipboard still does these jobs:
- Bringing outside images in. A pasted image becomes a fill on a rectangle, and Figma resizes anything over 4096 px wide or tall. Pasting a snip into Figma without quality loss covers the details.
- Exporting a quick picture. Copy as PNG (Ctrl+Shift+C) puts a 2x image on the clipboard for Slack or a ticket.
- Moving work between tools. What survives a paste between Figma, XD and Sketch varies; see what pastes between Figma, XD and Sketch.
- Short text: hex values, labels, URLs and ticket numbers.
Windows clipboard history (Win+V) keeps text, HTML and bitmaps. Anything you reuse from it is a static copy, so it has the same weakness as a pasted layer: it won't update when the component does. Treat it as a scratchpad, not as a source of UI parts.
Paste behaviour also depends on whether you use the desktop app or a browser; Figma desktop vs Figma web paste behaviour explains the differences.
Handing off to developers
Developers should inspect components in Figma rather than receive screenshots of them. For anything they need as a file, such as icons or illustrations, export named assets; handing assets to a developer without Slack soup has a workflow, and the game UI icon workflow applies the same component-first idea to Unity and Unreal. Paired light and dark assets are covered in keeping a dark-mode and light-mode pair.
FAQ
Does copying a component create a new component?
No. Within the same file, copying and pasting a component creates an instance linked to the original. To make an independent copy, paste the instance and detach it.
Why didn't my edit update a pasted button?
It was a pasted copy or a detached instance, not a live instance. Replace it with an instance using Paste to replace.
Can I use components on the free Figma plan?
Yes, within a file. Publishing them as a library for other files requires a paid plan.
Related reading
- Figma Desktop vs Figma Web: Why Does Paste Behave Differently?
- Figma, XD, and Sketch on Windows: What Actually Pastes?
- How to Hand Off Design Assets to Developers (Checklist)
- How to Paste a Screenshot Into Figma Without Quality Loss
Sources
- Guide to components in Figma (Figma Help) — main components, instances, plans and permissions.
- Create components to reuse in designs (Figma Help) — Create component, Ctrl+Alt+K, Create multiple components.
- Create and insert component instances (Figma Help) — copying, pasting and duplicating creates instances.
- Create and use variants (Figma Help) — component sets and Combine as variants.
- Publish a library (Figma Help) — plan and seat requirements, publishing steps.
- Copy and paste objects (Figma Help) — Paste to replace, Copy as PNG, pasted images as fills, 4096 px resize.
- Using the clipboard (Microsoft Support) — clipboard history formats.
Khushi Yadav writes Edge Drop's workflow and design guides and is a B.Tech Computer Science Engineering student. Khushi's posts are checked against Microsoft's documentation and the Edge Drop fact sheet.
GitHub · LinkedInCopy. Stack. Drop.
Transform your clipboard into an interactive edge shelf. Stack, pin, and drag assets into any app with zero friction.
Download for Windows Get from Microsoft Store
How to Install Guide · First 10 Minutes Guide · Drag & Drop Guide · Edge Drop vs Win+V · Support
Free · Lightweight · Privacy First