В нашем тизере 2020 года мы объявили, что в январе 2020 года облачные технологии станут доступны разработчикам. И сегодня мы рады выполнить это обещание, представив бета-версию Cloud Inspector.
Cloud Inspector позволяет разработчикам легко получать информацию, необходимую им для преобразования пикселей в код – всё это в браузере и бесплатно.
Итак, официально: первая версия Cloud Inspector уже находится в бета-версии. Мы уже использовали его некоторое время для внутренних целей и тестировали на реальных пользователях. Вот что можно пощупать уже сейчас, а чего стоит ожидать в будущем.
Доступно для всех и абсолютно бесплатно
Cloud Inspector – это прежде всего сотрудничество и совместная работа в командах, но кроме того мы знаем, что дизайнеры-одиночки довольно часто работают и с разработчиками. Итак, мы сделали Cloud Inspector доступным для всех.
Если у вас есть Team Workspace в облаке, то каждый проект, которым вы делитесь, будет готов к проверке сразу. А для проектов, которые вы сохраняете в личном воркспейсе вы можете подключить Инспектор в настройках документа.
Старый добрый инспектор, но только в браузере
Чтобы запустить Cloud Inspector, нажмите на новую вкладку Inspect на боковой панели рядом с артбордом в облаке. Когда вы сделаете это, то увидите что-то уже довольно знакомое – вид инспектора в атрибутах этого артборда.
Как и Inspector в приложении Mac, Cloud Inspector изменяется для отображения соответствующей информации в зависимости от выбранного слоя или артборда. Мы также позаботились о том, чтобы он скрывал всё ненужное, например, выставленный в 0 радиус угла, режим смешивания Normal или непрозрачность 100%. Другими словами, Cloud Inspector скрывает значения по умолчанию и предоставляет наиболее важную информацию, необходимую разработчикам.
Возможность копировать атрибуты одним кликом
Если вы проверяете файл и хотите скопировать атрибут, то всё, что вам нужно сделать – навести на него курсор и щелкнуть по значку копирования. Прямо сейчас мы скопируем простую текстовую версию этого атрибута, а в будущем мы дадим вам возможность выбирать язык, который вы захотите скопировать (например, CSS).
Для слоев с несколькими атрибутами, такими как различные режимы заливки, смешивания или свойства текста, вы можете щелкнуть по заголовку раздела, чтобы скопировать их все одновременно. Вот как в качестве примера выглядит копирование группы текстовых атрибутов:
Копирование цветов в нескольких форматах
Копирование атрибутов в буфер обмена полезно, но с учётом присутствия цветов мы решили сделать ещё кое-что. Наведите курсор на любой цвет и нажмите на стрелку, которая появляется для вызовы меню форматов. Отсюда вы можете копировать цвета в форматах HEX, RGB и HSL, а также в форматах NSColor и UIColor для Objective-C и Swift.
Когда вы выбираете цветовой формат, мы сохраняем этот выбор до конца сеанса, поэтому любой другой цвет, который вы будете копировать, останется в том же формате.
Параметры слоя стали проще
Когда вы выбираете слой для проверки, наведение курсора на любой другой слой на артборде покажет вам определённые параметры этого слоя. В сочетании с атрибутами позиции и размера в Инспекторе, подбор размеров проектов должен стать намного легче.
Что предстоит Cloud Inspector?
Эта бета-версия Cloud Inspector – только начало, но мы уже усердно работаем над следующим апдейтом, который будет включать:
- Лучшую поддержку дизайн-систем с понятным способом изучения символов, переопределений и стилей текста;
- Экспорт готовых к продакшену активов – от отдельных слоев до целых проектов;
- Дополнительные настройки кода и формата цвета (включая CSS и другие языки);
- Сохранение выбранного языка (вам необходимо выбрать язык всего один раз).
Читайте так же: Неоморфизм — вызов UX/UI-дизайнерам
