Duplicate and Iterate

Duplicate elements to tweak them and compare options.

As part of any design process, you’ll generate many possible approaches and compare them to iteratively work toward a better end result. UI designers typically explore design ideas by creating duplicates of elements and screens, making tweaks, and comparing options visually side by side.

Even small details can be worth exploring. For example, we could adjust the color palette to improve contrast and how color is used to draw attention and convey meaning. We could consider options to put more or less visual emphasis on certain elements and information. We might also try out an idea to explore what the interface might look like in different states, to make sure those states feel coherent and communicate clearly.

Here’s a button I designed, and I’d like to play around with some other ideas for it. It will be difficult to judge this button out of context, but we may still form some initial design ideas.

First let’s try out some different approaches to the rounded corners.

The shortcut to duplicate a frame in Figma is command- or control-D. By default, if the frame is directly placed on the canvas like this, Figma will place the duplicate frame 40 points to the right. Repeat the command to make another duplicate.

I’ll try something pill-shaped and something more in-between. Out of context, I don’t have a strong preference.

Let’s try some different colors instead. This time I’ll hold down the option or alt key while I click and drag to make a new copy. Helpfully, Figma shows a list of selected colors in the design panel, which can save some clicking around.

I think the darker blue one feels more neutral, which might be good if I want the interface to get out of the way. This lighter blue one seems much too low contrast, let’s rule it out.

For now, let’s leave it there. This process of iterating and comparing can go on indefinitely. I might consider different fonts, or padding, or try adding effects like borders, shadows, or gradients. All the while, leaning on two important shortcuts in Figma: command- or control-D to duplicate a selection, option- or alt-click-drag to tear off a copy.

Up Next: Spacing with Auto Layout

See Also

Competencies

Explainers

Lessons

Resources

Tools

Books

References

Talks

Articles