Статьи

Как передать дизайн в Sketch и InVision

Осмотреть InVision

Передача дизайна — это передача веб-дизайна или приложения из рук дизайнера в руки разработчика, который затем его кодирует. Это не всегда было легко. Разработчики обычно не используют программное обеспечение для дизайна, такое как Photoshop или Sketch, но им все равно нужно знать все о дизайне.

Какие цвета используются, в частности? Какие шрифты? Сколько места находится между этим элементом и этим элементом?

Прочитайте Эскиз Начала Прыжка
Ускорьте процесс проектирования с помощью Sketch

Разработчики должны знать. Войдите в Inspect , от InVision.

Почему InVision теперь мечта дизайнеров

InVision App начинал как браузерный инструмент для создания прототипов с набором полезных инструментов для совместной работы. Это был переломный момент для дизайнеров. В прошлом году команда InVision выпустила Craft , дополнение к Photoshop и Sketch, которое сначала позволило дизайнерам:

  • Быстро добавлять реальные данные в свои проекты
  • Дублирование объектов по горизонтали и вертикали
  • Создавайте общие библиотеки ресурсов и стилей

И через некоторое время они добавили возможность:

  • Прототип пользователя течет прямо в Sketch
  • Синхронизируйте свои экспортируемые активы в InVision

И теперь вы можете синхронизировать свои проекты в InVision, и разработчики могут проверять их (и генерировать из них реальный код). Прототипирование, совместная работа, передача дизайна — круг завершен, все по одной подписке. Мечта дизайнеров, верно?

Если вы не знакомы с Craft, вот краткое изложение того, что на самом деле делает каждая функция Craft . Если вы уже знакомы, читайте дальше, изучая расширенный рабочий процесс, где мы передаем дизайн разработчикам, используя Sketch, Craft и InVision Inspect.

Установка Craft

Прежде чем мы начнем, загрузите Craft for Sketch (пользователи Photoshop также могут следить за этим, но в этом руководстве будет использоваться Sketch на снимках экрана), а также загрузите файл .sketch комплекта Android N GUI Kit от DeveloperTown.

Загрузка Craft

После установки Craft for Sketch вы сможете переключать панель инструментов Craft с помощью команды + P.

Отображение / скрытие панели инструментов Craft

Организация ваших слоев

Но прежде чем мы начнем поспешно передавать наш дизайн, мы должны сначала организовать его. Помните: разработчики могут не иметь под рукой инструментов дизайна из Sketch, но они по-прежнему видят дизайн таким, каким вы видите дизайн — это означает, что мы должны переименовать слои с неоднозначными именами, например, «Rectangle 41», во что-то вроде «Button Background», и удалить лишние / неиспользуемые слои.

Вот сочетания клавиш Sketch, которые вы должны знать:

  • Переименовать: команда + R
  • Группа: команда + G
  • Un * group: * команда + shift + G
  • Переместить слой command : команда + опция + ↑
  • Переместить слой ↓: команда + опция + ↑

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

Организация слоев

Маркировка ваших экспортеров

Далее нам нужно пометить наши активы изображения как экспортируемые. Даже если мы на самом деле не экспортируем их вручную, нам нужно указать Craft, какие из них мы хотели бы синхронизировать с InVision (именно здесь разработчики находят ресурсы изображений, шрифты и даже исходные файлы).

Как обычно, выберите объекты, которые вы хотите экспортировать в качестве графических ресурсов, и нажмите «Make Exportable» в инспекторе, указав формат и разрешение файла, пока вы там.

Создание слоев экспортируемых

Документирование общих цветов

Любые цвета документа, сохраненные в Sketch, будут перенесены в Inspect вместе с вашим дизайном — выберите слой с цветом, который вы хотите задокументировать, откройте палитру цветов в Инспекторе и нажмите крошечный значок +, чтобы сохранить цвет.

Документирование часто используемых цветов

Экспорт в InVision с помощью Craft Sync

Теперь нам нужно синхронизировать наш организованный, документированный цветом дизайн в InVision, где разработчики могут затем проверить и реализовать его, но сначала нам нужно сначала создать новый прототип в InVision.

Начинаем новый проект InVision

Направление в invisionapp.com

  • Нажмите «Создать новый прототип»

Создание нового прототипа

  • Дайте проекту имя
  • Выберите «Android Phone» из списка вариантов
  • Нажмите «Начать»

Начало работы с новым прототипом

Экспорт экранов в проект InVision

Вернувшись в эскиз, щелкните вкладку « Синхронизация » на панели инструментов «Создание». Здесь нам нужно указать пару опций, и тогда мы сможем синхронизировать в первый раз. Выберите «Только выбранные артборды» после выбора всех экранных артбордов (то есть, не рекламного артбэк-фона под названием «Android»).

Наконец, выберите ваш прототип из поля выбора.

Нажмите «Синхронизировать с InVision». Если вам необходимо внести какие-либо изменения, вам помогут два сочетания клавиш:

  • Только выбранные артборды : control + shift + S
  • Все артборды на активной странице : control + shift + A

Синхронизация дизайна в InVision

Осмотр дизайна

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

  • На вкладке «Экраны» выберите один из экранов.

Выбор экранов в InVision

  • Переключитесь в «Режим проверки».

Переключение в режим проверки

Ознакомление с режимом проверки

Возможно, первое, что вы подумаете: «Эй, это как Sketch!». Ну, это вроде как; список слоев слева, инспектор справа, если щелкнуть слой, появятся умные направляющие — единственное отличие состоит в том, что интерфейс немного оптимизирован для проверки проектов. Давайте исследуем.

Сначала посмотрите на Inspect

Извлечение стилей и содержимого

Когда вы щелкаете стиль в инспекторе, он автоматически копируется в буфер обмена, и разработчики затем используют этот стиль в своем коде. Разработчики также могут извлечь содержимое из текстовых слоев, опять же, одним щелчком мыши!

Проверять стили

Совет. Разработчики также могут извлекать стили в виде кода CSS.

Извлечение CSS

Загрузка графических ресурсов

Помните те графические ресурсы, которые мы пометили как экспортируемые в Sketch? Разработчики могут загрузить их, щелкнув изображение в дизайне, а затем щелкнув значок загрузки в инспекторе. В качестве альтернативы все ресурсы можно загрузить с помощью значка « Загрузить все ресурсы проекта» в правом верхнем углу (это будет сжатый ZIP-архив всех ресурсов текущего экрана, а также всех других экранов прототипа).

Загрузка графических ресурсов

Получение обзора цветов и шрифтов

Если вы расфокусируете со слоя (щелкните в любом месте холста за пределами области экрана), инспектор отобразит обзор всех цветов, используемых на этом экране, а также используемых шрифтов и цветов документа, которые мы указали ранее.

Как всегда, разработчикам нужно только нажать и скопировать.

Обзор цветов и шрифтов

Вывод

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

Хотите узнать больше о создании прототипов с помощью Sketch, InVision и Craft? Недавно я сотрудничал с InVision, чтобы создать бесплатную электронную книгу с советами и учебными пособиями, которые научат вас, как использовать весь пакет Craft.