Skip to main content

Add Variable support for Letter Case


Show first post

35 replies

Sam_Woo_Staar

+1 here - absolutely necessary for a true multi-brand type system with variables


Oliver_Maw
  • New Member
  • 4 replies
  • February 25, 2025

+1 for this, we run multiple brand designs system and this feature not being available is preventing us from fully rolling out.


Smith_Adam
  • New Member
  • 1 reply
  • March 4, 2025

+1 here too - we are approaching twenty brands and this feels like the missing jigsaw piece - it is very time consuming managing styles like this via content string names or overrides.


Irene_Lozano

+1 really needed for a multibrand ds! 

 

Cassie11
  • New Participant
  • 5 replies
  • March 17, 2025

Yes please. Necessary for multi-brand. Seems like a no-brainer!


Parham_Kelly

+1 for this, really needed for a multibrand.


Apearson
  • New Member
  • 1 reply
  • March 20, 2025

+1 Much needed for our Multi-brand DS. 


Zoe T
  • New Member
  • 1 reply
  • March 20, 2025

+1 really needed for multibrand!


Lauren_Beagrie

+1 this is a necessity


Chelsea_Studenski

+1 I also would like this to be handled properly. 

 

Workaround

I did figure out a farily elegant workaround to unblock this issue for our multibrand design system needs where only one of the brands use all caps for button labels. Here is an outline of the steps.

Setup Figma Variables

Use boolean Figma variables to represent text case design token decisions across modes. Publish the update if you are managing these in a seperate library file.

 

Tie those boolean variables to component text layers

  1. Create two text layers within your component, set one to be styled Case: uppercase and the other remains Case: as typed.
  2. Connect appearance of the uppercase styled text to the button/textCase/uppercase variable, and the as typed styled text to the button/textCase/none variable 
  3. Must pair with text property: Be sure to connect both text layers to a text property on the component for the text string. This way both will retain your expected text content. Unlike a nested component approach (which has style override issues), this keeps the text property on the main component, so there shouldn’t be any breaking changes if Figma properly supports this token type in the future and you no longer need the multiple text layers.
Result of connecting uppercase token to the uppercase text layer
Result of connecting none token to the as typed text layer

Results when switching modes

Now when I switch modes on a container with that component, the correct text layer is displayed including the correct text case style for that brand

 


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings