Widgetbook Figma Addon #

The Widgetbook Figma Addon allows you to display a Figma preview on the right side of each UseCase in Widgetbook.

Getting started #

Install package:

flutter pub add widgetbook_figma_addon

Usage #

Add FigmaAddon to Widgetbook addons and set an unique figmaProjectName:

Widgetbook.material(
    directories: directories,
    addons: [
        FigmaAddon(
            figmaProjectName: 'Your Project Name',
        ),
    ],
);

Add designLink to your Use Cases where you want to show the figma preview

@UseCase(
    name: 'Primary',
    type: Button,
    designLink: 'https://www.figma.com/design/...')
Widget primaryButton(BuildContext context) {
  return Button(
    text: 'Primary',
    state: ButtonState.primary,
  );
}