Scott
Если нужно передать макет Figma разработчику через Pixso, начните с копии файла и пробного сценария. Это руководство описывает импорт и проверку доступа к параметрам, ресурсам и спецификациям.
После импорта .fig сравните макеты, шрифты и компоненты с оригиналом. Проверьте доступ разработчика к спецификациям и ресурсам на тестовом файле до переноса проекта. Бесплатный тариф включает личные черновики и просмотр без ограничения числа зрителей, а также до 3 дизайн-файлов и 3 онлайн-досок для совместной работы. Для дополнительных файлов и функций сравните тарифы Pixso.
Pixso поддерживает импорт файлов Figma и режим передачи разработчику. После переноса проверьте слои, шрифты, компоненты и переходы: поддержка формата не означает полной совместимости всех свойств. Скриншоты отражают прежний интерфейс, поэтому расположение команд сверяйте в своей версии.
Что такое режим Pixso Dev Mode и как его использовать?
Что такое Pixso Developer Mode
Режим передачи разработчику в Pixso предназначен для просмотра параметров элементов, спецификаций и доступных ресурсов. Получатель сверяет эти сведения с требованиями проекта и реализует интерфейс в своей среде разработки.
Некоторые из возможностей и функций, доступных в режиме Pixso Developer Mode, включают:
1. Параметры и фрагменты кода: разработчик может просматривать спецификации выбранного элемента и использовать доступные фрагменты как справочный материал. Готовую реализацию нужно проверить и встроить в код проекта.
2. Стили: сравните размеры, отступы, цвета и типографику со стилями проекта. Просмотр или копирование спецификации не означает редактирование работающего CSS сайта внутри макета.
3. Адаптация: сравните несколько размеров экрана и длинный текст. Поведение готового интерфейса проверяют отдельно в браузере; адаптация макета сама по себе его не подтверждает.
4. Взаимодействия: используйте прототип дизайнера как описание переходов и состояний. Разработчик должен сверить реализацию с этим описанием; режим передачи не заменяет среду выполнения приложения.
5. Сотрудничество: обсудите вопросы через комментарии и общую ссылку. Проверьте роли участников и доступность скачивания нужных ресурсов.
Результат передачи — понятные параметры, ресурсы, состояния и список открытых вопросов. Перед завершением проверьте, что получатель может открыть файл и найти нужный экран. Как согласовать состояния, компоненты и изменения в одном сценарии, разобрано в руководстве по подготовке макета к разработке.
Как использовать режим Pixso Dev Mode
1. Войдите в режим разработчика
Вы можете перейти в режим разработчика, нажав на кнопку на правой боковой панели. После этого по умолчанию отображаются фреймы верхнего уровня. На правой боковой панели можно посмотреть параметры подготовленных дизайнером ресурсов и скачать доступные файлы.
Обратите внимание: в этом списке отображаются фреймы верхнего уровня. Отдельные текстовые слои, векторные фигуры и компоненты вне фреймов в него не попадают. Однако вы можете создать родительский фрейм (сочетание клавиш: Command/Ctrl + Option/Shift+G), чтобы отобразить их.
2. Поделитесь режимом разработчика
Pixso поддерживает передачу холста в режиме разработчика напрямую другим пользователям. Нажмите кнопку «Поделиться» в верхнем углу, чтобы скопировать ссылку на общий доступ. Разрешение такое же, как и у файла дизайна.
3. Войдите в режим показа слайдов
Поскольку разработчикам неудобно проверять детали дизайна, перетаскивая и масштабируя холст, Pixso предлагает режим слайд-шоу. Дважды щелкните по рамке или нажмите кнопку «Позиционирование». Выбранный фрейм отобразится в центре окна просмотра, чтобы было удобнее изучать его детали.
В режиме просмотра одного фрейма можно выбрать элемент, посмотреть его параметры и скачать доступные графические ресурсы. Чтобы перейти к другому фрейму, нажмите кнопку переключения внизу или выберите фрейм в списке на левой панели.
Чтобы выйти из режима просмотра одного фрейма, нажмите кнопку «Выход» в левом верхнем углу.
Как импортировать файл Figma в Pixso?
В настоящее время Pixso поддерживает два метода импорта файлов Figma. Вы можете выбрать любой из них в зависимости от ситуации:
- Способ 1. Скачайте файл Figma локально и загрузите его в Pixso.
- Способ 2. Скопируйте ссылку на файл и вставьте ее в поле импорта URL в Pixso.
Импорт по ссылке зависит от авторизации и прав доступа. Если доступна локальная копия .fig, ее удобно использовать для воспроизводимой проверки переноса.
Метод 1. Импорт локального файла Figma
1. Сохраните локальную копию исходного файла .fig из Figma на своем компьютере.
2. Найдите опцию Импорт файла в рабочей области Pixso.
3. Выберите файл Figma (.fig) и импортируйте его отдельно или пакетно.
4. После завершения импорта вы можете загрузить другие файлы или открыть непосредственно импортированный файл.
Вы также можете перетащить файл Figma непосредственно в рабочую область и завершить импорт.
Метод 2. Импорт файла Figma по ссылке
1. Получите ссылку на файл из адресной строки, всплывающего окна общего доступа или записи о файле.
Примечание: импорт по ссылке требует разрешенного доступа к исходному файлу. Проверьте авторизацию и права владельца; при недоступности метода используйте разрешенную локальную копию .fig.
2. Найдите опцию Импорт файла в рабочей области Pixso.
3. Выберите Figma (.fig) > Импорт URL.
4. Перед импортом необходимо нажать кнопку Перейти для авторизации. Затем войдите в свою учетную запись Figma и выберите Разрешить доступ.
5. Наконец, вставьте ссылку на файл в поле и нажмите Импорт. После завершения процесса вы сможете просматривать и редактировать файл в рабочем пространстве Pixso.
