In the browser, ACSS handles responsiveness fluidly — values scale between a min and max based on the viewport using clamp(). Figma has no equivalent to this. There is no way to make a variable fluidly interpolate between two values based on frame width.
This is why Schema works with two discrete viewport modes — Desktop and Mobile — as a practical compromise. Instead of fluid scaling, you define two sets of values and switch between them using Figma's native variable modes.
Three variable collections have both a Desktop and a Mobile mode:
When a frame is set to use the Mobile mode for these collections, all variables inside it resolve to their mobile values. Text gets smaller, spacing tightens, and layouts collapse — without changing a single layer manually.
Schema's Canvas places a dedicated mobile frame alongside the desktop layout. This frame is labeled Mobile (drag layouts in this section) and is pre-configured with the following mode assignments:
To preview how a section looks on mobile, drag it into this frame. The section will automatically inherit the mobile variable values from the parent frame.
You can also apply mobile modes directly to individual layout frames — but this means configuring each one separately. Using a central mobile frame with modes pre-applied is much more efficient: you just drop layouts in and they adapt instantly, without touching any mode settings per frame.
The Desktop and Mobile modes differ primarily in their base size and scale multiplier values. This means the entire typographic and spacing scale shifts proportionally — not just individual values. See Working with Scales for how to configure these.
Layout variables also change between modes. For example, grid columns may collapse from multi-column to single-column, and content widths narrow to fit smaller viewports.