Холст, масштаб, линейки и сетка

Холст показывает все фреймы материала рядом. На нём удобно собирать несколько адаптивных версий и сравнивать их, не переключаясь между отдельными файлами.

Масштаб

Текущий процент находится в правой части шапки. Он меняет только вид холста.

• Zoom to Fit помещает рабочие фреймы в доступную область.
• Zoom to 100% возвращает масштаб 100 %.
• ⌘= / Ctrl+= и ⌘− / Ctrl+− приближают и отдаляют.
• Shift+1 выполняет Zoom to Fit.

Эти действия также доступны в контекстном меню пустого места на холсте.

Линейки и направляющие

Линейки вдоль верхнего и левого края показывают координаты холста. При выделении одного или нескольких элементов на линейках отмечаются их общие границы. Если выделение находится за пределами видимой области, на ближайшем краю появляется синяя метка. Нажмите её, чтобы переместить холст к выделению без изменения масштаба.

Чтобы добавить горизонтальную направляющую, потяните её с верхней линейки. Вертикальная направляющая создаётся перетаскиванием с левой линейки. Отпустите указатель на холсте, чтобы сохранить направляющую.

Направляющую можно выбрать и перетащить в другое место. Нажмите Delete или Backspace, чтобы удалить выбранную направляющую. Её также можно удалить, если во время перетаскивания отпустить указатель за пределами рабочей области. Escape отменяет текущее перемещение.

Невыбранная направляющая видна только внутри брейкпоинтов, которые она пересекает. При наведении продолжение линии показывается пунктиром, а выбранная направляющая проходит через весь холст. Когда включён Snap to Grid, перемещаемые и изменяемые элементы привязываются к ближайшим направляющим.

Линейки и направляющие включены по умолчанию. Быстро скрыть или вернуть их можно через пункт Rulers and guides в меню масштаба. Та же настройка доступна в Settings → My settings → Appearance. Сохранённые направляющие при этом не удаляются. В режиме Minimize ui и при временном скрытии интерфейса сочетанием ⌘\\ или Ctrl+\\ линейки и направляющие скрываются независимо от этой настройки.

Сетка фрейма

Команда Show Frame Grid показывает сетку внутри фреймов. Snap to Grid включает привязку при перемещении и изменении размера виджетов. Включать их можно независимо: иногда полезно видеть колонки, но двигать объект свободно.

Для показа сетки нажмите W. Для привязки используйте ⇧⌘' на macOS или Ctrl+Shift+' на Windows и Linux.

Выделение и перемещение

Выберите виджет на холсте или в Layers. У выделения появятся границы и ручки изменения размера. Несколько виджетов можно выровнять или распределить кнопками над секцией Layout.

Перемещение через границы фрейма

Чтобы вынести виджет из фрейма на холст, перетащите курсор за верхнюю, левую или правую границу фрейма. У фрейма с ролью Breakpoint перетаскивание вниз сохраняет виджет внутри и увеличивает высоту фрейма по содержимому. Из обычного фрейма с ролью Frame виджет можно вынести и через нижнюю границу.

Правый клик по невыделенному виджету сразу выделяет его и открывает контекстное меню. Правый клик по уже выделенному виджету сохраняет текущее выделение, в том числе множественное. В меню доступны команды группировки, копирования, вставки и создания сниппета. Правый клик по пустому месту — команды холста и вставку готового сниппета.

Подробнее: Layout, Слои и группы, Горячие клавиши.