iOS 16 UI Kit. Prototyper. Lightyear.
Sponsor
No more hide-and-seek with components
When you add reusable components into your design, your developers could miss them. In Zeplin, developers can instantly highlight all the components in a design, so they know exactly what to build.
Using Figma
Jumping to the object
Super useful tip: double-click on the icon of an object in the Layers panel to jump to it. (Double-clicking on a name will trigger renaming.)
Middle-clicking on a hyperlink
Middle-clicking or ⌘-clicking on the hyperlink goes directly to the target.
Figma for Devs
A short overview of the most important parts of Figma for developers.
Use image and gradient as masks in Figma
Miggi shows how to use images as masks.
Figma tutorial: Component properties
Figma dropped a new tutorial: “With component properties, you can define which parts of a component can change. And instead of creating separate variants, you can use component properties to reduce the number of components needed. This takes the guesswork out of designing for anyone using these components and they can quickly make adjustments as Figma keeps component property controls in one place.”
In the File: Designing for autonomous vehicles
Rogie talks with designers from Applied Intuition about balancing the inherent complexity of the autonomous vehicles development process with simple UX solutions that span both 2D and 3D spaces
Made in Figma
Lightyear
Yet another fantastic artwork by Vijay Verma. Make sure to check out the community file and other tweets in this thread with his explanation of the process.
Resources
iOS 16 UI Kit for Figma
Joey Banks introduced the new version of his iOS 16 UI Kit just a few days after WWDC 2022. Joey’s kits are fantastic resources for making iOS apps and learning about the organization of a large system. This year, he is also offering a paid version that includes exactly the same files, but by purchasing you’ll support the project and receive library updates and video walkthroughs.
Plugins
Prototyper for Figma
Prototyper is a new plugin from the team behind Automator, offering powerful prototyping with JavaScript right in Figma, similar to the old days of Framer Classic. A really powerful combo for exploring ideas and building prototypes in higher fidelity.
Aninix
Aninix is a powerful UI animation plugin for Figma: “Easily create motion design systems, export animations for promos, and provide animation inspector for developers.”
uiLogos
”Loreum ipusm for logos. Insert dummy logos of companies into your Figma or FigJam file quickly. The plugin also includes 194 flags of countries as well as popular brand logos.” Don’t miss Vijay’s Twitter thread of a story and details behind this plugin.
Stark
Stark — a popular accessibility plugin — released an all-new version with better organization and a simplified UI.
Backstage
Spring animation based on a feeling
Love this behind-the-scenes video of Nikolas Klein and William Wu from Figma experimenting with how fast they can set a spring animation based on a feeling.
Spring board
Another cool artifact from William Wu’s work on spring animations.