5 лучших инструментов для передачи дизайна в 2022 году

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

"Передача дизайна" подразумевает под собой предоставление дизайна UI разработчику, который будет его программировать (верстать). До появления термина "передача дизайна" его передача была сложной, неприятной и часто катастрофической задачей. В те времена Adobe Photoshop был единственным доступным инструментом для проектирования пользовательских интерфейсов, а инструментов и/или функций для дизайна не существовало. Преобразование дизайна в код именовалось "нарезкой PSD".

За нарезку PSD (документа Photoshop) отвечал разработчик, что было очень неприятно, поскольку разработчики по понятным причинам не хотели работать с инструментами дизайна. Дизайнеры вручную документировали спецификации дизайна, чтобы сделать все более понятным, но это все равно приводило к визуальным/функциональным несоответствиям и бурным дискуссиям с разработчиками.

Передача дизайна сегодня

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

Современные дизайнеры и разработчики считают процесс передачи дизайна одним из ключевых процессов разработки, будь то создание системы дизайна или продукта с нуля. Более того, инструменты разработки UI, такие как Figma, предлагают функции передачи и системы разработки вместе.

Что на самом деле делают инструменты передачи дизайна?

Инструменты передачи помогают:

дизайнерам подготовить свои проекты к проверке
разработчикам в проверке и переводе проектов в код
дизайнерам и разработчикам сотрудничать и общаться

Без передачи дизайна разработчикам остается только одна альтернатива: гадать. Угадывание часто приводит к визуальным и функциональным неточностям - например, использованию неправильных цветов или странному поведению элементов взаимодействия.

Давайте рассмотрим пять лучших инструментов для передачи дизайна.

Figma

Платформы: Web, macOS, Linux, Windows
Цена: 3 тарифа: Бесплатный, $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

Платформы: Web, macOS, Windows
Импорт из: Sketch, Figma, Adobe XD, Photoshop
Стоимость: Имеет 3 тарифа. Бесплатный, $6/месяц, $12/месяц

Zeplin поддерживает больше языков, чем Figma (React Native, Sass, Less, Stylus и т.д. в дополнение к стандартным Swift, XML и CSS). Он также дешевле, чем аналогичные инструменты Figma, хотя это объясняется тем, что аналогичные инструменты Figma многофункциональны и охватывают гораздо большую часть рабочего процесса проектирования пользовательского интерфейса. Zeplin является самым высоко оцененным инструментом для передачи дизайна, поэтому некоторые дизайнеры склонны не замечать этот недостаток.

Чтобы использовать Zeplin, вам придется сначала создать дизайн с помощью Photoshop, Adobe XD, Sketch или Figma, поэтому совершенно понятно, что некоторые дизайнеры предпочитают, чтобы рабочий процесс по созданию пользовательского интерфейса ограничивался одним инструментом, и, вероятно, именно поэтому Figma используется чаще, чем Zeplin.

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

InVision

Платформы: Web, macOS, Windows
Цена: $0/месяц, $7.95/месяц

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

Однако InVision Studio (инструмент InVision для проектирования пользовательского интерфейса) - это то место, где вы, скорее всего, будете создавать свои проекты, прежде чем передавать их разработчикам. Studio доступна для пользователей macOS и Windows.

Хотя стоимость пакета InVision составляет всего 7,95 долларов за пользователя в месяц, что звучит как выгодная сделка по сравнению с аналогичными инструментами, в последнее время компания InVision была вовлечена в негативные отзывы из-за чрезмерных затрат на маркетинг инструментов, которые не оправдали надежд. Основная критика заключается в том, что инструменты InVision иногда кажутся полуфабрикатами и не связанными друг с другом, даже после отложенного запуска. В отличие от этого, Figma работает как единое приложение безупречно.

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

Инструмент Inspect от InVision может переводить стили дизайна в 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 не является лучшим, но и не плох. Он остается в пятерке лучших, потому что дизайнерам нравится его UX.

Еще пять инструментов передачи дизайна

Несмотря на то, что следующие инструменты передачи дизайна не так широко используются, как вышеупомянутые предложения, их стоит рассмотреть, если те, не подходят вам или вашей команде. Кроме того, несколько из перечисленных ниже инструментов (UXPin и Marvel) принадлежат к более крупной экосистеме инструментов, а рабочие процессы лучше держать в рамках одной экосистемы. (То есть, если вы уже используете UXPin или Marvel, будет хорошей идеей использовать их и для передачи).

Заключение

Судя по инструментам для передачи дизайна в этом списке (ранжированном по количеству пользователей), очевидно, что дизайнеры предпочли бы ограничить рабочий процесс проектирования пользовательского интерфейса одной экосистемой, а еще лучше - одним инструментом. Клиенты тоже не прочь заплатить больше.

Лично я с этим согласен. Платить больше за Figma, которая охватывает весь рабочий процесс проектирования пользовательского интерфейса (включая передачу дизайна) не только в рамках одной экосистемы, но и одного инструмента/интерфейса, безусловно, стоит. Тем не менее, я бы смирился с необходимостью синхронизировать дизайн с Zeplin, поскольку он обеспечивает высокий пользовательский опыт.

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

Источник: https://www.sitepoint.com/best-design-handoff-tools/