Articles

A deep dive into variables by Thalion.

Lilibeth Bustos Linares is a teacher at Memorisely and co-organizer of a wonderful morning hike with Zander Whitehurst a day before the Config. Thanks to jet lag I was able to get up at 5:30 am and join the group at 6:30 am. It was wonderful to walk the Historic Trail of San Francisco and chat with so many designers from around the world! 

Dan Mall is an expert in design systems and a fellow designer from Philadelphia. Dan organized a post-Config basketball game, hosted a special dinner, and even captained the winning team at the Figmatch design competition. His recap focuses on what makes in-person conferences really special.

Joey Banks’ recap of everything announced at Config. (I was lucky to meet Joey and share the scene with him at Config, and his deep knowledge of Figma and expertise in design systems are second to none. Highly recommend subscribing to his Baseline newsletter.)

“After a year of exponential growth and a successful beta, Figma and Google for Education are doubling down on the promise of bringing design and technology tooling on Chromebooks to K12 students across the US and Japan. […] Today, we are excited to take another step forward in this journey by opening up free Figma access to all K‑12 districts across the US.”

You might have noticed that some of the above links point to Shortcut, Figma’s new blog. ​“Explore insights and opinions from industry leaders, get tips and inspiration from creators using Figma to build great things, and go in-depth and behind-the-scenes with the Figma team.”

A refresh to the file browser, so you can spend less time searching, and more time creating. New shared projects and files tabs help you easily find files that others have shared with you. Search, Recents, and notifications now include content across your entire account.

Oh my, this one was long in the making! Font previews were first announced at Config 2020, but now they’re finally live along with other improvements to the font picker. See this feature tour from KC Oh.

Noah Levin, VP of Design, unveils Figma’s vision for AI and shares that Figma has acquired Diagram. (It’s fun to look back at all Jordan’s experiments I shared in this newsletter, starting from 2020.) ​“In short, AI can help us do more — across every part of the product development process — faster. It’s not a feature, but a core capability; more than a product, it’s a platform that can up-level our work to the plane of problem solving — arguably the core pursuit of our craft, and the reason many of us got into design and product building in the first place.”

Starting point for the new advanced prototyping in help articles.

A starting point in help articles about variables: ​“Variables in Figma store reusable values that can be applied to all kinds of design properties and prototyping actions. They help save time and effort when building designs, managing design systems, and creating complex prototyping flows.”

Speaking of help articles, in Figma Beta Features you can see that additional variable types (images and typography), properties (strokes, effects, opacity), and extended collections (Enterprise-only) are coming later this year.

“The Figma for VS Code extension lets you navigate and inspect design files, collaborate with designers, track changes, and speed up design implementation — all without leaving your development environment.”

If you’re ready to dive in, this help article is a good introduction to starting using Dev Mode.

Kris Rasmussen, CTO of Figma, answers a question of how a design tool can work better for developers by introducing Dev Mode, ​“a new workspace in Figma that’s designed to get developers what they need, when they need it, harnessing the tools they use every day.” Something I didn’t expect: ​“Today, we know that on our paid plans more developers visit Figma than designers.” With this in mind, it’s great to see new plans for developers: ​“Starting in 2024, you’ll have an option to purchase Dev Mode access only for $25 per seat per month on Organization, and $35 per seat per month on Enterprise.”

(If you’re curious about what developers think about Dev Mode, check out comments on Hacker News. While that community tends to be overly negative, it’s interesting to see what kind of problems Figma is addressing with this launch.)

A new feature page for the Dev Mode, a space in Figma for developers offering features that help translate designs into code faster. This is a great overview to learn about inspecting designs, exporting variables as design tokens, generating production-ready code snippets, integrating Figma into your development workflow, bringing design files into the VS Code, adding structure to the handoff process, and comparing changes. Dev Mode is currently in beta and free to use through 2023.

Herbert and Jenny from Figma’s editorial team take us behind the scenes of Config 2023 with daily recaps of what it was like in the heart of the action.

Dylan’s recap of all the updates from the keynote, in a brand-new blog. ​“Our vision is to build a new kind of design tool — one that is designed for the entire product development team. Today’s launches reimagine how design and development come together in Figma. I’m excited to introduce three ways we’re doing this: making developers feel at home in Figma with Dev Mode, connecting design to the language of code with variables, and putting a step in between a 2D design and a shipped product with advanced prototyping.”

Matan Rosen on how creating starter kits in Figma can help deliver products faster by letting designers focus on user experience instead of pushing pixels and doing repetitive design work.

Latest diagramming improvements in FigJam:

• Choose from over 10 new drag-and-drop shapes including star, plus, and hexagon
• Straight line connectors now anchor to the center of objects for more visually streamlined flows
• Swap between shapes quickly as you build diagrams

“Grab teammates’ attention in stickies or any text in your FigJam files by typing @ followed by their name.”