Using constraints & magic numbers to build responsive layouts in Figma | Figma Blog

LittleBits built a responsive design system to support four apps across mobile and tablet platforms with a small team and six-month deadline. They combined Figma constraints with an 8-pixel “magic number” and proportional scaling rules that were shared with their React implementation. This approach allowed one template per screen to adapt across devices with minimal redesign and engineering adjustments.

Establishing an 8-Pixel Layout System

• Existing designs were analyzed to identify recurring dimensions and spacing.
• Most values were already close to multiples of 8, so 8 became the system’s base unit.
• Common sizes included:
  • Buttons and form controls: 32, 48, 56, 64, and 96px
  • Text: 16, 24, 32, and 48px
  • Padding and gutters: 16, 24, and 32px
  • Larger cards: 240px high
• Using a shared numeric scale helped harmonize typography, controls, margins, and padding.

Combining Constraints with Scaling Rules

• Figma constraints allowed elements to stretch, remain pinned to edges, or align with grid columns.
• Constraints alone were not sufficient to make one layout work equally well on small phones, larger phones, and tablets.
• The team compared screen dimensions, calculated proportional relationships, and rounded the ratios into practical whole-number scaling rules.
• These rules were implemented in React alongside normal layout constraints.
• Designers used Figma’s Scale tool and frame resizing to preview how a single template would appear on different devices.
• Testing showed that tablet and small-phone layouts worked well without extensive device-specific adjustments.

Designing Content for Different Aspect Ratios

• To avoid maintaining separate video and animation files for each screen size, content was produced in a 4:3 format.
• Important content was placed inside safe areas so it could be cropped cleanly for 16:9 displays.
• This allowed the same media assets to support multiple screen dimensions.

Handling Text and Internationalization

• The 8-pixel system was treated as a guideline rather than an absolute rule.
• Smaller text sizes sometimes used 4-pixel increments, such as 12px and 20px, because minor size changes had a significant visual impact.
• The app was translated into six languages, including German, where longer words could exceed available space.
• Code automatically reduced text to the next smaller heading size when it did not fit.
• Additional heading sizes were introduced to support these adjustments while preserving smooth transitions between heading levels.

Practical Scope of the System

• The app mostly used straightforward layouts with centered elements and two- or three-column structures.
• The team did not need complex responsive patterns beyond proportional scaling and basic constraints.
• The combination of a consistent spacing scale, reusable templates, Figma constraints, and shared React rules provided an efficient foundation for responsive design.