Nerdfox — whose motion design work was featured in the last issue — builds concept design for The Mandalorian promo website and animates it using Smart Animate.
Mixkit Art found a creative way to use Figma as a CMS for illustrations. Their team manually prepares uploaded illustrations for multiple formats, and when they are ready to be published runs a Lambda script that connects to the Figma API, exports high-resolution assets, uploads them to S3, and makes them live on a website.
The article dives deeply into different methods of adding animations to designs in Figma — GIFs, Figmotion plugin, simple prototypes, and Smart Animate.
It’s finally here! 🙌 The biggest news of the last week is a long-awaited release of Auto Layout. When adding it to a frame, the items inside are stacked next to each other vertically or horizontally. The frame’s size is then determined by the total size of the items within it. This is a game-changer for working with components. Make sure to also check out a video tutorial.
If you experience problems with desktop app performance this beta build may be worth trying.
While we are waiting for a real auto-layout to ship, this plugin dynamically lays out layers in frames and updates the layout when the dimensions of child layers change. Demo video in the author’s Twitter.
Master creates a new component from a set of similar objects. The demo video makes it easier to understand the concept. It seems like a really powerful tool for tidying up a project after design exploration is over.
This is some serious sorcery. I tried this plugin on a few websites and while results weren’t perfect it did 80% of the grunt work. If you want to iterate on an existing website in Figma it will take just a little time to fix a few problems instead of implementing everything from scratch.
Nerdfox builds interesting animation demos using Smart Animate features.
A solid overview of some of the most useful plugins, ranging from generating content to organizing projects, creating visual effects, and even checking designs for WCAG conformity. Something for everyone.
Raquel Piqueras from Microsoft shares her approach to organizing Figma files for collaboration with designers, developers, PMs, researches, and other team members. Good advice on clearly communicating to others of what they are looking at and what is expected from them.
Introducing a redesigned workspace with a focus on the people in your team and Figma Community, “a public space where you can now publish live design files that anyone in the world can inspect, remix, and learn from.”
“This guide will walk through spacing and layout grid best practices based on Material Design, Bootstrap, and Figma.”
Figma Ninja is a small game-like project that teaches the basics of Figma shortcuts. More chapters are promised in the future.