Figma 101. Apple Resources. Cool Shapes.
Sponsor
Sync Figma to Webflow
With the Figma to Webflow App, you can now do more than just import your Figma components and variables — you can also sync changes from Figma into Webflow. That means you can now send your styling, layouts, colors, text, and images to Webflow and transfer them seamlessly.
What’s New
Figma 101
MDS launched a free course that teaches the basics of Figma in one hour with 12 fast-paced videos. The production quality is totally bonkers, and Matt’s knowledge is so deep that even Figma experts might pick up something new.
Using Figma
Inspect Designs in Figma
Even while the new Dev Mode replaced the old Inspect panel, all information is still available regardless of your plan, seat type, or file access. This tutorial covers inspecting designs in Figma, depending on your plan and access level.
Figma Tip: Syncing variables to code
Gerard walks us through the Variables API, showing how it can keep values in sync with your code base and how applications such as StyleDictionary can transform them into usable code for multiple platforms. See the repository with GitHub Actions workflow examples.
Using the Figma Library Analytics API
“The Library Analytics API, part of the Figma REST API, lets you fetch analytics data about how your organization’s design system libraries are being used. The API provides similar information to the in-product library analytics feature, but in a format that you can use to do more fine-grained, custom analysis. In this video Gerard shows how to get started with the API, and shows how you might use the data.”
Create an AI-powered color scheme plugin for Figma
A tutorial on creating an AI-powered Figma plugin that generates colors based on your descriptions. It’s pretty cool to see how accessible it becomes to build a plugin using LLM (in this case, OpenAI).
Resources
New Apple Resources
Apple added nine new design templates for Figma: Apple Pay, App Clips, Live Activities, iMessage apps and sticker packs, Sign in with Apple, App Shortcuts, Tap to Pay, Tip Kit, and Wallet. See also Apple Design Resourcesin the Developer Center.
Cool Shapes
Vijay Verma’s new project is a collection of over a hundred abstract shapes with cool grainy gradients. It is available as a Figma Community file and React package and is free for both commercial and personal usage. See the behind-the-scenes process on Twitter.
The French Tototte
An impressive website prototype for The French Tototte is made by Basti Ui using animations, videos, and 3D. Make sure to check it out in the prototype mode.
Cool Thing
Raycast Demo
I switched to Raycast from Alfred a while ago but felt like I was leaving most of its potential and power untapped. In the two parts of these videos, designer Charlie Deets shows a few generic and design-specific features that he uses all the time.