Dev Mode. Vision Pro. RIP XD.
What’s New
Adobe Gives Up on Web-Design Product to Rival Figma After Deal Collapse
(Archive link without a Bloomberg paywall.) RIP Adobe XD. The writing was on the wall even back in 2022, but now I wonder if Adobe will just leave a big gap in a cohesive offering of the Creative Suite? Lively discussion at Hacker News.
“When it agreed to buy Figma, which helps users design app and website interfaces, Adobe put its competing program XD in “maintenance mode,” ceasing to launch new features or sell it individually. The deal to purchase Figma fell apart under regulatory pressure in December and the creative software giant hadn’t announced whether it would resurrect XD or attempt to build another competitor. “We have no plans to further invest in it,” a spokesperson said Tuesday of XD.”
Dev Mode
Everything you need to know about Dev Mode
Dev Mode moved out of beta last week, and in this article, the Figma team talks about their product philosophy, how they’re improving the experience for developers and designers, and what’s coming next. There are new features that bring design and code closer together, including annotations in Dev Mode, along with improvements to compare changes, plugins, and the Figma for VS Code extension.
How it started: “We needed a team that lived and breathed development like we did design, so in 2021, we acquired Visly — a team of eight designers and engineers who built a tool for developing UI components in React. […] The Visly team brought with them years of hands-on experience and months of research on developer tooling — in other words, they had the developer “intuition” we were looking for.”
How it’s going: “Dev Mode aims to make you more productive by connecting the tools you use and your code components to the design file. There’s no one way to work, which is why we built Dev Mode to adapt to a variety of tools, processes, and workflows. Whether you’re looking to link design and code with Storybook, ensure accessibility with Stark, or streamline project management with Jira, Linear, and GitHub, plugins allow you to extend Figma’s functionality to flex however your team works.”
What are your options if you can’t justify the cost of Dev Mode?
Figma made a bold choice in launching Dev Mode. While it’s great they’re finally thinking of dev handoff, the community has responded — Figma is still primarily design software, and Dev Mode seats cost a lot for what it offers.
If the price isn’t adding up to value for your teams, consider Zeplin as an alternative. Zeplin does everything Dev Mode does and more, with additional features like Git-like versioning, locked screens, approvals, and more. And, through March, it’s 25% off — that’s up to half the cost-per-seat for Dev Mode.
The art and science of annotations in Dev Mode
Always love deep dives from people behind the features! Product Designer Oscar Nilsson explains how Annotations came to be — for both design and development. On why annotations are in the Dev Mode: “We wanted one dedicated space to curate a spec for developers and call out necessary details or areas of confusion, so we ultimately decided that designers should go to Dev Mode to annotate. In doing so, designers would see exactly what their developer counterpart sees while annotating, and they could share a link to Dev Mode when they’re done. Our goal is not for Dev Mode to silo developers once a designer’s work is done — but to engage the broader team in the product development process, with annotations being a first, crucial step.”
On positioning in context: “Testing and iterating on our positioning logic became an adventure on its own. We explored a direction in which annotations hide until you click on a corresponding frame. That felt right in theory, but once we actually tried it, we realized that it was still easy to miss out on important annotations if you were just looking at a frame without actively selecting it. We then iterated on different versions of automatically expanding annotations based on zoom level and position, and it immediately felt more intuitive.”
The free viewer experience
I’ve seen a lot of confusion over the removal of the Inspect panel and the introduction of Dev Mode, so happy to see a detailed walkthrough of the free viewer experience recorded by Tom Lowry. Pretty much everything from the old Inspect panel is still available for free, and Dev Mode builds on top of that foundation. While some will inevitably label Dev Mode as a “money grab”, I won’t be surprised if many teams will save money by converting full Design seats to standalone Dev Mode seats.
Plugins to replace Dev Mode
In case you said goodbye to Dev Mode last week, Molly Hellmuth recommends a few plugins to help fill in the gap — Annotate It, Print Variables, Frame History, EightShapes Specs, and Handoff Notes.
Vision Pro
Can you use Figma with Vision Pro?
Lilit explains some ups and downs of using Figma with Vision Pro. Sounds like it’s busted in Safari for now, but inside Mac Virtual Display it works pretty well.
Vision Pro UI Kit
Danial Siddiki started building a UI kit by replicating Vision Pro interfaces made by Apple.
Adobe brings Lightroom and Firefly AI to the Apple Vision Pro
That might be 2 too many Adobe news for a single issue, but I’m glad they’re shipping something for the Apple Vision Pro on day 1! From The Verge: “Adobe’s Firefly AI, the text-to-image tool behind features like Photoshop’s generative fill, will be available on the Apple Vision Pro as a native app, alongside the company’s popular Lightroom photo editing software already demonstrated during the headset’s announcement.”
Using Figma
An insider’s guide to a seamless Figma migration
Clara Ujiie led Workday’s migration to Figma in 2019. Now as a Designer Advocate at Figma, she helps other teams through similar transitions, sharing ways to work better together. Based on these experiences, she is offering a blueprint for teams adopting Figma.
I have a dedicated tag #Switching to Figma for this topic, but out of 60 shared stories only one was added in the last 2 years — a pretty good indicator of adoption.
Show/Hide UI
Molly praises the Cmd+\ shortcut for showing/hiding UI, and I want to expand her tip by adding that the Cmd+Shift+\ shortcut toggles only the left sidebar (Layers/Assets). Keep in mind that Cmd+\ also works in the Present mode — Figma toolbar has been popping up and blocking the navigation in one of my prototypes, so discovering that it could be turned off was a big relief.
Glow effect tutorial
Fons Mans shows how to create a simple glow effect inspired by Vision Pro promo at the Apple 5th Avenue store in New York.
Figma Crash Course 2024 – Full Website in 60 Minutes
Nice to see a free course updated with all the recent features! “A beginner’s guide to all the major 2024 functionality in Figma: frames, basic shapes and properties, text and text styling, named styles, colors, plugins, the pen tool/vector editing, gradients, shadows, Auto Layout, components, prototyping, and Dev Mode!”
Made in Figma
In the jungle
Beautiful kick-off of the Figbruary by Vijay. See more by hashtag #figbruary on Twitter/X.
Plugins
Central Icon System
“A collection of icons that will make your product design easier and faster. With over 1000 symbols in 30 variations each, you have more than 30,000 icons at your disposal.” Made by iconists.