Constraints and Layout Grids. Design by design. Design systems.
I decided not to send a newsletter last week, as the focus was on more important topics and conversations. While that’s still the case, let’s try to get back to our regular broadcasting.
In this issue, we’ll learn how to use Constraints with Layout Grids, how to control spacing with spacer components and Auto Layout, and see how a component-based approach can be applied to an illustration system. We’ll also look at how Microsoft builds Fluent UI design system, and how Dylan Field pitched Figma to the investors in the early days. Enjoy!
— Eugene
App Updates
Webhooks v2
Better integrate Figma with your team’s favorite tools. Trigger actions in tools like Slack and Jira whenever a file or library is updated, commented on, published, and more.
Scale Figma’s user interface
You can now adjust the scale of Figma’s user interface in the Desktop App.
Followers
Now you can follow people on Figma Community. In the Community section, you can switch the view from Popular to Following to see updates only from people you follow.
What’s New
Design by design
The Increment is a cool magazine published by Stripe, with every issue focused on one topic in how teams build and operate software systems at scale. The topic of the last issue is Frontend, and this article explores how integrated design tools are reshaping the workflows of the UX, UI, and frontend teams.
Which UI design tool should I use in 2020?
The article compares three main players — Sketch, Figma, and Adobe XD. Figma is the recommended tool, but Adobe XD has its own market with more complex prototypes.
My entire agile process to redesign scrimba.com
A good writeup of a complete redesign accomplished in 8 weeks, from branding research to final implementation.
How To
Using Constraints with Layout Grids in Figma
While working on the book, I learned about a powerful way to arrange objects using a combination of Layout Grid and Constraints. I wrote a short article for Prototypr.io explaining how it works.
Worry less about spacing in Figma
An interesting approach of using pre-defined spacer components and Auto Layout for managing space in design mockups.
Figma’s Auto Layout in action
“Auto Layout has been around for a while, but not everyone’s aware of the benefits it brings. It doesn’t replace constraints, they’re still very much needed. The trick is to use the right feature where necessary. I want to show you how to combine components, constraints, and Auto Layout for the best results.”
How to design an illustration system
I wrote about the illustration library and plugin Blush in the last issue. Now, Elsma Ramirez shares how she created The Munchies collection for it using a component-based approach.
Hacking Figma Prototypes with Overlays, Components, and Frames
Designer advocates Tom Lowry and Rogie King dive deep into some lesser-known capabilities of Figma’s prototyping tools.
Meng To: Use fill opacity to quickly change the theme of the UI
Good advice on when to use a fill opacity vs. layer opacity.
Meng To: How to create separators with Auto Layout
When you don’t use an Auto Layout, a Drop Shadow with blur set to zero may be a nice alternative.
Design Systems
How Fluent UI Unlocks the Next Generation of Microsoft 365 Experiences
A detailed look into how Microsoft is building a cross-platform Fluent Design System. They have an interesting take on building a Figma plugin to move away from fixed values and toward consistent design tokens that later translated into platform-specific code values.
The Design System That Alteos Built
Pavel Laptev shares the experience of using a design system approach in Alteos, including how they use Figma API to share design tokens with code.
Design System Starter
Gleb Sabirzyanov shares his starter kit for creating your own design system. It includes inputs, buttons, tags, dropdowns, tabs, type, color, etc. He also wrote a Twitter thread on how he used his Master plugin for building it.
In the File: Aligning Around a Design Systems Workspace
Jules Forrest and Dina Sporer from Credit Karma share how their team converged around a design system workspace to improve their design and delivery process.
Plugins
10 plugins that will make Figma better
Unn Swanström tries and reviews ten popular plugins.
The top 50 Figma plug-ins reviewed
“We sorted Figma’s plug-ins on most downloaded and we took on testing the top 50 in the list. Here is what we found out.“
Figma Plugins
Varun Vachhar walks readers through the process of building a simple confetti plugin from scratch.
Linky
Shorten, edit, and copy all your Figma share links.
Responsive
Preview your responsive designs inside Figma.
Ditto
Manage the words across your team’s product with a central source of truth.
Resources
Ionic Figma
A library of 110+ design components, based on a cross-platform mobile development framework Ionic. Use code “launch25” to get 25% off.
Layers Design System
Layers is a good-looking design system built with a distinct focus on accessibility.
Onboarding Screen Pattern
A beautiful pattern, inspired by African Art.
Figma Internals
How Figma uses font metrics
A description of how Figma calculates font metrics. Useful mostly for font foundries and type designers.
From the Headquarters
Figma’s Story, Part 1: My Thiel Fellowship Application
Dylan Field shares how he and Evan Wallace came up with the idea for Figma. In the first part, he shares his original pitch in the Thiel Fellowship application from 2011.
Dylan Field pitches seed-stage Figma to Daniel Gross
Next, Dylan pitches his company to Daniel Gross as if back in 2013. Ten minutes of mind-bending WebGL and JS demos.
Hear from Figma founder and CEO Dylan Field at TC Early Stage
“At Early Stage, we’ll talk to Field about staying patient during the product development process and then transitioning into an insane growth sprint. We’ll also chat about the fundraising process, how he built a team from scratch, and how he took the team remote in the midst of a pandemic, as well as chatting about the product development strategy behind Figma.”
The making of Maker Week
“Twice a year, we set aside a week for everyone at the company to explore a project outside of their daily responsibilities. Unlike hackathons — which are largely built for engineering and design — Maker Week is for everyone, across teams and skillsets.”