Issue #13

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, Shopify 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 + Gameto 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 Valleygot 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 blokdotsapp, 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.