Figma Reviews

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

Guide

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.

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

3. 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
   )
   

4. Re-run build_runner to update the use case metadata:

   dart run build_runner build -d
   

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