Time Saver

1. Auto variant creation 2. Clone components 3. Copy and paste prototype

organisationdesigncloneautovariantsanimationprototypedesign systemcomponentsflowillustration

Plugin Preview

About this plugin

👉 Save ton of time in your design workflows like variant making, design system, prototype, animations etc.

Welcome to Time Saving Experience in Figma.

Explore Playground & Help

——————————

🚀 Update (June 02, 2022)

Now new users can take a trial of this plugin without any signups.
Existing unpaid users also will be able to try this plugin once again.
If you have already paid before June 02, 2022 then please click on the buy now button and enter the license key received in email by gumroad to use the plugin with lifetime access.
Licence key will be automatically bound with your current Figma account from which you will apply the licence key.
Plugin will be opened faster from now on.
Other performance improvements to make this plugin more reliable.
Please send a feature request to [email protected]

Features brief

1.Variations

Automatically create many variations with layer on & off functionality.
Layer names will be updated automatically to show them as property in variant, so no more manual work now. (Optional)
These features support multiple component operations at same time.

1.1 Unique Combination

This feature will create variations for all possible unique combinations from all selected layers of components.

1.2 Hide one by one & show others

This feature will create variations by hiding one by one layer & showing other layers from all selected layers of components.

1.3 Show one by one & hide others

This feature will create variations by showing one by one layer & hiding other layers from all selected layers of components.

Use Cases

When you want to create many variations for many UX components like buttons, chips, cards, text fields, tooltip, navigation drawer, app bar etc.
When you want to make variant out of all these created variations of components within no time.

Prerequisites

This feature can be used with components only.
Selected layer name must be unique per component if you turn on switch "Update layer name for variant property"

2.Clone

Automatically create components with incremental changes in any property for selected layers in components.
This feature can make variations from any component with your desired changes in properties like X Position, Y Position, Width, Height, Rotation, Radius, Stroke, Opacity etc.
Layer names will be updated automatically to show them as property, so no more manual work now. (Optional)
You can ignore current value of property for selected layers and start with 0(Zero) to create components. (Optional)
These features support multiple component operations at same time.

Use Cases

When you want to turn hand of any character at different angles.
When you want to move any object with specific distances in incremental manner.
Similarly, when you want to change different properties in incremental way for any selected layer.

Prerequisites

This feature can be used with components only.
Selected layer name should be unique per component if you turn on switch "Update layer name for variant property"

Example

Step 1:

Draw a rectangle of 100 width & 100 height & make it a component.

Step 2:

Now in "Time Saver" plugin set following values in clone section.

Iteration: 05, X = 5+, Y = 5+, Width = 5+, Height = 5+
Turn off 'Ignore current value & start with 0'
Turn off "Update layers name for clone property" (Optional)

Now press create button and it will create 5 components with updated properties, you can verify now.

Supported input values & its results

Following values are for example only, you can enter any desired value in any property in clone.

For iteration value = 5

2+ will clone objects with updated value like 2, 4, 6, 8, 10
2- will clone objects with updated value like 2, 0, -2, -4, -6
2* will clone objects with updated value like 2, 4, 8, 16, 32
2 will clone objects with same value as 2, 2, 2, 2, 2

Notes

(minus) value supported only in X & Y Positions.
Figma supports opacity between 0 to 100 %. So, if selected object has 100 & opacity then + (plus) & * (multiply) operation will throw error.

3.Prototype

Copy and paste prototype for one or many objects like Frames, Components, Instances, Variants in short wherever Figma supports prototype interactions.
These features support copy & pasting prototype for one OR many interactions.

3.1 Copy

Copy prototype from any object whether it is

Single object with single interaction or multiple interaction
Multiple objects with single interaction or multiple interactions.

3.2 Paste

3.2.1 Paste as copied on one or many

You can paste copied prototype on one or many objects.
Example: When you have copied prototype from 3 object then you can paste it on same number of object or on multiply number of objects like 3 or 6 or 9.
This will behave as multi paste feature but in multiply manner.

3.2.2 Paste & connect all layers

When you have copied interaction from one object then it can be pasted on one or many objects.
And you can connect selected objects with each other in selected direction.
You can also connect last object with first object. (Optional)

Use Cases

When you want to animate anything with repetitive interaction for multiple objects whether it is in variant or not.
Let's say you have added state interaction between 5 different buttons and now you want to apply this to all variations of buttons in design system.

Prerequisites

Minimum one prototype or interaction should be added on selected object to copy it.

——————————

Trial

For trial, you will get 50 attempts to try all plugin features.

——————————

Pricing

🎉 No Subscriptions

Pay once $50 and get lifetime access with free updates.

——————————

License

You need to buy licence to use plugin. After installing "Time Saver" plugin click on "buy now" button and enter licence key received into email to activate it.

——————————