UXPUB 🇺🇦 Дизайн-спільнота

Cover image for В мобильный редактор Play добавили полноценную функцию импорта из Figma
Редакція
Редакція

Опубліковано

В мобильный редактор Play добавили полноценную функцию импорта из Figma

Хотите сделать больше, чем просто показать свой дизайн Figma на мобильном телефоне? С новым импортом из Figma в Play вы можете редактировать дизайны, добавлять расширенные возможности взаимодействия и пользоваться нативными функциями iOS прямо на своем телефоне.

Что такое Play?

Play – единственный инструмент дизайна, специально предназначенный для создания мобильных продуктов. Недавно мы обновили функцию импорта из Figma, которая позволяет импортировать компоненты, стили и целые страницы Figma непосредственно в Play, где вы можете продолжить проектирование и использовать другие мощные функции, Play.

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

Импорт файла Figma в Play

Когда вы импортируете файл из Figma, мы преобразуем компоненты файла в компоненты в Play. Любые настройки Auto Layout, сделанные в Figma, будут сохранены в системе макетов Play, что гарантирует гибкость и отзывчивость ваших компонентов. Мы импортируем стили Figma как Play Foundations, предоставляя вам те же определения цветов и типографики.

Вы также можете импортировать фреймы размером с iOS-девайс из Figma в виде страницы в Play. Если ваш проект содержит фреймы, соответствующие по ширине iOS-устройству (и, по крайней мере, с минимальной высотой устройства), фрейм будет добавлен в ваш проект Play в виде страницы. Если фрейм выше, чем высота устройства, он будет автоматически прокручиваться.

Быстрый и плавный импорт из Figma прямо на ваш телефон, где вы можете продолжить проектирование

Используйте существующую дизайн-систему в Play

Если у вас есть готовая дизайн-система, встроенная в Figma, ее можно импортировать в Play, где вы можете создавать страницы и юзерфлоу прямо на своем телефоне.

Это позволяет вам изменять дизайн и пользоваться уникальными функциями Play, включая мощные взаимодействия и нативные функции iOS.

Проектирование в Play с использованием компонентов и стилей, созданных в Figma

Продолжайте проектировать в Play

Изучая свой дизайн на телефоне, вы, вероятно, захотите что-то изменить: некоторые карточки могут оказаться больше, чем вы ожидали, или шрифты могут казаться слишком маленькими.

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

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

Как только вы увидите дизайн на своем телефоне, вы можете с легкостью изменить в Play такие параметры, как интервал, размер и шрифт

Ваши возможности не ограничены редактированием импортированных файлов. Вы можете создавать новые компоненты или составлять новые страницы. Вы также можете использовать импортированные компоненты вместе с Play Library, встроенной коллекцией, содержащей десятки настраиваемых компонентов на основе общих паттернов интерфейса.

А кроме того, вы можете расширить свои дизайны с помощью нативных элементов в Play.

Встроенные функции Play

Одна из самых сильных сторон Play – это доступ ко всем нативным функциям iOS. Карты, видео, текстовые поля, модальные окна, календари, переключатели и степперы, коллекции… теперь вы можете использовать все эти и многие другие функции непосредственно в Play.

Если при импорте файла Figma, мы найдем части дизайна, ссылающиеся на нативные элементы, такие как текстовые поля, date pickers или карты, мы преобразуем их в нативные версии. Вы также можете найти сетки, преобразованные в Collections – мощный виртуальный список с поддержкой данных, доступный в Play.

Такие вещи, как ввод текста в поля входа в систему, очень распространены, но «реализовать» их в других инструментах – настоящая головная боль. Play использует нативное текстовое поле iOS, которое позволяет вам настраивать тип клавиатуры, и устанавливать такие параметры, как автокоррекция и поля пароля.

В Play создается нативное текстовое поле

Нативные средства выбора – еще один полезный элемент, который вы можете добавить в Play. Вы можете синхронизироваться с источником данных, настроить внешний вид каждого средства выбора и выделить текстовое поле для отображения выбора, сделанного пользователем.

Нативное средство выбора используется для выбора города на этой странице входа

Нативные жесты взаимодействий

Одна из лучших причин импортировать свои дизайны из Figma в Play – возможность воспользоваться преимуществами расширенных взаимодействий Play.

По мере того, как мы разрабатываем функции передачи проекта разработчикам, многие пользователи используют мощную систему взаимодействий Play для создания «реалистичных прототипов».

В то время, как другие инструменты пытаются «приблизиться к реальному» с помощью возможностей прототипирования, имитировать в Play попросту нечего – ваш продукт визуализируется с помощью той же технологии, что и готовое нативное iOS-приложение.

Если вы достигли пределов прототипирования в своем основном инструменте дизайна, вам понравятся расширенные возможности в Play. Если вы столкнулись с трудностями при использовании других инструментов для прототипирования, которые могут только пытаться имитировать нативные приложения, вам понравится повышение производительности, которое предоставит Play. А если вы планируете провести тестирование с пользователями, вы сможете проверить опыт, неотличимый от реального продукта.

Play поддерживает все элементы управления видео. В этом примере мы объединяем триггер Play Scroll Start с Set State для создания плавной анимации

Проектирование в Play основано на опыте, обратной связи и проведении итераций. Установите триггеры для тапов, панорамирования, скролла или перетаскивания. Анимируйте элементы или свойства, прокручивайте их до позиций, переходите между состояниями компонентов и многое другое. Испытайте свой дизайн в игровом режиме с таким же внешним видом, ощущениями и производительностью, что и в нативном приложении, а затем снова погрузитесь в процесс проектирования, дорабатывая свои решения, пока они не станут идеальными.

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

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

Функция Variables 1.0 будет выпущена в следующем релизе Play (v0.9.5).

Поделитесь тем, что вы сделали

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

Попробуйте Play уже сегодня

Если вы проектируете для iOS, попробуйте создать дизайн в Play. А если вы проектируете в Figma, то начать работу стало проще благодаря новой функции импорта из Figma.

Чтобы узнать больше об импорте из Figma, посетите наш недавний семинар. Там вы сможете увидеть Play в действии.

В настоящее время мы находимся в стадии закрытого бета-тестирования и выпускаем ключи каждую неделю. Если вы заинтересованы в регистрации, посетите наш веб-сайт и следите за обновлениями наших продуктов в Twitter!


Перевод статьи createwithplay

Найстарші коментарі (0)