> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Редагуйте та поліпшуйте дизайни Flowstep через чат або полотно

> Вдосконалюйте будь-який екран, створений Flowstep, за допомогою ручного редагування або текстових промптів — повторюйте скільки разів потрібно, поки дизайн не буде таким, як треба.

<Frame>
  <img src="https://mintcdn.com/flowstep/iVYFuG-E2bJvmdDE/images/Screenshot-2026-05-06-at-14.25.48.png?fit=max&auto=format&n=iVYFuG-E2bJvmdDE&q=85&s=0a67045dde91f73cae39afde3d359269" alt="Screenshot 2026 05 06 At 14 25 48" width="2338" height="1510" data-path="images/Screenshot-2026-05-06-at-14.25.48.png" />
</Frame>

Дизайни Flowstep повністю редаговані після створення. Ви не обмежені тим, що спочатку вироблює AI — ви можете налаштовувати візуальні елементи безпосередньо в редакторі, використовувати чат для опису змін простою мовою або попросити Flowstep створити варіації та нові екрани. Використовуйте той метод, який найкраще підходить для змін, які ви хочете внести.

## Два способи редагування

<Tabs>
  <Tab title="Ручне редагування">
    Вносьте зміни безпосередньо на полотні, вибираючи та змінюючи елементи. Цей метод найкраще працює для точних коригувань — переміщення компонента, зміна кольору, оновлення написів або регулювання відстані.

    <Steps>
      <Step title="Виберіть елемент, який ви хочете змінити">
        Натисніть на будь-який компонент або шар у вашому дизайні, щоб його вибрати.
      </Step>

      <Step title="Внесіть зміни">
        Використовуйте елементи керування редактором, щоб налаштувати властивості такі як колір, розмір, позиція або текстовий вміст.
      </Step>

      <Step title="Переглядіть результат">
        Ваші зміни застосовуються негайно на полотні. Продовжуйте редагувати або перейдіть до наступного екрана.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Редагування за допомогою чату">
    Опишіть зміну, яку ви хочете, простою мовою, і Flowstep оновить дизайн для вас. Цей метод швидший для широких або структурних змін — регулювання макета, переосмислення розділу або застосування стильового напрямку.

    <Steps>
      <Step title="Відкрийте панель чату">
        Виберіть екран, який ви хочете редагувати, потім відкрийте введення чату.
      </Step>

      <Step title="Опишіть вашу зміну">
        Введіть, що ви хочете, щоб Flowstep оновив. Будьте конкретні щодо того, що повинно змінитися і чому, якщо це допомагає.
      </Step>

      <Step title="Переглядіть оновлений дизайн">
        Flowstep застосовує зміну і показує вам результат. Якщо це не зовсім правильно, надішліть наступне повідомлення, щоб деталізувати далі.
      </Step>
    </Steps>

    Редагування та регенерації оновлюють вибраний екран **in place** замість додавання нового екрана — поки Flowstep потокує зміну, елемент, на якому він наразі працює, виділяється зеленим пунктирним кордоном. Генерування без вибраного екрана замість цього додає новий екран.
  </Tab>
</Tabs>

## Редагуйте лише частину екрана

Вам не потрібно редагувати цілі екрани. Виберіть піделемент — картку, кнопку, текстовий напис — і ваш промпт чату застосовується лише до нього, залишаючи решту екрана незмінною.

* Перейдіть до режиму **Direct selection** за допомогою **Shift+V** (або випадного меню на кнопці **Select** на панелі інструментів), щоб вибрати найглибший елемент під вашим клацанням. Натисніть **V** для звичайного вибору, або утримуйте **Cmd** (Mac) / **Ctrl** (Windows) для тимчасового використання прямого вибору. **Escape** виходить з прямого вибору.
* Виберіть піделементи на кількох екранах за допомогою **Cmd+Shift** — один промпт може редагувати до 6 екранів на повідомлення.

Коли вибрано елемент зображення (поза режимом каркасу), на панелі властивостей з'являється панель **Image**: переглядайте зображення, замініть його, перетягнувши новий файл зображення на передпереглад або натиснувши **Pick image**, або збережіть його за допомогою **Download image**.

## Відновіть попередню версію

Кожне створення AI в історії чату зберігає свій первісний результат. Якщо екран було відредаговано або видалено після його створення, його повідомлення чату показує кнопку **Restore** — **Restore original**, щоб скасувати редагування, або **Restore** / **Restore all**, щоб повернути видалені екрани. Використовуйте його, щоб повернутися до стійкого стану після того, як редагування піде не в тому напрямку.

## Дії одним клацанням

<Frame>
  <img src="https://mintcdn.com/flowstep/iVYFuG-E2bJvmdDE/images/Screenshot-2026-05-06-at-14.29.34.png?fit=max&auto=format&n=iVYFuG-E2bJvmdDE&q=85&s=52e0f38e4c4506adbecdccc7a95be652" alt="Screenshot 2026 05 06 At 14 29 34" width="2436" height="1528" data-path="images/Screenshot-2026-05-06-at-14.29.34.png" />
</Frame>

Крім прямого редагування, ви можете попросити Flowstep дослідити альтернативи:

* **Try again from scratch** — попросіть Flowstep створити свіжу версію поточного екрана з іншим макетом або візуальним напрямком.
* **Show the next screen** — попросіть Flowstep створити те, що логічно йде далі в потоці користувача.
* **Make it pretty** — налаштуйте відстань, вирівнювання та кольори по всьому дизайну. Макет залишається незмінним.

Ці параметри дозволяють вам швидко повторювати без необхідності писати промпт кожного разу.

## Повторення для вдосконалення

Дизайн рідко вийде ідеально з першої спроби. Використовуйте редагування на основі чату для кожного раунду зворотного зв'язку — опишіть, що працює та що не працює, і Flowstep налаштує звідти. Немає обмежень щодо того, скільки разів ви можете повторювати екран.

<Tip>
  При повторенні через чат посилайтеся на конкретні елементи за назвою або місцем розташування, щоб отримати точніші результати. Наприклад: «Перемістіть кнопку виклику дій в нижню частину екрана та зробіть її на повну ширину» більш ефективна, ніж «виправте кнопку».
</Tip>