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.
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.
Tweak the spacing for individual letters, adjust the line height of individual paragraphs, and fine-tune font weights.
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.
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.“
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.
Liam from Google Design shows how to craft a dark theme to complement your app’s Material Design light theme using Figma.
The article covers some of the most common animations found in apps and websites and how to implement them in Figma.
Anthony and Rogie, Designer Advocates at Figma, share their favorite lesser-known Figma tips, including keyboard shortcuts, to help you save time.
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.
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.
Noah Jacobus from Metalab and Designer Advocate Rogie King create a cohesive icon set for a mobile app.
A collection of a few useful tips in Post-it format.
Rafal Tomal suggests an interesting way to separate his working files from client previews in Figma.
Femke shows how she organizes her files with covers, project documentation, design states, etc.
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.
A project template from Dropbox, including project cover, status, problem framing prompts, and checklist.
I wrote about plugin HTML to Figma before, but now we came full circle.
Scripter provides a fun and safe environment for playing with the Figma plugin API without the need to write actual plugins.
Apps & Integrations
Cool app for creating high-fidelity prototypes and exporting HTML from Figma designs. See also their review on DesignCourse YouTube channel.
Quant UX is a prototyping tool supporting importing from Figma. I was impressed with their tools for analyzing data collected from user tests.
“Magically create and present stunning slide decks from your Figma designs.”
By swapping components around, you can build your own avatar.
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.
Great resource if you’re designing for Apple Watch.
Dylan Field talks about the early days of Figma, fundraising during COVID, and his experience as a first-time CEO on podcast Station F.
Organized by Hack Club.
A good conversation on his career, the PM’s role, what other projects he finds interesting, and more.
Interview with Jason Pearson, Figma’s Head of Product Support.
Marcin Wichary, Design Manager at Figma, gives an inside look into how selection colors and OpenType support were built.
Figma launched an About page on the history and mission of the product, and it’s truly gorgeous!