🆕 Typography, gradients, Library Analytics API, and Code Connect! 🚀

News
1

Figma just dropped Code Connect to help map more closely to code, Variables is out of beta(adding typography and gradients), and more! :tada:

Code Connect Beta: Code Connect is a tool for design systems teams to bring component code directly into Dev Mode. Now, when developers inspect a component, they can see production-ready code snippets from your library.

  • Currently in Beta
  • Enterprise or Organization plans only

To learn more, check out the help center article here!

Typography: variables can now be bound to typography fields and saved as a style. Included fields are:

  • Font family
  • Font weight and style
  • Font size
  • Line Height
  • Letter Spacing
  • Paragraph Spacing
  • Paragraph Indent

To learn more, check out the help center article here!

Gradients: color variables can now be bound to gradient stops and saved as a style

To learn more, check out the help center article here!

Library Analytics API Beta: Now, your team can access Figma library data outside of the app, so you can organize the data based on your organization’s needs. This will include component insertion, detachment, and instance data, as well as team and file-level breakdowns.

  • Enterprise plans only

To learn more, check out the help center article here!

5 Likes
2

Very nice!

Any info when code connect will support Angular?

1 Like
3

Thank you so much for the great information! :heart_eyes:
I think you added another link regarding the typography variable update.
What you added was an article about variable fonts, not typography variables.

4

Okay, and I think it’s related, but my devs can’t see the variables associated with the colors (they don’t have DevMode).

Can you confirm that this is related?

5

Hi! How can I apply a % line-height? It doesn’t seem like numbers variables support %, am I correct?

6

The “help article” link for font variables is linking to Variable Fonts - highlights the unfortunate naming overlap between them!

Bound to cause lots of minor confusion as designers need to specify which they’re talking about :joy:.

7

Anyone else having issues with font-family variable? I’m using two modes. When applying the font family, it appears the tag is updated when switching variables, But visually the font will remain the same until I start to type into the field. Any work arounds for this? I’d like the font to update without typing into the fields.

The other variables work flawlessly, I’m able to change font-weight, font-size, line-spacing, line-height, between layers, frames, sections and pages without issue.