# Figma Reviews

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

<Image src="/assets/cloud/figma-review.png" zoom />

### 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.
1. Copy the link to the component by right-clicking and selecting `Copy/Paste as` > `Copy Link`.
1. Set the `designLink` property of the `@UseCase` annotation by pasting the copied link.

   ```dart
   // 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
   )
   ```

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

   ```bash
   dart run build_runner build -d
   ```

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