Articles

“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.”

A list of the top ten design systems from companies like Google, Atlassian, Microsoft, Shopify, IBM, AWS, Audi, Spotify, and Uber. Use them as an inspiration, a guide, or a reference to create your own design system.

A guest post in Lenny Rachitsky’s newsletter by Figma VP of Product Sho Kuwamoto on the importance of feel, service, and staying close to customers. ​“Fast-forward to 2023, and Figma has grown beyond what I could have imagined. It’s gotten to the point where people often ask me for advice on how to prioritize features or how to run a product process. These questions are hard for me to answer, because I don’t think we do anything special. Our process is messy and we make mistakes. We create designs and then throw them away. We miscommunicate all the time and forget to write things down.”

Mingzhi Cai shares some insights on building components that benefit the team: ​“After revamping our Figma component library with Auto Layout and component properties last year, my team and I boosted the total insertion of Figma components across our department by over 200% in the second half of 2022. There’s a 48% increase in users saying in the survey that this component library makes their work ​“much faster.”

State management is now standardized for prototypes using interactive components, scrolling, and video so that Figma can memorize the state, share it across the frames, and offer a way to reset. See a deep dive by noodles expert Niko on how to use the new features. (Also, this is my kind of joke.)