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.

🐦 Templates

It seems like Figma is either rolling out or testing support for templates, but so far, it’s been available only to some people.

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 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!