Category: Tutorials

  • Typography pairing guide for beginners

    Tutorial · Updated July 2026 · 6 min read

    TL;DR

    • Pair fonts by contrast (serif + sans-serif), not similarity.
    • Stick to two font families — use weight and size for variety before reaching for a third.
    • Always test a pairing at real reading size, not just as large headline samples.

    Good font pairing comes down to a handful of repeatable principles, not innate taste. Here’s what actually makes two fonts work together.

    1

    Contrast, not matching

    Pair a serif with a sans-serif, or a heavy display font with a light body font. Two fonts that look too similar just look like a mistake, not a pairing.

    2

    Limit yourself to two families

    One for headlines, one for body text. A third font is occasionally fine for small accents (like a label or eyebrow text), but three+ full families in one design almost always looks unplanned.

    3

    Match the mood, not just the shape

    A playful rounded display font paired with a strict grotesk body font sends mixed signals, even if the proportions technically work together. Pick fonts whose personality matches the actual content.

    4

    Use weight and size before adding a third font

    The urge to add another font is usually solved by using bold, regular, and light weights plus size hierarchy within your existing two fonts, rather than reaching for something new.

    5

    Test pairings at actual reading size

    A pairing that looks great as two large headline samples side by side can fall apart once the body text is shrunk to 15-16px for actual paragraphs. Always test at real sizes before finalizing.

    A safe starting formula

    If you’re stuck, this combination rarely fails: a bold, geometric sans-serif for headlines, paired with a clean, highly readable sans-serif (or serif, for a more editorial feel) for body text. It’s not the most original choice, but it’s dependable while you build an eye for pairing.

    FAQ

    How many fonts should I use in one design?

    Two font families is the safe default — one for headlines, one for body text. A third is occasionally fine for small accents only.

    Should I pair a serif with a serif?

    Generally no — pairing fonts with similar shapes (two serifs, or two sans-serifs) tends to look like a mismatch rather than an intentional choice. Contrast usually works better.

  • Color theory basics for non-designers

    Tutorial · Updated July 2026 · 7 min read

    TL;DR

    • Complementary colors (opposite on the color wheel) create contrast; analogous colors (next to each other) create harmony.
    • Use the 60-30-10 rule: 60% dominant color, 30% secondary, 10% accent.
    • Check contrast ratio for text on colored backgrounds — readability beats aesthetic preference every time.

    You don’t need art school to pick colors that work together — a handful of relationships explain most of what “looks right” or “looks off” in a color palette.

    The color wheel relationships that actually matter

    Complementary colors sit opposite each other on the color wheel (like blue and orange). They create high contrast and energy — useful for a single accent color you want to stand out, but overwhelming if used for large areas.

    Analogous colors sit next to each other (like blue, teal, and green). They create a harmonious, low-tension palette — a safe default for backgrounds and larger areas where you don’t want visual competition.

    Triadic colors are evenly spaced around the wheel (like red, yellow, blue). They’re vibrant and balanced but harder to use well — usually best with one color dominant and the other two as small accents.

    Dominant 60%
    Secondary 30%
    Accent 10%

    The 60-30-10 rule

    A simple, reliable starting ratio: 60% of a design in your dominant color, 30% in a secondary color, and 10% in an accent color for buttons and highlights. It’s not a hard law, but it prevents the most common beginner mistake — too many colors competing for equal attention.

    Readability comes before aesthetics

    A palette that looks great as swatches can still fail in practice if text contrast is too low. Check that body text has enough contrast against its background (WCAG recommends a 4.5:1 ratio for normal text) before finalizing any palette.

    FAQ

    What’s the easiest color scheme for beginners?

    Analogous color schemes (colors next to each other on the wheel) are the safest and easiest to get right, since they naturally harmonize.

    What is the 60-30-10 rule in design?

    A ratio guideline: 60% dominant color, 30% secondary color, 10% accent color, used to prevent too many competing colors in a design.

    How do I check if my text color has enough contrast?

    Use a contrast checker tool to verify your text-to-background contrast ratio meets at least 4.5:1 for normal text, per WCAG accessibility guidelines.

  • How to build a brand kit in Canva

    Tutorial · Updated July 2026 · 6 min read
    Disclosure: this page contains affiliate links. We may earn a commission if you subscribe through them, at no extra cost to you.

    TL;DR

    • Brand Kit is a Canva Pro feature ($18/mo or $144/yr) — the free plan doesn’t include it.
    • Upload all logo variants, set exact brand colors, and add fonts before building anything else.
    • Save 2-3 branded templates (not just loose assets) for the actual day-to-day time savings.

    A Canva Brand Kit only pays off if it’s set up completely before you start using it — a half-finished kit just adds a step without saving time. Here’s the setup order that actually works.

    1

    Upload your logo files first

    Go to Brand Kit (Pro feature) and upload your logo in every variant you have — full color, white/reversed, and icon-only. Having all three ready means you never have to manually recolor a logo on a colored background again.

    2

    Set your brand colors as a palette

    Add your exact brand hex codes to the Brand Kit’s color section. Once set, they appear as one-click swatches in every design you create, so you’re never eyeballing a color match again.

    3

    Add your brand fonts

    Upload custom fonts if you have them, or select your standard font pairing from Canva’s library. This becomes the default suggestion across new designs, which keeps a whole team visually consistent without everyone remembering the font names.

    4

    Build 2-3 branded templates, not just assets

    Save a social post, a presentation cover, and one more format you use often as Brand Templates. This is what actually saves time day-to-day — starting from a pre-branded template instead of rebuilding brand elements every time.

    5

    Lock down what teammates can edit

    If working with a team, Canva Pro lets you restrict which brand elements can be changed on shared templates, which keeps off-brand edits from slipping through.

    What actually saves time

    Most people stop at uploading logo and colors, but the real time savings come from step 4 — saved branded templates. Starting a new social post from a pre-branded template instead of a blank canvas is the difference between a 2-minute task and a 15-minute one.

    FAQ

    Is Canva Brand Kit free?

    No, Brand Kit requires Canva Pro ($18/mo or $144/yr). It’s not available on Canva’s free plan.

    How many logo variants should I upload to Brand Kit?

    At minimum three: full color, white/reversed (for dark backgrounds), and icon-only, so you never have to manually recolor a logo mid-project.

  • Auto-layout in Figma: a practical guide

    Tutorial · Updated July 2026 · 7 min read

    TL;DR

    • Apply Auto Layout (Shift+A) to frames with real content, not empty ones.
    • Set Fixed / Hug / Fill independently per axis — this is what most beginners skip.
    • Use built-in gap and padding instead of invisible spacer elements.

    Auto Layout is the single feature that separates a static Figma mockup from a design that actually behaves like a real, responsive interface. Here’s how to use it properly, not just turn it on.

    1

    Apply it to a frame with real content first

    Select a frame with at least two elements (like an icon and text) and press Shift+A. Practicing on an empty frame doesn’t teach you anything — the resizing behavior only makes sense once there’s content to reflow.

    2

    Understand the direction toggle

    Auto Layout frames flow either horizontally or vertically. Toggling this is what turns a stacked list into a row of buttons, or vice versa, without manually repositioning anything.

    3

    Set sizing per axis, not the whole frame

    Each axis (horizontal/vertical) can independently be Fixed, Hug contents, or Fill container. This is the part beginners skip and it’s the actual key to responsive-feeling components — a button should usually Hug contents horizontally but Fill container vertically inside a list.

    4

    Use gap and padding instead of empty spacer elements

    Auto Layout frames have built-in gap (space between items) and padding (space around items) controls. Manually-placed invisible spacer rectangles are a sign Auto Layout isn’t being used correctly.

    5

    Nest Auto Layout frames for real layouts

    A card component is usually an Auto Layout frame (vertical) containing another Auto Layout frame (horizontal, for a title + badge row). Nesting is normal and how most real interfaces are actually built.

    The most common Auto Layout mistake

    Leaving every element set to Fixed sizing defeats the entire point — the frame won’t actually respond to content changes. If you’re not seeing elements resize when you edit text inside them, check that the relevant axis is set to Hug contents or Fill container, not Fixed.

    FAQ

    What’s the keyboard shortcut for Auto Layout in Figma?

    Shift+A applies Auto Layout to a selected frame.

    Why isn’t my Auto Layout frame resizing?

    Check the sizing setting on each axis — if it’s set to Fixed instead of Hug contents or Fill container, the frame won’t respond to content changes.

    Can I nest Auto Layout frames?

    Yes, and it’s standard practice — most real components (like cards) are built from nested Auto Layout frames combining vertical and horizontal layouts.

  • Design systems 101: building components that scale

    Tutorial · Updated July 2026 · 8 min read

    TL;DR

    • Start with design tokens (color, spacing, type) before building any component.
    • Use variants inside one component, not multiple separately-named components.
    • Written usage guidance matters as much as the components themselves.

    A design system doesn’t need to be large to be useful — a small, well-organized one for a single project beats a sprawling, undocumented one every time. Here’s the order that actually works when you’re building one from scratch.

    1

    Start with tokens, not components

    Colors, spacing, and type sizes as reusable values (design tokens) come first. If you jump straight to building buttons, you’ll end up rebuilding them once your color palette changes.

    2

    Build the smallest components first

    Buttons, inputs, and tags before cards or page templates. Small components composed together are what make larger ones easy to update later.

    3

    Use variants, not duplicate components

    A single Button component with variants (primary/secondary, small/large, disabled) is far easier to maintain than five separately-named button components.

    4

    Document usage, not just visuals

    A design system without written guidance on when to use which component becomes inconsistent fast, even with perfect components. A short usage note per component saves far more time than it costs.

    5

    Version it like code

    Treat breaking changes to core components as a version bump, and communicate them to whoever consumes the system — design systems that change silently erode trust and get abandoned.

    The mistake most beginners make

    Building the flashiest components first (cards, hero sections) before the boring foundational ones (buttons, inputs, spacing tokens) is the most common mistake. It feels productive, but you end up rebuilding those flashy components anyway once the foundation changes. See our Figma for beginners guide if you haven’t yet learned components and Auto Layout, both of which this relies on.

    FAQ

    What’s the first thing to build in a design system?

    Design tokens — colors, spacing values, and type sizes — before any actual component. Components should reference tokens, not hardcoded values.

    How big should a design system be for a small project?

    Small and well-documented beats large and undocumented. A handful of core components with clear usage notes is more useful than dozens of undocumented ones.

  • Figma for beginners: your first file, frames, and components

    Tutorial · Updated July 2026 · 9 min read

    TL;DR

    • Figma’s four core tools: Frame (F), Rectangle (R), Text (T), Move/Select (V).
    • Auto Layout (Shift+A) is the single most important feature to learn early — it makes frames resize and reflow automatically.
    • Components (Cmd/Ctrl+Alt+K) and Styles keep designs consistent and make global edits a one-click fix.

    Figma’s free Starter plan is enough to learn everything below — you don’t need a paid plan to work through this. Here’s the order that actually makes sense when you’re starting from zero.

    1

    1. Create a file and understand the canvas

    Figma opens to an infinite canvas. Frames (not “artboards”) are the containers everything lives in — press F and drag to create one, or pick a preset size (like 1440×1024 for desktop) from the right panel.

    2

    2. Learn the four tools you’ll use constantly

    Frame (F), Rectangle (R), Text (T), and the Move/Select tool (V). Everything else in Figma is a variation or combination of these four.

    3

    3. Understand layers and grouping

    Every object you draw appears in the Layers panel on the left. Group related objects (Cmd/Ctrl+G) to move and style them together — this becomes essential once a design has more than a handful of elements.

    4

    4. Build your first component

    Select any object or group and press Cmd/Ctrl+Alt+K to turn it into a component. Components are reusable, and editing the original (the one with the diamond icon) updates every copy (instance) at once.

    5

    5. Use Auto Layout for anything that needs to resize

    Select a frame and press Shift+A to apply Auto Layout. It turns a static frame into a flexible container that reflows automatically when content changes — the single most useful Figma feature for building real interfaces.

    6

    6. Style with local styles, not one-off values

    Save colors, text styles, and effects as reusable Styles (in the right panel) instead of manually re-entering hex codes. This is what makes global changes — like a brand color update — a one-click fix instead of hunting through every layer.

    The one habit worth building early: use Auto Layout on every frame that holds text or a list of items, even in practice files. It feels slower for the first few designs and pays off enormously the moment you need to add one more button or edit a headline.

    What to practice next

    Once these six are comfortable, the next useful skill is building a small design system — a shared set of components and styles for one project. See our design systems 101 guide for that next step.

    FAQ

    Is Figma free to learn on?

    Yes, the free Starter plan supports up to 3 files and includes every feature covered in this guide, including Auto Layout and components.

    What’s the difference between a frame and a group in Figma?

    A frame is a container that can clip content and use Auto Layout; a group is just a loose collection of objects moved together with no layout behavior. Use frames for anything that needs structure.

    Do I need to learn Auto Layout as a beginner?

    Yes — it’s the feature that separates static mockups from designs that actually behave like real interfaces, and it’s used constantly in professional Figma files.