The Prompt. UI3 updates. Variable History.
Sponsor
figma.to.website – Figma’s missing PUBLISH button
Design your website in Figma and hit PUBLISH to instantly get a live, fully responsive website. Free hosting and all the settings you need for SEO, custom code, embeds, analytics, forms and more.
App Updates
Pin files to workspaces
If you’re on the Enterprise plan, workspace members can now pin files to the top of their workspaces. “Pinned files help users designate important, shared content so that workspace members can get started with the right resources.”
What’s New
Welcome to The Prompt
In-person attendees of Config 2024 received Issue 2 of The Prompt, a print magazine by Figma’s Story Studio and Brand Studio. A digital version is now available on the blog. “Featuring leaders working across design, engineering, product development, and the built environment, this collection of essays and interviews takes on questions about how AI might shape the way we create.”
Going offroad for a better design system
Explaining systems thinking applied to design systems through an off-road vehicle platform? That’s my jam. “Nissan has developed a vehicle platform that gives it flexibility across a wide selection of vehicles. They leverage the same base component (the frame), and attached different components to that base in order to achieve the desired design. When building a design system, we should strive for a similar level of structure and flexibility. This gives us consistency while also allowing us to be adaptive and scale to our user’s needs.”
Wix Marketplace
Wix Studio, which recently introduced an easy-to-use Figma to Wix Studio plugin, has launched a new marketplace for templates. This could be an excellent opportunity for creators ready to jump on it quickly. For context, both Webflow and Framer have over a thousand pre-made templates, while Wix Studio has only 67 at this time. The early bird gets the worm, and designers keep 100% of profits until the end of 2024.
Useful Customer Journey Maps
Vitaly Friedman from Smashing Magazine offers a few helpful templates, real-world applications, and insights on the importance of mapping both successful and unsuccessful touchpoints of user journeys to visualize the user experience.
Using Figma
UI3 updates
Joel Miller, one of the product designers behind UI3 at Figma, walks us through improvements the team is making based on the user feedback: Clip Content is a checkbox again, constraints are more efficient to use, pixel values are brought back to the resize controls in Auto Layout, more actions are shown for a layer, library information added for components, frame orientation controls are back, and blend modes improved. Kudos to the team for listening to the community!
UI3 reaction video
We can’t be friends if you do not react to a new Figma drop in the same way.
10 features Figma definitely needs right now
This is a very solid list. My top picks would be independent strokes (#1), OkLCH color support (#7), and scroll-based interactivity (#3) — these have to be “native” features. Cleaning unnecessary colors (#2) and archiving frames (#9) can be achieved with plugins, but it’s hard to remember to run them. Collapsing layers (#10) is easy enough with an Option-L shortcut, and assigning designers to specific screens (#8) is relevant only to some teams’ workflow.
(I have one more feature to add to the list. As I was working on a fairly complicated animation recently, I couldn’t believe variables still didn’t have a built-in debugger. They change based on various interactions and conditions, but there is no visibility into the state or triggers, making it very hard to build and debug.)
How to create a realistic illustration
There are three simple ingredients of a realistic illustration: gradients, shadows, and noise. Vijay makes it look so easy!
Plugins
Variable History
An incredible plugin made by Chen Chen that helps manage and synchronize variable changes. It works as a Git client for variables, letting you track changes, save and restore versions, generate a changelog, export variables to CSS, or sync to GitHub. I bet this plugin will soon become a staple of all design system teams.
Photopea
Photopea is an online photo editor heavily inspired by Photoshop, and now it’s available as a Figma plugin. Handy if you need more advanced editing for raster images. On a side note, I enjoyed this interview with Photopea developer Ivan Kutskir — it’s a one-man business, making $1M+ a year from ads while keeping the editor free.
Backstage
How we migrated onto K8s in less than 12 months
I’m always curious about how Figma’s engineering team operates at scale: “Migrating onto Kubernetes can take years. Here’s why we decided it was worth undertaking, and how we moved a majority of our core services in less than 12 months, all while making our compute platform easier to use.”