When a Text Style's font size is bound to a variable and made responsive via modes (e.g. mobile/desktop), the actual rendering on the canvas updates correctly for the active mode. However, the typography summary in the side panel and the Text Styles list keep showing the default mode's static number, not the active mode's value. Color variables display their variable name in the same panel, but font size stays a raw number. This asymmetry confuses teams during review. This isn't new. The same issue was reported in November 2024 and is still unresolved: https://forum.figma.com/ask-the-community-7/mobile-typography-size-showing-even-after-switching-mode-of-frame-to-desktop-19286 As explained in that thread, variables dynamically change a text style's visual representation but do not update the style's underlying metadata shown in the side panel. So this cannot be fixed through user settings โ it's the product's current behavior, which is why a product improvement is needed. Current behavior - A Text Style's fontSize is correctly bound to a variable (e.g. label/large) that holds per-mode values. - Switching the frame's mode updates the actual font size on the canvas correctly. - But the side panel summary (StyleName ยท 16/Auto) and the Text Styles list (label/large ยท 16/Auto) keep showing the default mode's static number instead of the active mode's. - In the same panel, color variables are shown by name โ only font-size variables are shown as numbers. Requested improvement When font size is bound to a variable, please support one of: 1. Reflect the current active mode's value in the side panel and Text Styles list (top priority). 2. Or display the variable name (e.g. label/large), consistent with color variables. 3. At minimum, add a visual indicator (e.g. a variable icon) so it's clear the value is variable-driven. Why it matters - Text Style + variables + modes is now a standard way to build responsive typography tokens. - When the panel shows the wrong (inactive mode) number, reviewers can't trust it and must cross-check via Dev Mode or Copy as CSS every time. - The only current workaround โ separate typography libraries per mode โ requires detaching and re-linking styles, which is a real burden (the earlier thread's author reported the same friction). - Color by name vs. font size by number continuously raises onboarding, review, and governance costs. Steps to reproduce 1. Create a float variable for font size (e.g. label/large) with different values across two or more modes. 2. Create a Text Style and bind its fontSize to that variable. 3. Place text using that style inside a frame and switch the frame's mode. 4. The canvas size changes, but the number in the side panel and the styles list stays fixed at the default mode's value.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
