Happy Holidays! Figma Persona. Shaders.
We almost made it through 2022! This was a hell of a rollercoaster year for me and my family, so I’m ready to take a break and warmly welcome 2023.
At Figmalion, I’ve published 40 issues and 609 links this year, bringing the total to 2,097. Thank you to all of my subscribers for reading and recommending the newsletter — it won’t exist without you! And thank you to the amazing companies who sponsored it this year — Zeplin, Maze, Webflow, Uno Platform, Story.to.design, Dive, and Figma Academy.
You’ll hear from me again on January 9th, 2023. Happy Holidays! 🎄
— Eugene
Sponsor
How to make Figma handoff easy
Going from design to development shouldn’t be a challenge. Here are 4 ways Zeplin makes handoff smoother and faster for your entire team.
What’s New
Figma Persona 2022: What’s your creative collaboration style?
Chances are you’ve already seen Figma personas shared on Twitter or maybe even took the quiz yourself. It’s a set of 21 thought-provoking but fun questions that will tell you about your unique working style. Great end-of-year team activity to learn a bit more about yourself and your team!
How Linear made the most of a DDoS
Back in October, Linear launched a new home page that went down under a DDoS attack. In a genius move to save the day, they’ve redirected their domain to the Figma file with a home page design and hosted a live Q&A right there. In this post, Figma and Linear discuss how it happened and what they learned.
Using Figma
The Easy Way to Build Responsive Components
Joey Banks is back with a bit of advice on his new approach to using Auto Layout for building responsive components. “With my approach today, I first like to drag out an unfinished component instance and stretch it in bizarre and unexpected ways to see what happens. If I can make this component work as expected in the strangest sizes, I’ll feel confident that it’ll work for nearly all situations.”
Primitive shapes challenge
Vijay challenges himself by limiting his tools only to primitives while working on this icon. It’s quite amazing what can be done by mixing imagination with 29 ellipses, 8 rectangles, and 1 frame.
Shaders
Dan Hollick with a fantastic deep dive on shaders. While this specialized area of graphics programming may seem too niche, shaders have been gaining popularity in UI design for animating gradients and creating cool special effects. In Figma, you can play with shaders inside Rogie’s popular Noise & Texture plugin.
Animated Mesh Gradients in Figma
If programming shaders is a bit too much for you, check out this video on how to create an animated mesh gradient in Figma with a combination of a few plugins and built-in tools.
Building blocks: Ask us anything
For the final episode of this season of Building blocks, Figma Designer Advocate Chad Bergman and Product Manager Jacob Miller spend the entire hour answering burning design systems questions.
10 Days of Figma Tips
Resize objects using your keyboard
Chad with a quick tip for resizing objects in Figma using your keyboard instead of the design panel.
Making various heart icons
Miggie is sharing a few tips on making a heart icon.
Creating duotone icons
Ana is building off of her tip on creating nested icons that preserve color overrides, and now makes them duotone.
Tips for presentations
Anthony gives a tip on adding prototype scrolling and interactive components inside your Figma presentations.
Prototyping overlay transitions in Figma
Miggie shows how to prototype overlay transitions for thumbnails using interactive components. This tutorial is intermediate and covers the use of overlays, Auto Layout, interactive components, and placing images.
Resources
V5 UI Kit
A ready-to-use web UI kit with predefined components and a few page libraries by Vijay Verma.
Jewish Stickers for FigJam
Just in time for Hanukkah!
Debugger