Figma Reviews

Widgetbook Cloud Review can also help with verifying if the developer meets the design requirements by comparing the Flutter widgets to their corresponding Figma designs.

Guide

To have a "View in Figma" button in your reviews, you need to add the Figma URL to your use-cases:

1. In your Figma design file, navigate to the component that resembles your Widget.

2. Copy the link to the component by right-mouse clicking on the component 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-cases metadata.

   dart run build_runner build -d
   

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