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
- Visual Design Amount of Design Variations
- Visual Design Color Palette
- Visual Design Quality of Design Variations
- Visual Design Style Tile
- Visual Design Usage of Color Palette
- Usability Evaluation Amount of Iterations
- Usability Evaluation Quality of Iterations
- Usability Evaluation Usability Testing
- Interaction Design Interface controls
- Leadership Presenting Design Decisions
- Color Systems
- Reusable Components
- Designing in Sketch
- Human Interface Guidelines
- Inspiration and Aspiration
- Material Design
- 10 Usability Heuristics for User Interface Design
- 7 Rules for Creating Gorgeous UI
- 7 Rules for Creating Gorgeous UI – Part 2
- Interface Writing: Code for Humans
- Lessons From Swiss Style Graphic Design
- Microcopy: Tiny Words With A Huge UX Impact
- Typography for User Interfaces
- UI vs Print
- Adobe Color
- Color Contrast Checker
- Contrast Checker
- Dribbble Colors
- Material Theme Editor