Unidup

About this plugin

Create a design set template that includes component usage and color schemes. With this plugin, you can duplicate your template to a new page, automatically apply new instances of the original component's new variants under consistent layers, and create brand new color schemes.

Additionally, color schemes can be exported in JSON format.

Document Preparation

Document Structure: Prepare the design drafts of the design scheme, which should include "Components Page" and "Template Page", as well as "Color Scheme".

Naming: Each reuse of the design scheme should have a unique name, let's tentatively call it "NAME". This naming is very important as it runs through the entire reuse process.

Template Page: The "Template Page" is the page of your design scheme, and its name should be called NAME. It will play a big role in subsequent work, transforming into various new outputs and serving various new purposes. Therefore, each artboard should contain instances of components for reuse.

Components Page: Each time the design scheme is reused, the output should be unique. The "Components Page" contains unique elements in each set of outputs, and each component should include variants, with the key of the variant being "name" and the value being NAME, to correspond with each set of outputs.

Color Scheme: The naming method for local color schemes in figma is xxx/xxx. When naming, please follow the structure NAME/color1, NAME/color2.

How to Use

Duplicate and Export JSON are two main functions.

Duplicate:

There are three cards in the interface, namely "Components Page", "From Template", and "New Page Naming".

1. Select your "Components Page", click the "Apply Selected Page" button to the right of "Components Page", and the card will display the details of the "Components Page".
2. Select your "Template Page", click the "Apply Selected Page" button to the right of "From template", and the card will display the details of the "Template Page".
3. In the "New Page Naming" card, name your new output.
4. Click the "Duplicate" button, and you have extended a new output from the "Template Page". Modify the associated components and color scheme, and this output is ready.

Export JSON:

It will list the NAME of all your output schemes, click to export the rgba color values, and download the json to your local.

See usage demo file:

https://www.figma.com/file/jUg3U53QSIzWBEn0RfUdB0/