Sketch Update: Cloud Inspector — браузерная утилита для разработчиков


04.02.2020 Время чтения - 3 минуты 191

В нашем тизере 2020 года мы объявили, что в январе 2020 года облачные технологии станут доступны разработчикам. И сегодня мы рады выполнить это обещание, представив бета-версию Cloud Inspector.

Cloud Inspector позволяет разработчикам легко получать информацию, необходимую им для преобразования пикселей в код – всё это в браузере и бесплатно.

Итак, официально: первая версия Cloud Inspector уже находится в бета-версии. Мы уже использовали его некоторое время для внутренних целей и тестировали на реальных пользователях. Вот что можно пощупать уже сейчас, а чего стоит ожидать в будущем.

Доступно для всех и абсолютно бесплатно

Cloud Inspector – это прежде всего сотрудничество и совместная работа в командах, но кроме того мы знаем, что дизайнеры-одиночки довольно часто работают и с разработчиками. Итак, мы сделали Cloud Inspector доступным для всех.

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

Inspector turning on in document settings

Старый добрый инспектор, но только в браузере

Чтобы запустить 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-дизайнерам

Неоморфизм — вызов UX/UI-дизайнерам