Как пользоваться Pixso: первый макет, компоненты и прототип

Инструкция для тех, кто открывает Pixso впервые или переходит из Figma. Шаги написаны для браузера на компьютере; в приложениях для Windows и macOS интерфейс тот же. Названия кнопок в разных версиях могут немного отличаться, поэтому ориентируйтесь на смысл действия и подсказки при наведении.

Зарегистрируйтесь и включите русский язык

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

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

Создайте файл или перенесите проект из Figma

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

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

Поставьте помощник шрифтов

Браузер не даёт сайтам прямого доступа к шрифтам компьютера. Если макет использует шрифты, которые установлены у вас локально, скачайте со страницы загрузки помощник локальных шрифтов для Windows или macOS и запустите его. После перезагрузки вкладки эти шрифты появятся в списке.

Нарисуйте экран во фрейме

Выберите инструмент «Фрейм» на верхней панели и на правой панели укажите готовый размер — например, экран телефона или ноутбука. Фрейм — это ваш экран: всё, что внутри, будет частью макета.

• Добавьте заголовок инструментом «Текст» и задайте шрифт, размер и цвет на правой панели.
• Нарисуйте прямоугольник — это будет кнопка. Скруглите углы и залейте цветом.
• Поверх прямоугольника напишите текст кнопки, выделите оба слоя и объедините их во фрейм.

Включите автолейаут

Выделите фрейм с кнопкой и включите автолейаут на правой панели — привычные по Figma горячие клавиши здесь тоже подходят. Задайте внутренние отступы по горизонтали и вертикали. Теперь, если удлинить текст, кнопка растянется сама и отступы сохранятся.

Так же удобно собирать списки и карточки: элементы внутри автолейаута выстраиваются в ряд или столбик с одинаковым промежутком, а новые встают на своё место без ручного выравнивания.

Сделайте из кнопки компонент

Выделите кнопку и создайте из неё компонент через контекстное меню или кнопку на верхней панели. Значок слоя изменится — это главный компонент. Копии вставляйте через копирование или из панели ресурсов.

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

Свяжите экраны в прототип

Скопируйте фрейм, чтобы получился второй экран, и измените на нём содержимое. Перейдите на вкладку прототипа на правой панели, выделите кнопку на первом экране и протяните связь к второму экрану. Выберите событие — нажатие — и тип перехода.

Нажмите кнопку просмотра в правом верхнем углу: откроется демонстрация, в которой по кнопке можно перейти на следующий экран. Так проверяют сценарий до того, как макет уйдёт в разработку.

Пригласите коллег и передайте макет

Нажмите кнопку «Поделиться» и пригласите людей по почте или скопируйте ссылку. Для заказчика и разработчика выберите права на просмотр: они смогут смотреть экраны, комментировать и открывать режим разработчика, но не сломают макет. Зрители в Pixso не занимают платных мест.

Разработчик, выделив элемент, увидит размеры, отступы и цвета, а иконки и картинки сможет выгрузить сам. Комментарии лучше ставить прямо на экран — они привязаны к месту и не теряются в переписке.

Если что-то пошло не так