> ## 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 як файли зображень JPG або PNG

> Flowstep підтримує експорт дизайнів як JPG або PNG. Дізнайтесь, який формат найкраще підходить для вашого використання, та як завантажити ваші екрани за кілька кліків.

<Frame>
  <img src="https://mintcdn.com/flowstep/UmnbuTkaA7N6vp1N/images/Screenshot-2026-05-06-at-14.19.49.png?fit=max&auto=format&n=UmnbuTkaA7N6vp1N&q=85&s=b9d31a01c99bae3d325fdbfee34529dc" alt="Screenshot 2026 05 06 At 14 19 49" width="1824" height="1388" data-path="images/Screenshot-2026-05-06-at-14.19.49.png" />
</Frame>

Коли ви готові поділитися дизайном або передати його, Flowstep дозволяє експортувати його як статичне зображення — JPG або PNG. Обидва формати широко підтримуються програмами для дизайну, програмами для презентацій та браузерами, тому вам можна взяти свої дизайни, створені за допомогою штучного інтелекту, куди завгодно.

## Як експортувати ваш дизайн

<Steps>
  <Step title="Відкрийте ваш дизайн">
    Перейдіть до дизайну, який ви хочете експортувати, в Flowstep.
  </Step>

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

  <Step title="Виберіть ваш формат">
    Виберіть **JPG** або **PNG** залежно від вашого використання (див. порівняння нижче).
  </Step>

  <Step title="Завантажте файл">
    Підтвердіть ваш вибір і завантажте експортоване зображення на ваш пристрій.
  </Step>
</Steps>

<Frame>
  <img src="https://mintcdn.com/flowstep/UmnbuTkaA7N6vp1N/images/Screenshot-2026-05-06-at-14.19.39.png?fit=max&auto=format&n=UmnbuTkaA7N6vp1N&q=85&s=8f3132e26a9a759315dd87a7a624fe00" alt="Screenshot 2026 05 06 At 14 19 39" width="1828" height="1522" data-path="images/Screenshot-2026-05-06-at-14.19.39.png" />
</Frame>

## JPG vs PNG: який формат вам використовувати?

|                  | JPG                                                                      | PNG                                                 |
| ---------------- | ------------------------------------------------------------------------ | --------------------------------------------------- |
| **Найкраще для** | Поділ переглядів, презентації, огляди зацікавлених сторін                | Дизайни з прозорими фонами, передачі високої якості |
| **Розмір файлу** | Менший — швидше поділяти через електронну пошту або обмін повідомленнями | Більший — зберігає всі деталі зображення            |
| **Прозорість**   | Не підтримується                                                         | Підтримується                                       |
| **Якість**       | Трохи стиснено                                                           | Без втрат — без зменшення якості                    |

<Tip>
  Якщо ви вставляєте свій дизайн у слайд-шоу або надсилаєте швидкий перегляд клієнту, JPG — це зазвичай правильний вибір. Якщо вам потрібні чіткі краї або прозорий фон — наприклад, щоб накласти дизайн на інше зображення — використовуйте PNG.
</Tip>

## Експорт коду

Крім зображень, кнопка **Code** експортує екран як React + Tailwind код — скопіюйте фрагмент або завантажте повний пакет як ZIP. Пакети самодостатні: зображення, які використовуються в дизайні (включаючи ті, що ви додали в панель чату), включені в папку `public/assets/` зі кодом, який посилається на них за локальною адресою, тому експорт працює як є.

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

<Note>
  Якщо вам потрібно взяти свій дизайн у робочий процес редагування векторів, скопіюйте його безпосередньо в Figma. Див. [Copy Flowstep designs into Figma instantly](/uk/figma-integration).
</Note>