Skip to main content

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


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!


twitter.com

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!

Very nice!


Any info when code connect will support Angular?

Thank you so much for the great information! 😍

I think you added another link regarding the typography variable update.

What you added was an article about variable fonts, not typography variables.

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?

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

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 😂.

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.

Reply


Terms & ConditionsCookie settings