Organizing projects. Fine-tuning typography. Dylan Field AMA.
Summer is a slower time for many businesses, and a good opportunity to do an internal cleanup. This issue has an entire section on organizing your files and projects in Figma. There are also many interesting videos, like Figma55 on building stretchy layouts with Layout Grids and Constraints, and Google Design on crafting dark themes. “Office Hours” videos by Figma are always a great way to learn something new as well. In the end, don’t miss an interview and AMA with Dylan Field.
— Eugene
P.S. I added the Sponsorship page to Figmalion website. If you have a product related to Figma, design tools, or UI design, consider supporting this project and sponsoring the newsletter’s next issue.
App Updates
Fine-Tune Your Typography
Tweak the spacing for individual letters, adjust the line height of individual paragraphs, and fine-tune font weights.
What’s New
Case Study, Acura: Beat That
Active Theory was tasked by Acura with celebrating 20 years of driving through an immersive racing game. They used Cinema4D for track design, Substance Painter for car models, and a custom Figma pipeline to bring each unique UI style directly into the engine to be rendered with WebGL.
How Figma Saved Us During a Lockdown
The team at Little Miss Robot wasn’t happy with their workflow, and how many tools they had to use, so they decided to try Figma. The beginning of COVID-19 made it the perfect setting. The result? “We feel like Figma isn’t just another design tool, but rather an “enabler.” It lets you create without adding many technical limitations. And you can use it to collaborate and communicate in a no-nonsense but versatile way.“
Using Figma
Figma in 55 Seconds: Leveraging Stretch Layout With Constraints
Great video by Figma55 channel, explaining how to use stretchy Layout Grids in conjunction with Constraints. It’s based on my article from a few weeks ago, but video is a great medium to demonstrate that trick.
Craft a Dark Theme With Material Design
Liam from Google Design shows how to craft a dark theme to complement your app’s Material Design light theme using Figma.
Mastering Animations in Figma by Building 7 Common UI Animations
The article covers some of the most common animations found in apps and websites and how to implement them in Figma.
Office Hours: 30 Time-Saving Tricks From Figma Experts
Anthony and Rogie, Designer Advocates at Figma, share their favorite lesser-known Figma tips, including keyboard shortcuts, to help you save time.
Office Hours: Mastering Vectors
A deep dive on scalable vector creation: learn about Figma’s unique and powerful editor capabilities using vector networks, boolean operations, texturing techniques, smart shapes, and corner smoothing.
Build it in Figma: Design a Responsive Website
In the first part, Rogie uses constraints and components to build navigation that scales from mobile to desktop. In the second part, he shows how to use Auto Layout to design flexible grids, hero, and card components that adapt to any browser size.
Build it in Figma: Design a Cohesive Icon Set
Noah Jacobus from Metalab and Designer Advocate Rogie King create a cohesive icon set for a mobile app.
Figma Tips & Tricks
A collection of a few useful tips in Post-it format.
Organizing Files
Organizing Project Files in Figma
Rafal Tomal suggests an interesting way to separate his working files from client previews in Figma.
How to Setup Your Figma File for Product Design
Femke shows how she organizes her files with covers, project documentation, design states, etc.
How I Organize My Figma Files to Overcome the Creative Block
Carola Pescio Canale shares how she is organizing Figma files to get unblocked from the creative block. In the end, she provides a template on Figma Community.
Design Project Template
A project template from Dropbox, including project cover, status, problem framing prompts, and checklist.
Plugins
Figma to HTML
I wrote about plugin HTML to Figma before, but now we came the full circle.
Scripter
Scripter provides a fun and safe environment for playing with the Figma plugin API without the need to write actual plugins.
Apps & Integrations
Anima
Cool app for creating high-fidelity prototypes and exporting HTML from Figma designs. See also their review on DesignCourse YouTube channel.
Quant UX
Quant UX is a prototyping tool supporting importing from Figma. I was impressed with their tools for analyzing data collected from user tests.
Pitchdeck
“Magically create and present stunning slide decks from your Figma designs.”
Resources
Avatar Illustration System
By swapping components around, you can build your own avatar.
Contra Wireframe Kit
A starter wireframe kit for quick design and prototyping of ideas. Its library contains more than 150+ components and 50+ ready to use mobile screens.
WatchOS UI Kit
Great resource if you’re designing for Apple Watch.
Backstage
Interview with Dylan Field, Co-Founder and CEO of Figma
Dylan Field talks about the early days of Figma, fundraising during COVID, and his experience as a first-time CEO on podcast Station F.
AMA with Dylan Field: Co-Founder & CEO of Figma
Organized by Hack Club.
Conversation with Yuhki Yamashita, VP of Product at Figma
A good conversation on his career, the PM’s role, what other projects he finds interesting, and more.
How Figma Wins Their Customers
Interview with Jason Pearson, Figma’s Head of Product Support.
In the File: A Look Into Building Selection Colors and OpenType
Marcin Wichary, Design Manager at Figma, gives an inside look into how selection colors and OpenType support were built.
Creative Tools Meet the Internet
Figma launched an About page on the history and mission of the product, and it’s truly gorgeous!