Creating Style Tiles in Figma
How to break down your design process ✂️
So, what ARE style tiles? Style Tiles are design comps (comprehensive layouts) made of fonts, colors and interface elements that communicate the essence of a visual brand for the web. Mood boards and mockups can either be too vague or too precise — but style tiles hit that sweeeeet spot. They’re kind of like a mini brand book that lets you (and clients!) explore different branding and web-specific elements (like buttons).
This site by Samantha Warren (an Adobe Design Lead) covers it all to a tee.
The purpose of Style Tiles is to make not one, but many tiles
In this Live Office Hour clip, Puno walks through why you should create Style Tiles, shows examples of them, how to create them in Figma, and how to move around in Figma.
Programs to create Style Tiles 🖥
Adobe Photoshop, Illustrator or XD (awesome if you have Adobe CC!)
Figma (our preference! It’s free. Watch Puno’s shortcut tutorial below!)
Canva (works great, but you’ll need to upgrade to install custom fonts. Watch Chelli’s tutorial below!)
Keynote / Google Slides (upload screenshot images + fonts in a pinch)
Some Tips 🎨 — From Puno
Make 20 comps
When I first started to design, I would work on one comp and nudge things around on that one until it felt good. Sure a little nudging is good, but it’s impossible to remember all those variations unless you’re the Queen’s Gambit.
The goal is to help you keep track of design versions (or iterations), make revisions, and compare. The level of completion between the design comp compared to the final outcome can vary. It’s whatever you need to make a design decision.
Once you have a few comps you’re happy with... share them in the Discord channel (Custom Sites tag), get out of your head, and get some feedback!
Don’t overthink, don’t edit yet. Just brainstorm a ton of ideas.
Now you’re probably thinking 20 comps!? That’s so many! Well yeah, how many songs do you think musicians make before they land on an album?
Here’s the thing, they don’t have to be wildly different. They can be small adjustments to fonts, color, layout, or even photos. They don’t even have to be the same layout. It’s whatever you need to get to a direction.
The key here is to just come up with ideas and then make a ton of variations.
Here’s what former TA Bronze has to say.
It’s OK to copy elements of other designs that you like, but do the work to make it your own.
We suggest you recreate a site or elements of a site that you love so you can pick apart the decisions that created that design. If you’ve run out of ideas, take small pieces of other sites, BUT DO THE WORK TO MAKE IT YOUR OWN. Don’t be that jerk. If you aren’t sure if it looks too similar overall, then drop it in the Discord channel and get someone else’s opinion.
Invest in fonts.
Fonts make up most of the site. Investing in a font will reallllly take your site super far. Check out this Resource on How to Download and Test Fonts.
Puno’s Figma Tutorial
In this clip from Live Office Hours, Puno walks you through Figma shortcuts.
Chelli’s Tips
Try designing ONE AREA AT A TIME!☝️
It’s easy to get overwhelmed and give up at the thought of tackling the WHOLE THING. 😩 Take it step-by-step — don't worry about building the whole thing out at once.
If you're looking for a simple place to start, begin at the very top of your site on the homepage!
Navigation
Write down all the pages or sections you will need for your site & decide how a visitor will navigate
Map out how you'll organize the navigation for the site in Squarespace & go from there 👌
Colors
Use a generator Coolers for color inspiration and create a color palette that aligns with the 3 cornerstone adjectives you chose to represent your design.
Fonts
Check out this article on How to find and install custom fonts.
Images
How to find Imagery on a budget
Layout
If you’re feeling stuck, try drawing out ideas for your layout on paper or making a wireframe on Figma.