В этой статье мы исследуем текущее состояние инструментов передачи дизайна и процесса проектирования в целом, а также предложим наш выбор из пяти лучших инструментов передачи дизайна на рынке.
Передача дизайна подразумевает передачу дизайна пользовательского интерфейса разработчику, который будет его кодировать. До того, как «передача дизайна» стала даже термином, передача дизайна была сложной, разочаровывающей и часто катастрофической задачей. Когда-то Adobe Photoshop был единственным инструментом, доступным для разработки пользовательских интерфейсов, а инструментов и / или функций передачи дизайна не существовало. Преобразование дизайна в код называлось «нарезкой PSD». О, дни.
Нарезка PSD (документа Photoshop) была обязанностью разработчика, что очень расстраивало, потому что разработчики по понятным причинам не хотели работать с инструментами дизайна. Дизайнеры вручную документировали спецификации дизайна, чтобы прояснить ситуацию, но это все равно приводило к визуальным / функциональным несоответствиям и горячим дискуссиям с разработчиками. Мне все еще снятся кошмары. (Если вы хотите разделить мои кошмары, вот хорошая коллекция мемов, которую вы можете изучить. )
Передача дизайна сегодня
В настоящее время существует множество инструментов пользовательского интерфейса с функциями передачи дизайна и даже инструментов, которые полностью предназначены для передачи и помогают дизайнерам и разработчикам переводить дизайн в код, размещать файлы дизайна, поддерживать согласованность между элементами дизайна и способствовать эффективному сотрудничеству между дизайнером и разработчиком..
Модернизированные дизайнеры и разработчики признают процесс передачи дизайна ключевым процессом разработки, будь то создание дизайн-системы или продукта с нуля. Фактически, инструменты дизайна пользовательского интерфейса, такие как Figma, предлагают функции передачи и дизайна одновременно.
Что на самом деле делают инструменты передачи дизайна?
Инструменты передачи обслуживания помогают:
- дизайнеры готовят свои проекты для проверки
- разработчикам проверять дизайн и переводить его в код
- дизайнеры и разработчики для совместной работы и общения
Без передачи дизайна разработчикам остается только одна альтернатива: догадки. Угадывание часто приводит к визуальным и функциональным неточностям — например, к использованию неправильных цветов или странному поведению взаимодействия. В свою очередь, это влияет на пользовательский опыт и отправляет дизайнеров в ядерную катастрофу.
Давайте взглянем на пять лучших инструментов передачи дизайна.
Figma (most used)
- Платформы: Web, macOS, Linux, Windows
- Стоимость : 0 долларов за пользователя в месяц, 12 долларов за пользователя в месяц, 45 долларов за пользователя в месяц.
Хотя Figma не так продвинута, как Zeplin, с точки зрения количества поддерживаемых языков кода, она переводит стили дизайна в CSS (для Интернета), Swift (для iOS / macOS / iPadOS) и XML (для Android). Тем не менее, это в любом случае должно охватывать большинство передач дизайна.
Альтернативные инструменты передачи дизайна могут быть установлены как плагины Figma, когда проекты нужно переводить на Sass, Less, Stylus, React Native и т. Д.
Ресурсы изображений можно экспортировать или скопировать в буфер обмена в формате SVG или PNG, все сразу или по отдельности, в любом разрешении.
Если соавторам есть что сказать (или спросить) о дизайне, они могут четко и открыто общаться с помощью контекстных комментариев, что способствует совместной работе и гарантирует, что все понимают, как дизайн должен выглядеть, ощущаться и функционировать.
Figma — это не только наиболее часто используемый инструмент для передачи дизайна, но также для пользовательских потоков, пользовательских интерфейсов, интерактивных прототипов, систем дизайна и управления версиями (согласно опросу 2020 Design Tools Survey ). В то время как Zeplin — инструмент с наивысшим рейтингом из-за того, что он поддерживает больше языков кода, Figma не слишком сильно отстает, поскольку он многофункциональный и облегчает гораздо больше, чем передачу.
В общем, я бы выбрал Figma (как и большинство команд) до тех пор, пока мне не понадобится передавать проекты, использующие неподдерживаемый язык кода, и в этом случае Zeplin делает более чем идеальный вторичный вариант.
Zeplin (highest rated)
- Платформы: Интернет, macOS, Windows
- Импорт из: Sketch, Figma, Adobe XD, Photoshop
- Стоимость : 0 долларов за пользователя в месяц, 6 долларов за пользователя в месяц, 12 долларов за пользователя в месяц.
Zeplin поддерживает больше языков кода, чем Figma (React Native, Sass, Less, Stylus и т. Д., В дополнение к стандартным Swift, XML и CSS). Это также дешевле, чем инструменты, подобные Figma, хотя это связано с тем, что инструменты, подобные Figma, многофункциональны и охватывают гораздо больше рабочего процесса дизайна пользовательского интерфейса. Zeplin — это инструмент с наивысшим рейтингом для передачи дизайна (согласно опросу Design Tools 2020), поэтому некоторые дизайнеры склонны упускать из виду этот недостаток.
Чтобы использовать Zeplin, вам нужно сначала создать дизайн с помощью Photoshop, Adobe XD, Sketch или Figma, поэтому совершенно понятно, что некоторые дизайнеры предпочли бы сохранить свой рабочий процесс проектирования пользовательского интерфейса в одном инструменте, и, вероятно, именно поэтому Figma используется для передачи обслуживания чаще, чем Zeplin.
С точки зрения функциональности Zeplin делает все, что вы ожидаете от инструмента передачи обслуживания (и делает это довольно хорошо). Он экспортирует графические ресурсы в различных форматах и в различных разрешениях, преобразует стили дизайна в код и упрощает общение.
InVision
- Платформы: Интернет, macOS, Windows
- Стоимость : 0 долларов США за пользователя в месяц, 7,95 долларов США за пользователя в месяц.
Инструмент InVision для передачи дизайна, Inspect, который работает в рамках Specs и Prototype (инструмент проектной документации InVision и основное веб-приложение соответственно), является лишь одним из инструментов в большом (возможно, слишком большом) наборе инструментов для совместной работы InVision.
Однако InVision Studio (инструмент дизайна пользовательского интерфейса InVision) — это то место, где вы, скорее всего, будете создавать свои проекты, прежде чем передавать их разработчикам. Studio доступна для пользователей macOS и Windows.
В то время как пакет InVision обойдется вам всего в 7,95 долларов США за пользователя в месяц, что звучит как приятная сделка по сравнению с аналогичными инструментами, InVision недавно получила отрицательные отзывы из-за перерасхода средств на маркетинг инструментов, которые не совсем соответствовали требованиям. Реклама. Основная критика заключается в том, что инструменты InVision иногда кажутся недоработанными и отключенными даже после отложенного запуска. В отличие от этого, Figma безупречно работает как отдельное приложение.
Тем не менее, InVision является третьим по популярности инструментом для передачи дизайна и все еще широко используемым инструментом в целом. Хотя это, кажется, на спаде, с твердой конкуренцией еды на его часть рынка, это было тихо в последнее время (надеюсь занято слушать клиент, так что я бы не написал его еще ).
Инструмент InVision Inspect может переводить стили дизайна в CSS, Less, Sass, SCSS, Stylus, Swift / Objective-C (Apple) и XML (Android), что составляет впечатляющий список. Если вы знакомы с экосистемой InVision, выбор Inspect для процесса передачи дизайна не будет плохим вариантом и не обернется для банка.
Adobe XD
- Платформы: macOS, Windows
- Стоимость : 0 долларов США за пользователя в месяц, 9,99 долларов США за пользователя в месяц, 22,99 долларов США за пользователя в месяц.
До сих пор мы обсуждали инструменты передачи дизайна (Zeplin), многофункциональные инструменты дизайна пользовательского интерфейса, которые включают в себя передачу дизайна (Figma), и дизайнерские пакеты с несколькими полуинтегрированными инструментами, включая передачу дизайна (InVision). Из этих инструментов Adobe XD больше всего похож на Figma, являясь также многофункциональным инструментом для проектирования пользовательского интерфейса.
Adobe XD — серьезный соперник в этом списке без серьезных недостатков. Фактически, если вы уже знакомы с экосистемой Adobe, Adobe XD может быть лучшим выбором, особенно если у вас уже есть подписка Adobe Creative Cloud (в этом случае у вас может быть доступ к Adobe XD).
Если нет, то $ 9,99 в месяц по-прежнему будет справедливой сделкой, поскольку он предлагает те же функции, что и Figma, за меньшие деньги. Однако, поскольку мы говорим здесь о передаче дизайна, стоит отметить, что Adobe XD только переводит стили в CSS. Но он включает в себя обычные функции (переключение формата, экспорт активов, извлечение контента).
В общем, если вам требуется только передача дизайна на CSS и / или вы уже знакомы с экосистемой Adobe, Adobe XD — достойный выбор. В этих двух случаях дополнительная плата за подписку на Figma может оказаться ненужной.
Sketch
- Платформы: macOS
- Цена : 9 долларов за пользователя в месяц, 99 долларов за пользователя в год.
Наряду с Figma и Adobe XD, Sketch — еще один многофункциональный инструмент дизайна, который может облегчить большую часть рабочего процесса дизайна пользовательского интерфейса, включая передачу дизайна. К сожалению, Sketch поддерживает только перевод стилей дизайна в CSS (например, Adobe XD).
Еще одним недостатком Sketch является то, что его основное приложение поддерживает только пользователей Mac, хотя, поскольку передача дизайна осуществляется через общий URL-адрес, это не должно вызывать беспокойства у разработчиков (но это следует учитывать, если в вашей команде несколько дизайнеров).
В целом Sketch не самый лучший, но и неплохой. Он остается в пятерке лучших, потому что дизайнерам нравится его пользовательский интерфейс.
Еще пять инструментов для передачи дизайна
Хотя следующие инструменты передачи дизайна не так широко используются, как вышеупомянутые предложения, следующие инструменты передачи дизайна стоит изучить, если пять лучших не подходят для вас или вашей команды. Кроме того, пара из следующих инструментов (UXPin и Marvel) принадлежит к более крупной инструментальной экосистеме, и лучше содержать рабочие процессы в рамках одной экосистемы. (То есть, если вы уже используете UXPin или Marvel, неплохо было бы использовать его и для передачи обслуживания.)
- Abstract
- UXPin Handoff
- Marvel Handoff
- Avocode
- Sympli
Заключение
Судя по инструментам передачи дизайна в этом списке (ранжированных по количеству пользователей), очевидно, что дизайнеры предпочли бы объединить рабочий процесс проектирования пользовательского интерфейса в единую экосистему или, что еще лучше, в один инструмент (единственный специализированный инструмент передачи дизайна в «верхней части»). пять «- Цеплин). Клиенты тоже не прочь платить больше.
Лично я с этим согласен. Платить больше за Figma, который охватывает весь рабочий процесс дизайна пользовательского интерфейса (включая передачу дизайна) не только в рамках одной экосистемы, но и за один инструмент / интерфейс, безусловно, того стоит. Тем не менее, я был бы согласен с синхронизацией дизайна с Zeplin, поскольку он предлагает хороший пользовательский интерфейс.
Однако другие инструменты передачи обслуживания также имеют свои преимущества. В конечном счете, команды дизайнеров и разработчиков должны искать что-то, что облегчит сотрудничество дизайнера и разработчика, поэтому стоит попробовать два или три варианта, чтобы увидеть, что лучше всего подходит вам и другим заинтересованным сторонам, участвующим в передаче работы дизайнера и разработчика.
