Is there a workaround for setting the font size for specific breakpoints within a responsive design? It seems there has been a lot of work put into making designs behave responsively through the use of constraints and auto layout both in design and prototype mode without any thought on how text scales between large desktop and small mobile screen sizes. Framer handles this well by being able to specify font sizes for each breakpoint. It would be great to have this as a native feature in Figma also.
You can achieve this through variables which is very similar to what framer does in concept. Think of each breakpoint in Framer as a variable mode in Figma. In these modes you can define things like font sizes or other attributes and define a different value for desktop and mobile.
Here is a very simplified example:
Define variables:
- Define a variable collection and provide a name (e.g., Viewport)
- Create a new number variable (e.g., base-text-size)
- Define a value (e.g., 16)
- Add a new variable mode (+ sign in 3rd column)
- You now have 2 variable modes, you could name them “desktop” and “mobile”
- You can now change the variable value for your mobile mode to something different (e.g., 20)
Apply a mode to frames:
- Create two frames one for each mode needed (e.g., Desktop and Mobile)
- Select each frame and apply the appropriate mode (From right panel, choose from variable icon)
Apply variable to text size:
- When you select the text size in your design, rather than “hard-coding” a numeric value, select a variable (e.g., base-text-size)
Now the text size is determined by the variable based on the mode (viewport) of its parent.
Thanks for the reply Matt. I’ll give this a try. Do you know if this will work with the recently announced responsive viewer in prototype mode? For example, if I wanted to mimic the scaling of a browser window in the responsive viewer, would the text scale accordingly at each breakpoint?
Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.