В правой части интерфейса видна большая белая панель во всю высоту окна — панель свойств, в которой видим три вкладки: Design, Prototype и Inspect.
В зависимости от выделенного типа слоя в ней может быть разный набор полей и кнопок.
Если ни один слой не выбран, мы видим настройки файла. В такой панели видны уже рассмотренные нами режимы просмотра Page, Local Variables, Local Styles для палитры, а также блок Export для массового экспорта.
В панели свойств есть три вкладки: Design, Prototype и Inspect. Для создания дизайна мы работаем с первой.
Для примера создадим слой типа фрейм, F. Если выделить его, панель справа отобразит его свойства:
Сверху мы видим настройки выравнивания, изначально недоступные, потому что в пустом фрейме нечего выравнивать. Можно настроить размер фрейма под размер экрана определённого устройства. Для этого выберем нужное из длинного списка доступных устройств.
В блоке Layout Grids настраивается сетка, в Layers — режим наложения, в Fill — фон, в Effect Styles — тени и блюр. В блоке Export можно настроить, в какие форматы слой будет экспортироваться.
В фрейме создадим прямоугольник, R.
Если выделена векторная фигура (шейп), боковая панель имеет характерные элементы для этого типа слоёв: например, поле скругления углов, которого не было у фреймов. Блок Constraints ****— для определения, как будет вести себя шейп, если будем растягивать его родительский фрейм. Подробнее об этой теме поговорим в главе.
Блок Stroke [Style] ****служит для работы с обводкой.