Рисуйте интерфейсы, иконки и графику

Перо и векторные сети

Рисуйте контуры и кривые, редактируйте узлы и соединяйте линии в разных направлениях. Создавайте собственные иконки и иллюстрации для интерфейса.

Фигуры для элементов UI

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

Маски для изображений

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

Булевы операции

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

Редактирование интерфейса и векторных элементов в Pixso

Собирайте экраны из компонентов

Автоматическая компоновка (Auto Layout)

Задавайте направление, отступы и расстояния между элементами. Кнопки и карточки подстраиваются под содержимое в соответствии с выбранными настройками размеров.

Компоненты и их варианты

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

Общие стили

Сохраняйте цвета, параметры текста и эффекты как стили. Обновляйте связанные элементы через общий стиль, чтобы поддерживать единое оформление интерфейса.

Пример компоновки экранов и элементов интерфейса

Обсуждайте дизайн на одном макете

Рабочее пространство команды

Приглашайте коллег в команду и организуйте файлы по проектам. Участники получают доступ к общим макетам в соответствии со своей ролью.

Совместное редактирование

Работайте над одним файлом одновременно. Изменения коллег отображаются в реальном времени. Обсуждайте актуальный макет без пересылки отдельных копий.

Комментарии на макете

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

Библиотека компонентов

Публикуйте согласованные компоненты и стили в библиотеке команды. Коллеги с доступом к ней смогут использовать эти элементы в своих файлах.

Совместная работа команды над макетом в Pixso

Передавайте макеты разработчикам

Экспорт графики

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

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

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

Пояснения к элементам

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

Просмотр параметров макета и экспорт ресурсов для разработки

Инструменты для повседневной работы

Импорт макетов

Переносите поддерживаемые файлы Figma, Sketch, XD и SVG в Pixso. Продолжайте работу с существующим дизайном.

Выравнивание объектов

Упорядочивайте несколько элементов в строки и столбцы. Настраивайте одинаковые расстояния между карточками или иконками.

Локальные шрифты

Подключайте установленные на компьютере шрифты через Font Assistant. Используйте нужную гарнитуру в макетах.

Работа с изображениями

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

История версий

Просматривайте изменения и возвращайтесь к сохранённым состояниям файла. Срок хранения истории зависит от тарифа.

Права доступа

Выбирайте, кому разрешено просматривать файл, а кому — редактировать. Настраивайте доступ под роли участников проекта.

Просмотр по ссылке

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

Обложки файлов

Выбирайте обложку, по которой легко узнать проект. Нужный макет проще найти среди файлов команды.