Design Tactics #15 — Figma 👉 Framer tutorial
Watch how I design the new Dive course cards from scratch
I spent this week creating an all new tutorial that I’m pretttty excited to show you so I won’t waste any more time…
Let’s dive in 👇
🔨 Designing the new Dive website in Figma + Framer
The #1 thing people in Figma Academy asked for more of was watching me design something completely from scratch.
So I made a tutorial for the Dive site that covers:
🧱 My process for building in Figma
💅 How I approach the finer details of UI design
🛳️ How I go from Figma to Framer
Ok here’s the full-length tutorial
Pay specific attention to how (and when) I use components 👇
Designing the new Dive website in Figma + Framer
The easiest way to take your visual skills to the next level
I don’t just want to create interfaces that are clean and intuitive (obviously still important)…
I want to ship UI that makes people go holy sh*t 😮
The only way I know how to make progress in that direction is to:
Constantly seek out inspiration
Meticulously organize it so that I actually look at it again
Find every opportunity I can to bring it into my own designs
Let’s look at a recent example
Like any aspiring designer, I’m always looking at what Rauno makes because it’s typically way better than anything that I could make lol.
But I don’t want to just look at a big composition and think “oh that’s nice” and move on with my day…
I’m always looking for at least one tiny UI detail that I can learn from—something I can pull out and incorporate into my work
Take this graphic for example 👇
Awesome dark mode style from Rauno
There are a few things that make me double take:
❍ The way his circle borders have a gradient so they fade out on the bottom (looks like natural lighting)
✨ The tiny shimmer stars
🔊 The subtle noise on the background
〰️ The gradient dividing line (it fades out at the top and bottom)
Any one of these four details can add that little extra something to a design. So I’m always trying to build up my database of these little big details.
Here’s how I incorporated them
This is the design for the new Maven course certificate 👇
Notice anything familiar?
Maybe it’s just me, but I think the gradient outline on the student photo and the lil’ star add a lot to the design.
Would it be ok without them? Definitely! But these are the finer details that I’m trying to master and the best way to get started is to emulate others.
So here’s my challenge to you
Relentlessly seek out and organize visual inspiration 💪
Two resources to help you get started:
This tutorial helping you build the ultimate design swipe file in Notion
This list of 10 designs that I’ve saved to my personal swipe file