Помимо десктопной, вы можете создать отдельную планшетную и/или мобильную версию вашего проекта. Кликните по иконке ноутбука в нижнем левом углу окна редактора и активируйте Mobile для создания мобильной версии вашего проекта.

Для мобильной версии проекта не доступна анимация On Hover («По наведению»).

Создание композиции

После активации переключателя мобильная версия создается автоматически (Mobile Auto-layout), при этом все виджеты в ней выстраиваются в единую колонку.

Нажмите на кнопку Create composition («Создать композицию») и вы увидите еще две опции, которые помогут вам легко создать мобильную версию проекта:

Fit to mobile. Если вы активируете эту опцию, виджеты сохранят то же положение, что и в десктопной версии, но их размеры изменятся в соответствии с шириной мобильного вьюпорта.

Desktop layout. Эта опция воссоздаст десктопную версию с исходными пропорциями. После этого вы сможете вручную передвигать виджеты и изменять их размер.

Все эти опции (включая Auto Layout) могут быть также активированы только для некоторых выбранных вами виджетов, а не всего лэйаута целиком.

Выбрать глобальные виджеты (имеющие настройку On all pages) нельзя.

Выберите не менее двух виджетов и нажмите на кнопку Auto Layout, Fit to mobile или Desktop layout. В результате изменятся положение и размер только этих виджетов.

Обратите внимание, что изменения касаются только размера и положения виджетов. Их атрибуты (цвет, размер шрифта и так далее) сохраняются при переключении между разными типами композиции в мобильной версии.

Планшетная версия

Дополнительно вы можете создать планшетную версию вашего проекта, которая также будет отображаться в мобильном вьюпорте при повороте телефона в горизонтальное положение. Кликните на иконку «плюс» рядом со значком мобильной версии и включите опцию Tablet and Landscape Mobile. Чтобы деактивировать планшетную версию, отключите эту опцию и нажмите на значок «минус».

Если у вас не активна планшетная версия, при повороте телефона в горизонтальное положение отобразится десктопная версия проекта. На планшетах в пейзажной ориентации всегда отображается десктопная версия проекта.

Шорткаты

Используйте клавиши на клавиатуре для переключения между десктопной (1), планшетной (2) и мобильной (3) версиями проекта. Эта функция доступна и в редакторе, и в режиме предпросмотра (Preview).

Высота страницы

Для того чтобы изменить высоту страницы, потяните за синий ромб в нижней части экрана или кликните по нему и введите точное значение для длины в пикселях.

Кастомная ширина

Чтобы изменить ширину мобильного вьюпорта, откройте настройки Grid & Guides и введите желаемое значение в верхнем правом углу.

При просмотре с реальных девайсов контент будет динамически масштабироваться в зависимости от ширины экрана.

Мобильная версия на разных устройствах

Чтобы проверить, как проект отображается на разных устройствах, откройте режим Превью и используйте переключатель в верхней части экрана. На данный момент доступны следующие устройства:

iPhone SE (вертикальная и горизонтальнаяориентация)
iPhone 11 Pro/X
Google Pixel 2 XL
Samsung Galaxy S20

Также на этом же экране вы можете проверить отображение проекта на планшетах (в том случае, если вы не активировали планшетную версию проекта дополнительно).

Размеры макетов отображаемых версий проекта могут отличаться от размеровотображения на реальных девайсовах, но пропорции будут сохранены.

Версии проекта на разных экранах

Если у проекта есть десктопная, планшетная и мобильная версии, на устройстве отобразится та, размеры которой ближе всего к размерам его экрана. При повороте телефона в пейзажную ориентацию всегда отображается десктопная версия проекта. Если у проекта есть только десктопная версия, на любом устройстве будет отображаться именно она.