# Design directions

> This page is about FlutterFlow (the app builder you use by describing your app), not FlutterFlow Studio.

URL: https://docs.flutterflow.io/ffx/compare-directions

Ask for contrasting designs, compare their pictures, and choose a direction for your app.

Ask [the agent](https://docs.flutterflow.io/ffx/glossary#the-agent) for contrasting design directions, compare their pictures, and choose which one to build into your app.

## What to ask

Ask for directions that differ visibly in layout, spacing, color, or typography. Name the screen, state what must stay the same, and describe the differences you want to compare:

> Example request: "Show me three directions for Ledger's transaction screen: a compact list, a spacious list, and grouped cards. Keep the same transactions and actions in each direction. Let me compare them before changing the screen."

> Example request: "Show me two directions for Ledger's dashboard: one with muted colors and one with stronger color contrast. Keep the same information and navigation in both."

## Agent questions {#what-the-agent-may-ask-you}

The agent presents a **Choice** [card](https://docs.flutterflow.io/ffx/glossary#card) with a picture, name, and caption for each direction, and marks its suggested direction with **Recommended**.

For other cards that require an answer, see [Answer the agent](https://docs.flutterflow.io/ffx/answer-the-agent).

### Choose a direction {#choose-a-direction}

Compare the pictures on the card and choose a direction:

1. Select a direction's picture to highlight it without sending your answer yet.
2. Optional: Select **Show in stage** to compare larger pictures on the **Choose** tab.
3. On the card, select **Use {name}** for your chosen direction. The agent builds it into the screen.

You can also reply in the message box to combine details from multiple directions, such as one direction's spacing with another's layout.

## Review {#check-the-result}

After the agent finishes, read the turn's [**Summary**](https://docs.flutterflow.io/ffx/what-changed#summary) and review its [**Changes**](https://docs.flutterflow.io/ffx/what-changed#changes-tab). Check the affected screens in **Screens**, and try the change in **Preview**. If the change uses records or sign-in, test it with [the thread's own data in **Data**](https://docs.flutterflow.io/ffx/thread-data).

After you push a backend change, check the result in **Backend**.

Compare the finished screen against your chosen direction, test its actions and navigation, and verify that it keeps the information you asked to preserve.

## Push {#push-it}

To apply the chosen design to your app, [push the thread's changes](https://docs.flutterflow.io/ffx/push).

## Next steps {#then}

To refine the design further, describe the next adjustments in the same thread. See [Change your app's look](https://docs.flutterflow.io/ffx/change-the-look).

## Troubleshooting {#if-something-goes-wrong}

If the pictures or the finished screen fail to load, see [Troubleshoot the preview](https://docs.flutterflow.io/ffx/troubleshoot-preview). For design issues, see [Troubleshoot your app's look](https://docs.flutterflow.io/ffx/troubleshoot-look).