Lots of small improvements and a few bigger changes, like an unread filter and inline comment replies.
Whoa, finally! Can’t believe this is getting fixed a few days before Config. Add bold, italic, underline, or strikethrough font style to a portion of text with an applied style without detaching it first.
A nice little update to the Figma mobile app. I like how the app is focused on real-world “jobs to be done“ instead of shoehorning the whole Figma experience into the phone.
The move of drafts to teams caused a big enough uproar in the Figma community to warrant an explanation from Dylan Field, the CEO of Figma. Dann Petty made one of the strongest arguments against this change.
The strong feelings made me wonder about the differences in how we use Figma, and it probably comes down to handling multiple accounts and teams. I usually have two Figma accounts — one for personal projects and another tied to my work email address. Each account has its own drafts, so my personal drafts are never mixed with work. If you’re a freelancer and a part of multiple teams with a single email address, all your drafts are mixed, and separating them can feel like an invasion into your personal space. I don’t share the strong feelings on this change, but can see where Dann and others are coming from. (Pro tip: I use a separate Figma Beta app for the personal account, so I never have to switch accounts in the app.)
Typography variables can now be scoped to limit which properties they can be applied to. For example, if you scope a number variable to font size, you can only apply the variable to font size.
Also, copying and pasting an object bound to local variables will no longer populate a file with local variables unless you choose to in a tooltip.
Minor but helpful change to the color picker — limit the options only to the current page.
“We are starting to roll out an easier way to mark frames ready for dev. Select a frame to see the </> icon appear at the top right, then click. You’ll see the ready for dev status also reflected in your selection actions.”
Changes to sharing and access settings “to create a more consistent sharing experience and give you clearer visibility into and control over content permissions,” being released through mid-June. New team access terminology, clarified UI for inheriting project access by the team members and child file access by the project members, a dedicated prototype share dialog, a branch’s audience and role, and a central place for sharing other forms, views, and artifacts of the file. (Pre-Config cleanup for something new?)
33% faster file loading and 33% fewer memory issues! “To ensure even the largest Figma design files can be used as efficiently as possible, Figma dynamically loads pages. When a file is opened, only the page that you land on is loaded (usually the first page in a file). This means a file with hundreds of pages can open as quickly as a file with just a few! Figma loads additional pages as you navigate to them. If an unloaded page is particularly complex, you may experience a brief pause when you navigate to the page.” Certain actions like searching across all pages, reviewing updates, or running a plugin or widget that needs the whole file may cause the file to load all pages.
Huge performance boost. See this Twitter thread from Bersabel Tadesse, Director of Product at Figma, on the journey to shipping this release: “Our architecture was built around files being the atomic unit of work, but users were treating pages as their atomic unit of work. So it didn’t make sense to keep optimizing within the current architecture—or worse, try and change how our users work.”
Throughout May, drafts are being moved into teams on the Starter and Professional plans. This change was poorly communicated and caused a public outcry, but I don’t actually think it’s unfair or a big deal. Historically, drafts haven’t been associated with a team. This made work ownership unclear, and teams couldn’t use advanced paid features like Dev Mode while working on drafts. Moving forward, drafts will be associated with a team, and existing files will need to be moved. Drafts stay private and can be shared view-only for free, but users will need paid seats to share drafts with others and to edit other teammates’ drafts. The free plan still includes 3 collaborative design files. This change puts a limit on teams collaborating in drafts but feels more like closing a loophole than a dark pattern.
That’s not all! Now, you can also select multiple pages by holding Shift to rename, delete, or move them in bulk.
I fully expected all big product announcements to be saved for Config, but we have an unexpected treat! Jokes aside, this is a very elegant solution based on how people already organize their files. Reminds me of how Twitter came up with retweets and the book The Best Interface is No Interface.
“When you name a page in Figma using only hyphens, en/em dashes, asterisks or spaces, that page will now automatically convert into a page divider.”
Use the new “Set variable mode” prototype action to change the variable mode of the current page. See the new section in the help article or try it out in an updated Advanced prototyping playground file.
Split tabs are now available in the desktop app! Miggi shows how to get the most out of them. Keeping split tabs with raw materials in FigJam while designing in Figma is surprisingly convenient and something I’ve been doing a lot this week.
The String and Number type variables can now be bound to typography fields and saved as a style. Included fields are font family, font weight (numeric or named alias) and style, font size, line height (no percentages support yet), letter spacing, paragraph spacing and indent. Use Modes to create responsive typography scales for different screen sizes.
“Code Connect is a tool for design systems and engineering teams to bring component code into Dev Mode. When inspecting a component with connected code snippets, developers will see design system code from their libraries instead of auto-generated code.” Currently in beta. Available on Enterprise or Organization plans only.
“Managing your team’s community resources just got simpler. Now you can save, approve, and manage resources for your entire organization without switching profiles or ‘browsing as admin.’”
Tom Lowry walks through recent updates to branches — the default zoom level of previews is increased to 150%, the full branch name is now visible on hover, better text legibility, transparent backgrounds for effects, a few changes to improve review of variables, and bug fixes.
Figma is bringing together the design systems community on April 16 to share new features, best practices, and a peek into what’s coming next in the half-day event. “We’ll share more about new capabilities to make design systems more powerful and easier to adopt, as well as features to connect your system closer to code. Our product sessions will dive deep into strategies for structuring and maintaining your system.”
Considering it’s only a couple of months until Config 2024, it’s pretty clear they will put a bow on some of the features announced last year. Typographic variables, anyone?
On April 1st, Figma makes URLs shorter and easier to read. If you call Figma’s REST APIs, embed files in your websites or apps, or use these URLs in your plugin or widget, you may need to make a few tweaks to your code.