Text components

Since Figma 3.0 launched, a more efficient way of handling text styles is using the new Styles features to centrally manage type properties. That said, text components can still be useful vessels for combing multiple properties/styles as a single object.

Until there is a alternate way to handle text styles (🤞), building them out as components is the next best thing. This works great because like any other component, you can add them to your team library and sync them across your designs. You can also easily override properties like color, alignment, style and weight. Here are a few steps for creating your text components:

Components can work for text styles. Swapping the style is easy from the components panel.

1. Make a text boxClick once to make a text box (don’t drag to make a box). Style it with the font/weight/color/line-height/alignment/etc. that you desire.
2. Convert this text box to a componentSet the constraints of the text box within the symbol to: “Top and Bottom”, and “Left and Right”. This makes sure your text box stays sized to the component.
3. Rename layersRename your component to your desired text style name.
   Rename your text layer to something generic like “Text”. You will rename this layer the same on all subsequent text components.
4. Use your new componentsAnytime you need to change a text style, you can simply swap out the instances to a different text component. Because we renamed all the text layers within the components to be the same, this enables the component to map any overridden text to the swapped instance.