Figma Maker Week. Remote work. 3rd-party apps.
In this issue, we’ll look at public projects from Figma Maker Week, talk about remote design as a new reality for many teams, learn how other designers and developers use Figma, and how design systems are organized in large teams. There is also an unusually large number of products built for Figma — iPadOS and Linux clients, a collaborative workspace for planning work, and plugin for creating and customizing illustrations. Enjoy!
— Eugene
P.S. Thank you to everyone who showed interest in my upcoming book “Designing in Figma”! After writing this newsletter for six months, I thought I know the app pretty well, but I keep discovering new features and tricks as I work on the book. Makes me appreciate a fantastic tool we have in our hands even more!
App Updates
Bringing Live Figma Embeds to Your Team’s Favorite Tools
Now it’s possible to embed private Figma files into the tools used by the whole team, like Dropbox Paper, Notion, Coda, Jira, etc.
Maker Week at Figma
Figma In Quarantine: The Musical
Twice yearly Figma holds a Maker Week, where the team gets the chance to work on whatever project they want. This epic musical takes the cake this time!
Been missing the beautiful Figma office so much that I’ve painted it
Beautiful paintings by a software engineer at Figma.
I drew pictures of our office! Here’s a digital tour
And another set of beautiful artworks! What a talented team they have.
Monument Valley level recreation with components and Auto-Layout
The link to a community project is in the replies.
A time-lapse visualization of the main internal Figma code repository
Impressive demo by Thomas Wright.
Web Cards Plugin
Noah Levin built his first plugin for turning URLs into little cards. Great for organizing shopping inspiration and visually including relevant links to the project. Now waiting for their API to support links.
Using Figma
Meng To’s UI Design Livestreams
Lots to learn from the founder of Design+Code.
Introduction to Figma for Developers
Jason Lengstorf and his guest Ryan Warner give a feature tour and teach the fundamentals of Figma to developers.
Build an Adaptive Button with Figma Auto Layout
Ryan Warner once again, this time at Egghead: “By adding auto-layout to our button component, we can change the text within the button while automatically maintaining consistent horizontal and vertical padding, just like we would in code.”
Build It in Figma: Designing a Book App for Designers
Rogie designs an app for discovering useful books for leveling up as a designer. In the first part of this 3 part series, he wireframes the ideas for the app. In Part 2, he works on visual design explorations.
For Those 10 Companies Figma Was a Starting Point to New Heights
“How design tool played a decisive role for businesses such as Microsoft, Uber and 8 more well-known companies.”
Thoughts on Figma UI and UX
Alex from Doist shared his feelings about trying Figma, and Rafa from Netlify pointed to some specific problems in its interface. My favorite part — Koen Bok from Framer showed up in replies to remind how much Sketch team raised the bar for the design tools.
Tips and Tricks
Copy-pasting SVGs in Figma is a breeze
One of my favorite time-savers!
Open Figma file URL from clipboard
I’ll piggy-back on this advice and suggest always opening Figma links in the app by setting the preference.
Wondering how many frames or instances you’ve created?
That’s a really smart workaround to gather stats!
Design Systems
In the File: Creating Multi-Brand Design Systems
Designers from Shopify, Condé Nast, and Harry’s share their experiences with creating and maintaining a design system across multiple brands.
Buzz Usborne: How we organize Help Scout design system
“Basically everything is centered around parity with React and proving designers/UI engineers with enough flexibility to use, extend and remix without detaching.”
Design Process
How to Pair Design (and Convince Your Boss to Invest in It)
Nina Mehta from Mailchimp discusses what design pairing is, how to structure it, and tips for convincing your boss that it’s a good idea. This is a recap from a livestream featured in Issue #13.
Working Remotely
Finding Design Inspiration at Home
“Knowing that we could all use a little dose of imagination, we asked members of the Figma design team to share the places they turn to for inspiration. Here, you’ll find their tips: making stickers, the power of social media, and how your camera roll can get you out of a rut.”
Designing a Workflow for the New Normal
Christine Lancaster thinks Figma is the right fit for designing in the challenging times of 2020. “Down with design elitism and preciousness. Let’s include the copy writers, the dev team, the client, the PMs, the whole shebang in our design process. Better collaboration means we end up building the right things for the right people.”
5 Resources to Help You Bring Your Remote Team Together
Designer Advocates Joey Banks and Rogie King share resources they’ve found that help make remote work feel less remote.
Products
Figurative
Figurative brings the desktop-class editor experience from Figma to iPadOS. Compatible Magic Keyboard, Trackpad, or even Mouse.
Pixelic
Pixelic is a collaborative workspace for Figma users to sync Figma pages, manage frame-level versions, exchange feedback, and manage design tasks in one place. Post ”When Figma isn’t enough for product teams” shares their vision on how a “third workplace” for Figma users could help designers save time and work better. Looks really promising.
FigPickle
Automatic daily backup of high-resolution images from Figma (.fig is not supported by the API yet). I thought that there could be a place for a 3rd-party tool like this when Cameron Moll couldn’t locate his Figma files.
Figma Linux
Unofficial desktop application for Linux made with Electron.
Plugins
Blush
The biggest new release: “Create and customize illustrations in your designs with Blush. Just choose a collection, pick a composition, and place it on the canvas. You can keep playing with the variations in the illustration to create something unique that fits your brand.”
Axure
Easily copy frames from Figma to Axure RP 9 or publish frames directly to Axure Cloud.
Scale
Scale any frame, its contents, and all effects to any defined width or height.
Community Projects
Visual Vocabulary
Symbols and connectors for describing information architecture and interaction design. Originally thought of and conceived by Jesse James Garret.
Glass Effect Mockup
“This is a simple mockup with a glass effect created from the video presentation of the new Microsoft tool, Office.”
Origami Paper Crane Kit
Print out one of the provided origami patterns, or design a custom one, and follow the instructions to create your own little paper masterpieces.
Pajamas UI Kit
GitLab’s open-source design system.
Inside Figma
Figma and the Future of Collaborative Design
Figma’s Director of Product Sho Kuwamoto joined All Turtles podcast to talk about building Figma, seamless collaboration, and life in general.
A PM’s Guide to Working with Designers
A keynote presentation by Yuhki Yamashita, VP of Product at Figma, on nine best practices for building trust, providing feedback, and creating unique value in the PM-designer relationship.
2 years later: inVision Studio makes Figma and Sketch look like Photoshop
This is just a brilliant follow-up! Pay attention to tweets’ dates.