1. Просмотр значений свойств

На панели Спецификации разработчики могут просматривать и копировать значения свойств выбранного слоя: размер объекта, ограничения макета, тени и обводки. Для текстового слоя также доступны содержимое и параметры макета, включая шрифт, размер шрифта и высоту строки.

В разделе Заливка можно просматривать значения цвета в форматах HEX, RGB, CSS, HSL и HSB.

2. Просмотр расстояний

В режиме разработчика или на панели Спецификации выберите слой A, а затем наведите указатель на другой объект, чтобы измерить расстояние между ними.

3. Автоматическое создание кода

Pixso автоматически создает код на основе дизайна. Перейдите на панель Спецификации и прокрутите ее до раздела с кодом. Нажмите значок раскрывающегося списка, чтобы переключаться между примерами кода для CSS, iOS и Android.

4. Выбор платформы разработки

Единицы измерения зависят от платформы разработки. Pixso предлагает три варианта: iOS, Android и Web.

5. Настройка коэффициента преобразования

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

Например, если ширина дизайн-макета составляет 750 px, а по требованиям разработки она должна соответствовать 375 dp, задайте коэффициент 0,5 и замените единицу px на dp. После подтверждения значения выбранного макета будут автоматически умножены на указанный коэффициент.

6. Преобразование к заданной ширине

Заданная ширина позволяет гибко настраивать правила преобразования. Например, если макет шириной 750 px нужно привести к ширине 375 по требованиям мини-приложения, можно не указывать коэффициент 0,5, а выбрать фрейм и задать ширину 375.

Pixso вычислит коэффициент по выбранному фрейму и введенному значению, а затем применит его к другим слоям дизайна.

Примечание: эти настройки не изменяют фактический размер макета.

7. Настройка выбора элементов

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

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

Примечание: по умолчанию Pixso позволяет выбирать вложенные элементы.

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

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