Figma Design Scale for Flutter

Orientation-aware, Figma-frame-based scaling for Flutter (sizes & fonts) with sensible clamps.

Maps shortestSide → Figma width and longestSide → Figma height for rotation-stable metrics
Uses min(widthRatio, heightRatio) to avoid over-expansion on squat screens
Font strategy: portrait = gentle mean, landscape = base scale (prevents oversized text)

Note: flutter_ui_scaler is the recommended successor to figma_design_scale, offering more active maintenance and improvements.

Why

Figma designs are usually portrait-first. Naïve scaling often makes landscape text enormous and spacing inconsistent.
This package keeps typography and layout stable across rotations and extreme aspect ratios.

Comparison

Figma Design	With this package	Without (native scaling)

👉 Notice how proportions, text size, and padding stay true to the design with the plugin.

Landscape Behaviour

With	Without

✅ Text scaling stays consistent
❌ Native scaling causes bloated titles and mismatched spacing

Installation

Add the package to your pubspec.yaml:

dependencies:
    figma_design_scale: ^latest

Then, import it in your Dart code:

import 'package:figma_design_scale/figma_design_scale.dart';

Usage

Default Usage

final ds = DesignScale.of(context); // Defaults to Figma 440x956
final pad = ds.sx(16);              // Spacing / radius / widths
final h = ds.sy(60);                // Heights (semantic alias)
final fs = ds.sp(20);               // Font size

Custom Figma Frame

To match a different Figma frame:

final ds = DesignScale.of(context, figmaW: 390, figmaH: 844); // e.g., iPhone 12

Configuration

figmaW, figmaH: Base frame dimensions (default: 440x956)
minScale, maxScale: Global clamps (default: 0.90 .. 1.15)
tightFontsInLandscape: When true (default), fonts follow base scale in landscape

Best Practices

Use sx/sy for paddings, radii, icon sizes, and minor heights.
Use sp only for text.
Avoid scaling bitmap images directly.
Sanity-check your design on a few targets (e.g., small phone, large phone, small tablet).

FAQ

Why do fonts behave differently in landscape?

Landscape makes width dominate; following the base scale keeps typography consistent instead of becoming oversized.

I want stricter fonts everywhere

Set tightFontsInLandscape: true (default). For global strictness, fork the package and modify fontScale => scale.

Versioning

This package follows Semantic Versioning. Breaking API changes trigger a major version bump.