Liquid mesh. FigMayo. Deep dives.
Sponsor
Design teams need DesignOps
Find out how Zeplin and DesignOps go hand in hand to keep workflows and collaboration efficient for designers and stakeholders.
What’s New
How Figma draws inspiration from the gaming world
Engineering Manager Alice Ching discusses how Figma draws inspiration from the gaming world in its development process. There are similarities between video game engines and Figma’s tech stack, with collaboration and creating delightful user experiences being the key aspects.
Deep Dives with Joey Banks
Ridd just launched Deep Dives, “a new interview series full of stories and advice to help you take a huge leap forward in your career”. In the first episode, Joey Banks gives an in-depth look at what it’s like to lead design systems at Twitter and Webflow, shares his strategies for structuring component libraries, working efficiently in Figma, and even keeping up with all of the latest plugins and tooling.
Using Figma
Liquid mesh gradients
Cool technique from Nitish Khagwal for creating animated liquid mesh gradients.
Mirrored components
A simple but fun technique for creating cool animations with mirrored components.
3D Abstract Loader
Tutorial from Samarth Jajodia on creating a cool animation with a few shapes, gradients, and blend modes with Smart Animate.
Create an adjustable progress bar in Figma
Learn how to build a dual range slider that is adjustable using Auto Layout so you don’t have to create a ton of variants to show different options.
Figma Parallax Effect
“Learn how to create an immersive parallax effect right inside Figma, in less than 15 minutes.”
10 Figma hacks that designers need to know
Great list of Figma tips from the ADPList.
Nudge, Zoom, and Slice tool
Molly with 3 good tips. I have to admit that Slice is the dustiest tool in my toolbar.
Cascading Components — A way to organize Figma component variants
In this guide, Bruno Temporim Carneiro shares a method for structuring Figma components through nesting and organizing variants. This approach allows for easy modification and updates to components.
Creating components
A new video from Figma is going back to basics — what components are, why we use them, and how to create them. See also a couple more new tips on Component properties and Variants.
FigJam for User Research Card Sorting
“FigJam is the perfect card sorting tool for research teams. In this tutorial, we’ll teach you how to create a card sorting template and how to use FigJam to run a card sorting activity with your participants.”
How we Jam: Mixpanel’s toolkit for coaching designers and building a culture of professional growth
“Get an inside look into how the design team at Mixpanel builds internal morale, a culture of coaching, and team trust. In this livestream, you’ll hear directly from two design managers about how they’ve made the relationship between managers and designers more human-centered. They’ll share insights on how to foster a culture of collaboration and feedback, templates for both managers and ICs, and provide practical strategies and tactics to use in your next 1:1!”
Resources
FigMayo
Love this new app’s approach — instead of keeping your design system in one place and documentation in another, FigMayo lets you create and publish docs directly from Figma. Any change made in Figma to naming, structure, components, or notes can be published automatically, drastically simplifying and speeding up your workflow.
Design System Governance Process
Brad Frost published a sample design system governance process based on his old blog post.
Cosmic Icons
600 icons in 17 categories designed on a 24px grid by Daniel Wodziczka ($7).
Pikaicons
A new set of beautiful SVG icons crafted in Figma. The free preview includes 100 basic icons.
Plugins
Automator use cases
Great examples of automating grunt work with the Automator plugin.
TransformMe
A new plugin for manipulating design elements to achieve interesting visual effects. “The plugin provides a wide range of features, including effortless horizontal and vertical movement, adjustments to size in both dimensions, rotation, duplication, and more.” See the demo video to come up with ideas for specific use cases.
Backstage
Advocating for Designers at Figma with Luis Ouriach
In this video, Darshan Gajara from Consistent Creators podcast talks to Designer Advocate Luis Ouriach about his role at Figma, overcoming burnout, building an audience, and the breakdown of his viral Twitter threads.
How plugins work
Fascinating comments from Sho Kuwamoto, Figma’s VP of Product, on how plugins are implemented. Each plugin runs in a security sandbox — “We actually took a JavaScript VM, compiled it down to WebAssembly, and then we run that VM inside of the browser. So it’s a completely separate engine than the native JS engine. For security reasons, we don’t want two scripts running inside that VM, because then the two scripts could potentially have access to each other. And we don’t want to run two instances of this VM, for memory reasons.” 🤯