figma_auto_layout 1.1.0 copy "figma_auto_layout: ^1.1.0" to clipboard
figma_auto_layout: ^1.1.0 copied to clipboard

A replica of Figma's auto layout feature that makes converting Figma designs to code faster and less error prone.

A replica of Figma's auto layout feature that makes converting Figma designs to code faster and less error prone.

Figma autolayout Source: figma.com

✨ Features #

  • ✅ Vertical and horizontal layout directions
  • ✅ Alignment
  • ✅ Positive and negative spacing
  • ✅ Padding with independent control
  • ✅ Spacing mode (packed, space between)
  • ✅ Canvas stacking (first on top, last on top)
  • ✅ Text baseline alignment (on, off)
  • ✅ Absolute positioned children
  • ✅ Clip content (on, off) ONLY works for absolute positioned children
  • ✅ Fill, hug and fixed sizing modes

❌ Missing Features #

🚀 Getting started #

Install it:

flutter pub add figma_auto_layout

Import it:

import 'package:figma_auto_layout/figma_auto_layout.dart';

🕹 Usage #

Figma's "Auto layout" features: #

Figma autolayout

FigmaAutoLayout(
    direction: Axis.vertical,
    alignment: AlignmentDirectional.topStart,
    spacing: 10.0, // Can also be a negative value.
    padding: EdgeInsets.all(10.0),
    // Use `EdgeInsets.symmetric` to control the horizontal and vertical padding seperately.
    // Use `EdgeInsets.fromLTRB` to control the padding on each side individually.
);

Figma's "Advanced layout" features: #

Figma advanced layout

FigmaAutoLayout(
    spacingMode: FigmaSpacingMode.packed,
    canvasStacking: StackingOrder.lastOnTop,
    textBaselineAlignment: false,
);

Figma's auto layout frame features: #

Figma advanced layout frame

FigmaAutoLayout(
    width: 50, // This will override `widthMode`.
    height: null,
    widthMode: FigmaSizingMode.fill,
    heightMode: FigmaSizingMode.hug,
    clipContent: false, // This currently only works for absolute positioned children.
    // See https://github.com/JakesMD/flutter_figma_auto_layout/issues/2#issue-1484381678
);

Figma's auto layout child features: #

Figma auto layout child

You need to wrap your child with a FigmaAutoLayoutChild because children can only take FigmaAutoLayoutChildren and FigmaAutoLayouts.

FigmaAutoLayout(
    children: [
        FigmaAutoLayoutChild(
            width: 50, // This will override `widthMode`.
            height: null,
            widthMode: FigmaSizingMode.fill,
            heightMode: FigmaSizingMode.hug,
            child: Container(),
        ),
    ],
);

Figma's auto layout absolute positioned child features: #

FigmaAutoLayout(
    children: [
        FigmaAutoLayoutChild.absolutePositioned(
            width: 50,
            height: null, // This will match the childs height.
            top: 10,
            end: 10,
            showOnTop: true, // If false this child will be displayed underneath the normal children.
            child: Container(),
        ),
    ],
);

Additional features: #

FigmaAutoLayout(
    textDirection: TextDirection.ltr,
    textBaseline: TextBaseline.alphabetic,
);

ℹ️ Additional information #

Please feel free to contribute!

9
likes
160
pub points
13%
popularity

Publisher

unverified uploader

A replica of Figma's auto layout feature that makes converting Figma designs to code faster and less error prone.

Repository (GitHub)
View/report issues

Documentation

API reference

License

BSD-3-Clause (license)

Dependencies

flutter, signed_spacing_flex

More

Packages that depend on figma_auto_layout