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

​

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

Передача проекта включает в себя передачу дизайна пользовательского интерфейса разработчику, который будет его кодировать. До того, как появился термин “передача дизайна”, передача проектов была сложной, неприятной и часто катастрофической задачей. Когда-то Adobe Photoshop был единственным доступным инструментом для разработки пользовательских интерфейсов, а инструментов или функций передачи управления дизайном не существовало. Преобразование дизайна в код называлось “нарезкой PSD”.

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

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

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

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

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

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

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

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

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

Figma

Figma (часто используемый)

​

• Платформы: Web, macOS, Linux, WindowsЦены: $0 / пользователь / месяц, $12 / пользователь / месяц, $45 / пользователь / месяц
• Цены: $0 / пользователь / месяц, $12 / пользователь / месяц, $45 / пользователь / месяц

Хотя Figma не так продвинута, как Zeplin, с точки зрения количества поддерживаемых языков программирования, она переводит стили дизайна в CSS (для web), Swift (для iOS / macOS / iPadOS) и XML (для Android). Тем не менее, это должно охватывать большинство передач дизайна в любом случае.

Альтернативные инструменты передачи дизайна могут быть установлены в виде плагинов Figma.

Изображения могут быть экспортированы или скопированы в буфер обмена в формате SVG или PNG, все сразу или по отдельности, в любом разрешении.

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

В то время как Zeplin является инструментом передачи обслуживания с самым высоким рейтингом из-за того, что он поддерживает больше языков программирования, Figma не сильно отстает, поскольку он многофункциональный и облегчает гораздо больше, чем просто передачу обслуживания.​

Zeplin

Zeplin (самый высокий рейтинг) ​

• Платформы: Web, macOS, Windows​
• Импорт из: Sketch, Figma, Adobe XD, Photoshop
• Цены: $0 / пользователь / месяц, $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

InVision

• Платформы: Web, macOS, Windows
• Цена: $0 / пользователь / месяц, $7,95 / пользователь / месяц

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

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

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

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

Инструмент InVision Inspect может переводить стили дизайна в CSS, Less, Sass, SCSS, Stylus, Swift / Objective-C (Apple) и XML (Android). Если вы знакомы с экосистемой InVision, выбор Inspect для процесса передачи функций проектирования не будет плохим вариантом.

Adobe XD

Adobe XD

• Платформы: macOS, Windows
• Цены: $0 / пользователь / месяц, $9.99 / пользователь / месяц, $22.99 / пользователь / месяц

Adobe XD наиболее похож на Figma, поскольку также является многофункциональным инструментом для разработки пользовательского интерфейса.

Adobe XD - надежный конкурент в этом списке, без серьезных недостатков. На самом деле, если вы уже знакомы с экосистемой Adobe, Adobe XD может быть лучшим выбором, особенно если у вас уже есть подписка на Adobe Creative Cloud (в этом случае у вас может быть доступ к Adobe XD).

Если нет, тогда $9,99 в месяц не так много для такого рода программ, поскольку он предлагает ту же функциональность, что и Figma, за меньшие деньги. Однако, поскольку мы говорим здесь о передаче дизайна, стоит отметить, что Adobe XD переводит стили только в CSS. Но он включает в себя обычные функции (переключение формата, экспорт ресурсов, извлечение контента).

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

P.S: На данный момент [08.11.2022] Adobe приостановила все новые продажи товаров и услуг в России (по понятным нам всем причинам)

Sketch

Sketch

• Платформы: macOS
• Цены: $9 / пользователь / месяц, $99 / пользователь / год

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

Другим недостатком Sketch является то, что его основное приложение поддерживает только пользователей Mac, хотя, поскольку передача управления дизайном выполняется через общедоступный URL-адрес, это не должно беспокоить разработчиков (но что-то, что следует учитывать, если в вашей команде несколько дизайнеров).

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

Заключение

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

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

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