Web Design » Figma » How Do I Copy Styles From One Figma to Another?

How Do I Copy Styles From One Figma to Another?

Last updated on January 8, 2023 @ 1:56 pm

When it comes to copying styles from one Figma file to another, there are a few different ways you can go about it.

Select the style you want to copy to another Figma file

One way is to use the Styles panel in Figma, which allows you to transfer styles between different files. Another way is to use the “Copy as CSS” feature in Figma, which will generate CSS code for you that you can then paste into your HTML file.

If you’re using the Styles panel in Figma, simply select the object whose style you want to copy, and then click on the “Create new style” button at the bottom of the panel.

Create component style in Figma

This will create a new style with the same properties as your selected object.

Copy component styles in Figma

You can then go to your other Figma file and paste this style into the Styles panel there.

Paste copied styles to another Figma file

PRO TIP: When copying styles from one Figma to another, be sure to pay attention to the applied colors, fonts, and other design details. Otherwise, you may end up with a mismatched design.

If you’re using the “Copy as CSS” feature, simply select the object whose style you want to copy, and then click on the “Copy as CSS” button at the bottom of the panel.

Copy styles as CSS in Figma

This will generate CSS code for you that you can then paste into your HTML file. Make sure to paste this code into the < head > section of your HTML file so that it will be applied to all of your content.

Paste Figma copied CSS to your HTML file

Both of these methods are quick and easy ways to copy styles from one Figma file to another. Experiment with both methods to see which one works best for your workflow.

Dale Leydon

Dale Leydon

Sysadmin turned Javascript developer. Owner of 20+ apps graveyard, and a couple of successful ones.