Why Figma wins. WWDC. Design process.
Welcome, new subscribers from Designer News and Sidebar! It’s great to see so many new people joining the newsletter and sharing it over the last couple of weeks. Thank you for subscribing!
We have lots to cover in this issue. Kevin Kwok wrote a popular post on “Why Figma Wins” from a VC perspective that I highly recommend reading. Apple held their Worldwide Developers Conference online for the first time and presented major visual updates to both macOS and iOS. Figma community already built kits for iOS 14 UI and Widgets, and jumped on a challenge to recreate Big Sur icons. The team at Evil Martians shared tips on using Auto Layout, while a few other teams shared their experience of switching to Figma and how it compares to other tools. Enjoy!
— Eugene
App Updates
Improved vector measurements
“Hold the Option or Alt key while in Vector Edit mode to see precise measurements between points.” The team at Figma is on fire lately — there was at least one app update in every issue since March!
What’s New
Why Figma Wins
That blog post made the rounds lately, and for a good reason. If you’re curious about a bigger picture of why Figma is so important, it’s a must-read. Also, see the discussion on HackerNews.
Creating a collaborative classroom remotely with Figma
David Hoang is a Director of Design at Webflow and teaches UX Design at General Assembly. He provides an interesting look at how COVID-19 forced him to lean on Figma to be the core foundation of how they’d approach learning.
Apple WWDC, macOS Big Sur, and iOS 14
Apple Design Resources
Official design resources with all the new stuff announced at WWDC, including files for all platforms and in multiple formats, except for Figma. This is a big omission on Apple’s part, but luckily we have a thriving community that quickly rose to a challenge.
iOS 14 UI Kit for Figma
Joey Banks built this whole kit before some people even watched a keynote! Awesome work and incredibly useful for anyone designing for iOS.
Apple Widgets UI Kit
The team at Doist recreated the just announced Apple Widgets from iOS 14.
macOS Big Sur Icon Template
A template provides a foundation for designing your Big Sur app icon.
@flyosity: Can Big Sur icons be designed without Photoshop?
Mike Rundle brought a good point, but I liked the most how soon it became a friendly challenge, and lots of talented designers proved that it’s possible. See some examples of recreations below.
@mds: Creating the Siri Icon in Figma
See also his Figma file.
@skirano: Recreated the new FaceTime icon
See also his Figma file.
@rogie: Contacts icon and Find My icon
In case you missed some textures lately.
@Gavmn: Getting started on my Big Sur dock
Beautiful adaptations of popular apps icons for Big Sur.
Using Figma
Figma Auto Layout: Practical tips for dynamic designs
The team at Evil Martians shares how designers and engineers can speak the same language by using dynamic components built with Auto Layout. The article presents multiple techniques with good animated examples.
Office Hours: Mastering Components
“Join Designer Advocates Joey and Rogie as they dive into components: see them leverage constraints, apply auto-layout, explore negative frame spacing, styles, and more.”
@joeyabanks: Go to figma.com/new to quickly create a new file
A small timesaver if you’re designing in the browser.
@rogie: Set opacity by pressing the number keys
Useful keyboard shortcut to keep in mind!
@fionaosaurusrex: Who’s using Figma for specs, documentation, etc?
There are some great examples in replies. Make sure not to miss charts shared by Rasmus Andersson.
Build it in Figma: Designing a Book App: Prototyping and Demos
The 3rd and final part of Rogie’s series on designing a book app.
Design Process
The power of pair design
Nine things that team at Si digital learned while collaborating on projects in Figma. “If it’s a small project, two can be a crowd for side by side designing. Bring in a large project with a ton of pages and a tight deadline, two becomes the only way to deliver.”
How to get closer with your developer
A recap from a presentation that product designer Helena Jaramillo from Coda recently gave. “In my experience, knowing how and when to collaborate with others plays a large factor in a project’s success. Here’s a look at how I’ve worked to bring engineers into the design process as early as possible.”
Switch
Transitioning our Design System from Sketch to Figma
What makes this switch story interesting is their previous setup with the design system source of truth in React components and automatic generation of Sketch symbols from them. While switching to Figma, they ended up manually recreating components, and that resulted in a higher quality comparing to auto-generated Sketch symbols.
Figma vs. Adobe XD: How we picked our next design tool
While the title mentions only Adobe XD, I liked how they also tried Sketch for Teams and Framer X before settling on Figma. Their final scoresheet is very detailed and seems quite accurate.
Migrating to Figma
After leading two migrations from Sketch, Abstract, and Zeplin to Figma in the past two years, Iougo Huan shares what he learned to help your team in the migration process.
How to evaluate design tools
A framework for evaluating design tools from the team at Figma. “To find the right fit, it’s not just about reading countless articles and reviews to identify the ‘best in class‘ option. Rather, there are a number of considerations — team size, distribution, workflow — that should inform the decision.”
Convert Figma to Sketch files in one click
No idea who needs this, but worth bookmarking just in case.
Plugins
Pencil Pal
Plugin to get a little more out of the pencil tool. Seems like an essential tool for people using Figurative app on an iPad Pro — see an impressive demo from Pablo Stanley.
@hyumankind: What are some of your current favorite plugins?
Lots of great recommendations in the replies.
Design Systems
G Suite Add Ons UI Design Kit
Design & Documentation kit of Card framework components used for building G Suite Add Ons.
Salesforce
Salesforce published multiple parts of their Lighting Design System.
GitHub Primer
Can’t imaging a better place for GitHub to share their design system.
Community
CSS.gg
The project provides 700+ open-source vector icons in multiple formats. Make sure to check out their website as well.
Figma Charts Infographics UI kit
“Figma charts library made of components. Contains most common data visualization patterns from simple bar charts to complicated heatmaps and financial candlesticks.”
SpaceX Crew Dragon Flight Control UI
Beautiful recreation by Rahul Chakraborty. Also on this topic, see the article ”How I recreated the SpaceX dashboard UI” by Ulises Siriczman.
Chess With Friends
It’s a simple design, but the idea is brilliant.