Design Tactics #5 — Lottie files 🤝 Interactive Components
Welcome to the 125 new readers (1225 total) 👋
There’s a ton of goodness in this issue including two previously unreleased walkthrough videos so I won’t waste any time… let’s dive in 👇
Using interactive components for Lottie files
As many of you know, I am a huge fan of Lottie files and believe that everyone should be leveraging them to add animations to their designs. Well… I recently tweaked the way I use them in Figma and it’s a game changer for design systems. Check out the tweet below for a full walkthrough and you can also play with the Figma file.
Oh and by the way… shoutout to Rafa who brought this up in the Figma Academy prototyping discussion board!
Investing in "Template" components
We’ve been working on a totally new product at Maven and the best decision I’ve made so far is nailing down a core “Template” component that I can use to speed up my process.
You shouldn’t be assembling the same UI over and over again while building out screens.
And if you make a tweak, you definitely shouldn’t be making that tweak more than once…
Here’s a quick video showing you how it works 👇
Investing in template components in Figma
Using "swap libraries" to create a theming system
At Maven we’re incorporating theming into our student experience from the get-go, so I created a system to quickly swap between radically different themes as a way to test my designs (and have a bit of fun too 😇).
Here’s a step by step walkthrough 👇
Using swap libraries for theming in Figma
On the note of color objects, here’s a step-by-step process walking you through how I set up the color system for Maven.
Should we be red-lining as a part of handoff?
Historically, I have not red-lined. It feels a bit outdated and I’d rather teach people how to fish than hold their hand. Not to mention it’s tedious work. So instead of indicating things like padding directly in the file, I’ve tried my best to equip developers to get the most out of Figma by creating docs like “Figma for engineers” and incorporating basic training (like measuring) into their onboarding. And you know what…it’s worked!
That being said, I came across a new automation made by Jake Fleming and it’s definitely making me reevaluate things…
This took me less than 30 seconds...
It is so unbelievably easy to mark up spacing values using this automation that I started experimenting with it and so far it’s pretty dang cool.
Click into the thread below to download the automation and play with it yourself. If nothing else, it’s pretty fun :)
Some new portfolio inspiration
I’m tired of being asked for portfolio recommendations and not having answers… so I’m making a point to save sites that I think are worth emulating and I definitely found one last week.
Check out Tyler Benning’s personal site
It’s clean, full of little big details, and the case study writeups are on point. If you also enjoyed poking around then take 30 seconds and tell him so on the Twitter bird—you might just make his day :)
Tyler's site
P.s. Before you go, take 10 seconds and let me know if you enjoyed this issue using the text button below. I want to make this the highest value design email that hits your inbox and the feedback helps :)