Do Text Styles translate to code?

Ask the community
1

At my company, in Figma, we currently have Text Styles set up based on Alias Tokens that are represented in our developer documentation.

So instead of having Text Styles set up in Figma like: Header, Sub-Header, Body, Caption etc. we have them set up like Text XL, Text L, Text M etc.

This presents some difficulty for me as a designer, because I don’t know where Text XL is supposed to be used on UI elements.

The reason given to me for why it is set up that way is because the developers refer to text styles and sizes that way.

My question is, does setting up text styles this way actually translate from Figma to code, like through dev mode for example? Or would it be better to set up text styles in Figma so that designers know where and how they should be used?

2

Just to clarify, does the name of the text style, for example: Text-XL translate to code or is it just the values that make up Text-XL translate to code. Basically wondering if we keep the values the same but the name changes to be something more useful for designers, would that negatively impact anything from a dev perspective.

3

Hi @baby_shark_24, Thanks for reaching out about this and I appreciate your detailed explanation.

I tested this on my end by applying a text style named “Text-XL” on a text frame. Then, switch to the Dev mode, I chose the text layer and the Code section in the Inspect panel appeared as shown below.

Text(
  text = "Figma",
  
  // Text-XL
  style = TextStyle(
    fontSize = 32.sp,
    fontFamily = FontFamily(Font(R.font.noto sans)),
    fontWeight = FontWeight(400),
    color = Color(0xFF000000),
    textAlign = TextAlign.Center,
  )
)

I hope this assist you to some extent assess the impact of changing style names within your design. If I missed anything, please inform us.

Additionally, if any other members of our community have more insights to offer, please share them here!

Thanks again for reaching out.