Figma Reviews

Widgetbook Cloud Review helps verify that developers meet design requirements by comparing Flutter widgets to their corresponding Figma designs.

To display a "View in Figma" button in your reviews, add the Figma URL to your use cases:

1. In your Figma design file, navigate to the component that matches your widget.

1. Copy the link to the component by right-clicking and selecting Copy/Paste as > Copy Link.

Set the designLink property of the @UseCase annotation by pasting the copied link.

// Example from https://github.com/widgetbook/groceries-demo/blob/main/widgetbook/lib/core/app_bar.dart
@UseCase(
  designLink: 'https://www.figma.com/file/EXuEpwiyksLAejYX1qr1v4/Fluttercon-Berlin-2023-Demo?type=design&node-id=277-3056&mode=design&t=nVL8hLmc1jlcilZL-4',
  name: 'Default',
  type: AppBar
)

Re-run build_runner to update the use case metadata:

dart run build_runner build -d

1. Commit your changes and push them to your repository to create a new build.