Hello! 👋 Are you staying warm? We’ve been hit with a few snowstorms in the last weeks, so it’s a good time to get cozy and go through a reading backlog. This is one of the most densely packed and interesting issues I’ve sent in a while – hope you’ll enjoy it!
Figma announced the first Config of this year on April 21st, 2021. I can’t wait to hear their announcements! Netflix unveiled Hawkins, their design system used across 80+ applications. REI built a text input component with whopping 3,360 variants, while Uber programmatically created 256 components for map markers. In contrast to these two articles, Johan Ronsse makes an argument against overusing complex Figma features. Shopify shows how to set up your Figma projects to meet the needs of the whole team. And there are so many tips and tricks that I had to create a new section for them!
Build the in-demand skills, such as UX, UI, and HCI, to drive user interactions. Choose a track in content strategy, analytics, or learning design.
Config is back on April 21st, 2021! The call for speakers is open through February 21st.
Figma redesigned team settings to make user management and billing more efficient.
“You can now embed Figma files in P2 so everyone on your team can find and review the latest design files in a single workspace.”
Replies to this tweet by Sho Kuwamoto, Figma’s Director of Product, provide an interesting peek into the current state of things and what their team might work on next.
Chris Baty is the Principal UX Writer at Figma and was previously the head of UX writing at Dropbox. He’s also the founder of NaNoWriMo (National Novel Writing Month). In this podcast, he talks about joining Figma, the work he’s doing there to make Figma an exceptional tool for UX writers and content designers, and what it’s like working as a team of one.
Netflix presents Hawkins, their design system widely used across the Netflix Studio’s growing application catalog, which consists of 80+ applications. In this blog post, they explain why Hawkins was built, how they got buy-in across the engineering organization, and what their plans are moving forward. (BTW, the cover illustration is made by Martin Bekerman, whose other artworks you can see below.)
Luke Cardoni, UX Lead at REI, recently spent time improving the accessibility of form elements in their design system, Cedar. “It turned out that these UI components posed the perfect opportunity to start exploring Figma’s Variants feature, as each Text Input, Radio Button, and Checkbox has so many, well, variants.”
Uber took a programmatic approach to create 256 new components for map markers. “By automating the construction of the markers, I was able to avoid human-error and efficiently generate the full set of variants. Programmatically testing the components allowed me to thoroughly validate them under multiple scenarios and be confident of their quality.”
Johan Ronsse makes an argument against overusing advanced Figma features. After breaking down a few complex Variants into smaller Components or being unable to freely move an object in the layout built with Auto Layout, I tend to agree. With great power comes great responsibility.
Komal Javed from Shopify shows how to set up your Figma projects to meet the needs of your whole team. Project Index Template is available in Figma Community.
Creating responsive prototypes with Figma and Anima.
A new tutorial from Blush, based on Pablo Stanley’s Figma Crash Course on YouTube. “Learn the basics of Figma's new Auto Layout and speed up your creative workflow with this awesome feature.”
Students of Justus Wunschik’s online class came together to build a beautiful SimCity-inspired city with Figma.
Steve Schoger looks for the best way to create a dot that responds to the stroke width. There are some creative solutions in the replies, but making a rectangle with width and height set to 0.001 is the best one.
In this follow-up to a previous question, Steve Schoger shows his process for building one of the icons in Heroicons set.
“In this episode, Charli talks with her colleague Alf Salib, product design lead at ConvertKit. Together they dig into what it takes to implement a design system with a small team and get real about the challenges and lessons learned along the way.”
“In this episode, Charli talks sits down with Ashley Seto, lead product designer lead at Pinterest. Together they dig into what it takes to govern a design system and the systems and process in place that can help get everyone on board.”
“Auto Layout can be added to Frames to create dynamic Frames and Components that respond to the size of their child objects, such as a button that grows with the length of its label. In this video we'll teach you more advanced Auto Layout techniques to create a flexible card component for a trip planning website.”
“Design systems sit at the intersection of design and development. Lyft teammates Jeremy Dizon, Design Systems Product Designer, and Alex Lockwood, Design Systems Staff Engineer, will show off their design system and share how they collaborated to build it.”
Tips & Tricks
Really smart solution! “This trick uses the dash/gap length to calculate exact degree marks. This lightweight approach makes it easy to store all of the information for interval marks in a single stroke.”
A nice trick to work around some of Auto Layout’s limitations.
Command-\ hides all UI, while Command-Shift-\ hides only the left sidebar.
A good tip from Miguel – Command-Click on an object to show a list of all layers below.
In this part of Figma in 5, Rogie talks about Design Systems with a focus on components.
Design Advocate Luis shows how to set up a contents page to navigate through multiple flows.
“Quickly master your documents pages and frames using simple shortcut keyboard actions.”
“Here is a quick workflow with multiple batch operations that can show you how to import, rename, organize, componentize and publish assets.”
“Make scroll to map interactions in Figma Design. This demo uses placeholder frames in lieu of using the offset values for navigating a map with scroll to interactions.”
“We brought ten Figmates together to share their tips and tricks with you. We dove into features, covered getting started in Figma, plugins, and speed tips. You’ll hear from engineers, designers, designer advocates, product managers, and researchers.”
Made in Figma
The lighting and reflections here are mind-blowing. Don’t miss the outline in replies.
And another fantastic illustration made completely in Figma by Martin Bekerman.
A creative way of using components to create custom graphics.
Timo Lins makes impressive 3D illustrations with Figma components.
Both Regular and Brand icon sets available as ready-to-use components.
Well-crafted pack with more than 1,700 emojis, which are nicely structured and easy-to-use.
Figma plugin analytics page.
Create and automatically apply custom Export Settings. Share them across your files and projects. Includes default presets for the most popular platforms.