I’m working in an agency developing (among other things) design systems for our clients. Recently we ran into an issue while transferring a design system project we had started, to the client’s organization. Without going to too much detail (we are solving the issue with Figma support) a lot of headache could have been avoided, if styles would be as easy to transfer between files, as components.
At least to my understanding, there currently isn’t a way to transfer/copy&paste a style from a Figma file to another (w/o plugins at least).
Am I the only one missing a native feature in Figma to achieve this? Also, handling multiple style values and descriptions at once would be fantastic! This is possible with plugins atm. But I think it would be welcome feature to have better style management natively in Figma.
You can use Extract Styles to get all the styles as layers, then copy / paste into the new project, then use Generate Styles to create styles from layers. There are some limitations with the text layers.
I’m looking for this same feature. Have one file where you can setup all you typography and text styles as a base. Then when starting new projects you can copy that page over keeping the styles and then you can adjust them. It’s different than using the team styles library.
Excellent point @Andrei_Iancu ! However, this is not always a solution and a fix for this issue, even thought would (perhaps) solve the issue in @Yianni_Mathioudakis 's situation, that he described above.
Not everyone has their design system set up as he describes. Some have styles + components all in one file. I do still think there is a need for this feature.
@Andrei_Iancu I’m guessing ‘duplicate’ file would work if I started from that file. But let me clarify my current situation some more if this helps.
I’m working on multiple website design projects.
Project A - is designed, but now I’m ready to clean up the system, define the text styles, and apply them throughout.
Project B - is a style guide framework which is has pre-defined text styles.
I’d like to copy the Project B style guide frame into Project A, so all the text styles are defined and setup. These styles don’t match Project A, but now all I have to do is update the font/treatment, and now it’ll be ready to go with shared styles.
For me, I’m trying to save the time of having to re-set all the h1-h6 and body styles for each project and rather edit them instead.
Thanks for bringing up this topic. Not only would our team like the ability to export/import styles I think Figma should make it easier to export and import project files including components that stay attached. Last week Sho asked the Twitter community what do you wish Figma had and what do you wish it didn’t do. Here my post on this topic -https://twitter.com/Christian3D/status/1359528519601061889?s=20
We put a lot of work into building components and we include theming styles in our components to be able to support things like both light mode and dark mode. Of course, we want to be able to reuse as much of our hard work from project to project. If we do work in our customer’s Figma account, we can’t export the component library and or styles and import them into a new account without the connections to the styles and connection to components (i.e. reusing things like templates) breaking.
The same would be true for any designer who would like to back up their work into a personal figma account for portfolio purposes.
All the components and styles break even if you try to rebuild your backed up .fig files exactly like the original environment, including even setting up the same project names Everything results in extremely frustrating 404 errors. @Gleb made a super helpful plugin that helps reattach components but even this is still a per component experience that just is a total time waste. I am a HUGE fan of Figma but this one Figma problem is by far my least favorite thing about Figma and something that I have never seen with other design tools.
I doesn’t see a way to link a layer without style to a style especially if the properties of the new style doesn’t match the properties of targeted layer. Maybe AI, someday…
We are also running into this problem on a regular basis…
When designing an app, you often start with pages and components in a beautiful and messy process.
But when the design is complete, we want to be able to migrate all styles and components to a separate file, so that it can be reused for both existing designs, and future features/products that live under the same brand.
That makes total sense to me. We don’t want to be forced into just cramming everything into one giant file just to be able to reuse components
The only option I see, if you want the style/component links to stay intact, is to create a component+style file from the very start of the project.
The issue with this method is that it’s clunky. It forces you to keep publishing and fetching every single tweak, while you are still in the early explorative phase…
Having an extra option in this menu called ‘Duplicate style in this file’ would do the job for me.
The problem with ‘Move style…’ is that it really moves rather than just duplicating it. Looks like I will have to be doing manually the duplication.
I tried using Styler but it duplicates only 10 styles and that’s it
Hey,
What do you mean Styler duplicates only 10 styles?
Can you send me a recording of what it happens, please?
As long as the name is not the same, you should not have any issues with the plugin
If the layer names are the same, the plugin is trying to find a match between layer name and style name and update the existing ones.
I can’t believe that there’s nothing that has been natively implemented yet, something that would allow us to export styles as JSON files and import as well would be very welcoming!
I agree that is a major pain.
We started our Design System into a single file.
As we now have massive components leveraging 100s of variants, that single file is massive and on the verge of running out of memory.
So we decided to extract all the Components into individual project file onto another Secret Team Account. This is to prevent we don’t end-up with duplicates for the various team members as this migration will take days/weeks to complete.
But all Styles (Fonts & Colors) are still linked to our original file.
‘Duplicating’ (and relinking them) instead of ‘Moving’ would make so much more sense.
Our buttons color styles are still linked to the old file, in another team account.
Our Design System is also in a single document. Styles, foundations, everything. We need to extract the color/type/logo/foundation to give it a rebranding flexibility.
I would love to have the feature to move styles to another file while maintaining the connection to components.
