Config 2021, Netflix design system, and REI’s text field with 3,360 variants
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!
— Eugene
Sponsor
Northwestern’s Online MS in Information Design and Strategy
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.
What’s New
Config 2021
Config is back on April 21st, 2021! The call for speakers is open through February 21st.
New admin experience on Figma’s Professional plan
Figma redesigned team settings to make user management and billing more efficient.
Embed live Figma files in WordPress P2
“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.”
What is one thing you wish Figma did and didn’t do?
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.
How Figma’s Principal UX Writer is helping build design software that UX writers love
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.
Using Figma
Hawkins: Diving into the Reasoning Behind our Design System
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.)
One Figma Component — 3,360 Variants
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.”
How I programmatically built 256 new design system components in Figma
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.”
Avoiding Figma file complexity
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.
A template for Figma wayfinding
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.
How to turn your Figma designs into responsive prototypes
Creating responsive prototypes with Figma and Anima.
Tackling Figma Auto Layout: A 6-Step Guide
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.”
The Great Collaboration
Students of Justus Wunschik’s online class came together to build a beautiful SimCity-inspired city with Figma.
How do you create just a dot?
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.
How to make a “Question Mark” icon
In this follow-up to a previous question, Steve Schoger shows his process for building one of the icons in Heroicons set.
Coffee with Charli: Jumpstart your design system
“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.”
Coffee with Charli: The 80/20 rule
“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.”
Figma tutorial: Card component with Auto Layout
“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.”
In the File: Developer and designer, working together to build design systems
“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
Using stroke dash for pixel-perfect intervals
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.”
Use a 1×1 frame to add overlapping elements
A nice trick to work around some of Auto Layout’s limitations.
Hide left sidebar
Command-\ hides all UI, while Command-Shift-\ hides only the left sidebar.
List of objects beneath your cursor
A good tip from Miguel – Command-Click on an object to show a list of all layers below.
Figma in 5: Design Systems: Components
In this part of Figma in 5, Rogie talks about Design Systems with a focus on components.
Figma tips: Adding a contents page to your prototypes
Design Advocate Luis shows how to set up a contents page to navigate through multiple flows.
Figma tips: Navigating Frames and Pages in Figma Design
“Quickly master your documents pages and frames using simple shortcut keyboard actions.”
Figma tips: Batch Import Workflow
“Here is a quick workflow with multiple batch operations that can show you how to import, rename, organize, componentize and publish assets.”
Figma tips: Scroll to map interactions
“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.”
Office Hours: Tips and tricks from the teams that build Figma
“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
Visualizing lunchboxes
A creative way of using components to create custom graphics.
3D illustrations
Timo Lins makes impressive 3D illustrations with Figma components.
Resources
Font Awesome icons
Both Regular and Brand icon sets available as ready-to-use components.
Free Emoji Pack by Paca
Well-crafted pack with more than 1,700 emojis, which are nicely structured and easy-to-use.
FigmaStats
Figma plugin analytics page.
Plugins
Export Presets
Create and automatically apply custom Export Settings. Share them across your files and projects. Includes default presets for the most popular platforms.