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)
![](https://cdn.prod.website-files.com/62fd6bee5ed6f414bbd8dfed/6502037188cef88ac28f679c_Pick%20a%20motif.jpg)
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
![](https://cdn.prod.website-files.com/62fd6bee5ed6f414bbd8dfed/65020406f89efc75fa864a62_Background%20pattern.jpg)
It can also appear in the logo
Self-explanatory.
![](https://cdn.prod.website-files.com/62fd6bee5ed6f414bbd8dfed/65020460cf1d3b90cea2099b_In%20the%20logo%20(1).png)
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.
![](https://cdn.prod.website-files.com/62fd6bee5ed6f414bbd8dfed/65020487594afc0fb4efd6fd_In%20the%20typeface.jpg)
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
![](https://cdn.prod.website-files.com/62fd6bee5ed6f414bbd8dfed/6502051188cef88ac2916e32_Image%20framing.jpg)
Buttons and other interactive elements may contain your motif as well
![](https://cdn.prod.website-files.com/62fd6bee5ed6f414bbd8dfed/650206b5fe691484cd7d27ce_Buttons%20%26%20interactive%20elements.jpg)
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
![](https://cdn.prod.website-files.com/62fd6bee5ed6f414bbd8dfed/650206bdf89efc75fa8962d7_Button%20with%20shape%20ends%20(1).jpg)