Skip to main content

Add Variable support for Letter Case


Show first post

40 replies

Sam_Woo_Staar

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


Oliver_Maw
  • New Participant
  • 5 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

 


Chelsea_Studenski

@Smith_Adam 20 brands! Wow, I’ve been struggling enough with just three for certain details. I posted a workaround here for the lack of proper text transform/text case variable support that might be helpful for your team. 


Hong_Y_Nguyen

I was just hopping for the launch yesterday to sort this out. 


Rosen_Genkov

+1 It will be very useful


Samantha14
  • New Member
  • 1 reply
  • May 23, 2025

We’ve updated our entire design system to incorporate variables thinking we’d be able to unlock fast brand swaps and this is one of the nits that’s kept it from being a reality. We don’t want to have to maintain a second set of components and text styles that have to be manually adjusted one by one on every page to swap brands. Large orgs need this feature yesterday. 


ellis.victoria

We need that too.

Allow Figma variables to control text transformations (e.g., uppercase, lowercase) and text styles (font, casing, weight) dynamically — similar to how we manage color and size with design tokens.

 

Why this is needed:

Design systems with multiple brands often need to:

  • Switch font families, cases (uppercase vs lowercase), and styles between brands

  • Reuse a single component (e.g., a button) but have it look/feel brand-consistent

  • Manage this with variables and modes, like we already do for colors and radius

Use Cases:

  • Brand A uses "Continue" in normal case, Brand B uses "CONTINUE" in uppercase

  • Brand A uses Inter, Brand B uses Roboto

  • Need to bind these typographic differences to Figma modes or component properties

Ideal Solution:

  • Add support for text-transform (uppercase/lowercase/capitalize) as a text property

  • Allow variables to reference Text Styles

  • Allow font family and style switching in sync with color and number variables

Benefits:

  • Cleaner, scalable design systems

  • More flexible brand theming

  • Simplified component maintenance

  • Stronger design-to-dev token parity


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