How to add a motif to your design

Pick a motif

Note that a motif can be anything it's not an exact science):

• Shapes
• Symbols
• Textures
• Gradients
• Filters
• Abstract concepts (love, outer space, time)
• Hand-drawn elements
• Digital elements (pixels, binary code, glitches)

‍

A motif can appear in a background pattern

• Add a background pattern to the frame
• Lower opacity to something like 20%
• Give it absolute position
• Send to back

It can also appear in the logo

Self-explanatory.

Your typeface can contain the motif as well

This typeface is called "Minecraft".

Keep accessibility in mind when selecting a typeface (legibility). Form and size matter here.

A motif can recur in the way you frame imagery

• The pen tool (Shortcut: P) was used here to first create the shape
• A stock image was added as a fill using the Unsplash Figma plugin
• A duotone filter was added using the Duotones Figma plugin

Buttons and other interactive elements may contain your motif as well

To create this button:

• Create a frame and add the button text to it
• Apply auto-layout to the frame
• Create the shape that will be used for the left and right extremities (pen tool)
• Duplicate and flip the above shape
• Add both shapes to the button frame
• Set both shapes to absolute position and position them
• Add left constraint to lefthand shape and right constraint to righthand shape