Dynamic font scaling for responsive design

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?