В качестве полноэкранного фона дизайнеры иногда используют фотографии.

Сначала на ум приходит идея залить растровым фоном сам фрейм, но на практике это оказывается неудобно, потому что часто возникает потребность с клавиатуры копировать стиль заливки фона и переносить его в другие фреймы. Гораздо легче перетащить с рабочего стола фотографию в окно Figma и вписать её в фрейм, а затем снять на ней все ограничители.

<aside> 💡 Задача: сделать так, чтобы при изменении размера фрейма фото подстраивалось.

</aside>

1. Создаём фрейм, F. Выбираем размер iPhone SE.
2. Перетаскиваем с рабочего стола в Figma файл фотографии в формате JPG или PNG.
3. Вкладываем слой изображения в фрейм, перетащив их друг на друга в панели слоёв.
4. Подстраиваем размер фотографии под размер фрейма, хватая за квадратные ручки в углах. Координаты фотографии — 0, 0, размер: 320 x 568.
5. Зажимаем Shift и снимаем ограничители по умолчанию: Left и Top. Справа от прицела в меню горизонтальных и вертикальных ограничителей написано Scale. В этом режиме фото пропорционально тянется с двух сторон.
6. Меняем размер артборда на iPhone 8 и убеждаемся, что фото растянулось.

<aside> ↔️ Движение по главам

6.2. How to make a responsive header  Как растянуть фоновое фото на весь фрейм 6.5. How to center a popup

</aside>

Typos and feedback → @okunev