Links & Universal Search. Stay at Home Valley. Building Selection Colors.
Six months ago, when starting this newsletter, I was worried that there might not be enough content for a fortnightly digest. Now I regularly have to pass on links to keep the newsletter’s length under control. It’s great to see how fast the community is growing and how many cool things it builds.
Since the last time, Figma released Links, Spotify wrote about their ways of working and organizing files, VMware ran a remote design sprint, the community built Stay at Home Valley, Marcin Wichary shared the process of building Selection Colors, and Blokdots came up with a way to connect Figma prototype with Arduino. If you enjoy this newsletter, please share it with your circle.
— Eugene
App Updates
Look no further: New ways to search and provide context in Figma
Links (announced at Config 2020) and Universal Search are finally here! Check out Links Playground + Game to learn how to use them.
What’s New
How Spotify organises work in Figma to improve collaboration
Spotify Design shares how they have shaped Figma to their needs and culture. This post focuses on file structure: “Allowing multiple people into the same file doesn’t automatically lead to better collaboration. Our files would need to be organised in a way that is visible and discoverable by everyone. After all, you can’t collaborate on work that you can’t find.” See also: Spotify Ways of Working.
Embracing WFH with a Remote Design Sprint
The product design team at VMware switched to working from home during the pandemic and piloted a remote design sprint within one of their groups. In this post, they share the process and takeaways.
Building a design system for Babylon Health
Jack Roles talks through the difficulties his team was facing using Sketch, why they selected Figma for creating Babylon DNA design system, and what they’re still learning.
How to build a Design Starter Kit in Figma
Marc Andrew, a creator of Cabana Design Kit featured in the last issue, shows how to put together your kit to kick-start design projects faster. Part 1 covers color palettes, typography styles, and shadows.
Figma’s First Conference — Config 2020
Chieri Wada describes a life-changing experience of attending Figma conference two months ago, then looks at how the same design community came up with creative ways to stay in touch while social distancing. (Seriously, can you believe the conference was only 2.5 months ago?!)
Newest 20 free Figma templates to kickstart your next project
A review of free Figma resources recently published by a community.
What Sketch must do to save its business
Good thoughts on the future of Sketch and competing with Figma. I used to love Sketch, but can’t see what can save it from a slow decline at this point.
While stuck at home, this VC built a virtual version of Silicon Valley
A shared Figma community project Stay at Home Valley got featured in Fast Company. The article highlights lots of smart details, so it’s worth checking even if you saw the project before.
Design Software Startup Figma Closing In On ‘Opportunistic’ Funding At $2 Billion Valuation
“Figma is in talks to raise a new funding round from venture capital firm Andreessen Horowitz at a valuation of $2 billion, multiple sources with knowledge of the matter tell Forbes. The round, which is still being finalized, is expected to raise at least $50 million, three sources say.”
Enterprise Tech 30: Figma
Nasdaq speaks with Dylan Field after Figma was featured in Enterprise Tech 30 list.
Videos
How to make a variable width progress bar in Figma
Smart workarounds for making reusable progress bar components that can indicate different values.
Animations in Figma
Unn Swanström is looking at how big a difference animations can make in prototypes and shares a few tricks for creating them in Figma.
Office Hours: Let's Talk Teams with Designer Advocates Anthony DiSpezio and Rogie King
In this weekly Office Hours in Figma, Anthony DiSpezio and Rogie King are talking about team structure, multiple component libraries, versioning, and updating components at scale.
In the File: Giving Feedback Remotely
Mark Johnson (Principal Product Designer) and Jess Chaidez (Product Designer) from Mixpanel discuss positive and productive ways to request and deliver design feedback.
In the File: Going Further with Pair Designing
Design leaders Nina Mehta from Mailchimp, Hareem Mannan from Segment, and Katarzyna Babula from Gusto discuss how to solve problems faster through pair designing.
Tweets
Marcin Wichary: The process of building Selection Colors
Great thread from Design Manager at Figma on how one of its most unique features came to life, from the initial pitch to design challenges and decisions.
Yuan Qing Lim: Introducing Figma Plugins Stats
Node.js command-line utility to get live and historical stats for your Figma plugins. Great tool for plugin authors.
Yummygum: Copy and paste individual style properties between layers
This is a huge time saver. Can’t believe I never tried this before.
Anthony DiSpezio: Hold space while dragging over (or inside) frames to preserve layer order
Another great but well-hidden feature.
Joey Banks: Using emoji when naming components
Make sure to check replies for more ideas.
@blokdots: Connect your Figma GUI with Arduino prototype
Plugin to connect Figma to the blokdots app, making it possible to use hardware components like sensors and buttons to control and manipulate elements right in Figma. Mindblowing!
Morgan: Why Figma is so great for quickly designing custom logotypes
Nice to see how vector networks and rounded corners speed up the design process.
Ismail Elazizi: Let’s design this animation in Figma
A step-by-step walkthrough for creating a fairly complicated animation in Figma.
Plugins
Layout Grid Visualizer
Generate layers from your layout grids so you can export images or prepare diagrams to supplement your design systems documentation.
Frametastic
Easily test your design in different viewports by saving your favorite frame size combinations. Use any combination for new frames or for duplicating your current selection.
Resources
Convert Adobe XD to Figma files
“Our converter allows you to open XD designs directly in Figma. All elements get converted 1:1.”
Figma Asset Downloader
Small utility to optimize and download Figma assets to your computer.
Community
Shipwright UI Kit
Free and fully editable design system built in Figma.
Atlassian Design Guidelines
So far, Atlassian shared their Foundations and Components packs.
Custom Minecraft Skins
Shared this with my kid and can’t wait to see what she will come up with.
Chat Kit
Another great resource by Mixpanel: “a specific kit to quickly collaborate and chat with teammates in Figma, in context.”
Printing from Figma
Templates and guides for printing from Figma in millimeters and inches.
From the Headquarters
The case for lightweight prototyping
Alia Fite makes a point that prototypes don’t always have to be high-fidelity. She shares the benefits of lightweight prototypes and some ways the team at Figma is using them.
Research, remotely
A few tactics for making remote user research a little easier, including tips on doing user interviews and collaborating on shared boards.
Bringing Figma to even more classrooms
Figma for Education program now includes online courses, bootcamps, school-sponsored hackathons, and more.
How Inneract Project empowers the next generation of brown and black designers
Great to see how Figma’s mission to make the design more accessible empower underrepresented communities.
11 activities in Figma for your classroom
Miguel Cardona teaches New Media Design at the Rochester Institute of Technology (RIT) and shares some of the activities that he does with students in Figma.