Как сделать приложение в adobe xd
Добавил пользователь Евгений Кузнецов Обновлено: 04.10.2024
Adobe Experience Design CC (Beta) или Adobe XD — это новый творческий инструмент от компании Adobe для проектирования высококачественных прототипов веб-сайтов и мобильных приложений. Вы можете попробовать новое публичное превью Adobe XD на Windows 10, выпущенный недавно.
Почему Adobe XD?
Хорошо продуманные приложения часто начинается с эскиза, грубого прототипа, всего того, что может быть показано всем заинтересованным сторонам. Но всегда была проблема в том, чтобы получить что-то пригодное для тестирования и демонстрации обязательно нужно было писать код. Вам нужны были разработчики, участвующие в создании прототипа, который возможно придётся выбросить. Но как только у вас есть разработчики, пишущие код, они не всегда заинтересованы чтобы изменить код — даже если это основывается на обратной связи для вашего прототипа. В своей книге The Inmates are Running the Asylum, Алан Купер обсуждает именно эту проблему. Вот где Adobe XD прекрасно подходит — этот инструмент специально разработан для построения быстрых прототипов, а также для высокой точности воспроизведения дизайна и пользовательского опыта. С помощью Adobe XD, любой пользователь может создать фреймы, интерактивные прототипы и высокодостоверный дизайн приложений и веб-сайтов. После того, как у вас есть свой прототип, вы можете импортировать визуальные эффекты в Visual Studio или IDE по вашему выбору, чтобы начать создавать окончательное приложение.
Ниже будет быстрый пошаговый обзор использования Adobe XD.
Проектирование пользовательского опыта
Чтобы дать вам представление о том, как использовать Adobe XD для разработки быстрых прототипов, я проведу вас через весь процесс, в котором я собираюсь перепроектировать приложение и создать быстрый прототип в Adobe XD. Я обнаружил, что наличие интерактивного прототипа с межэкранными переходами и несколькими экранами гораздо более эффективно для иллюстрации пути пользователя, чем раскадровки изображений экрана. Я разрабатываю новую версию приложения под названием Архитектура, которое изначально построено для Windows, но теперь я использую Xamarin чтобы сделать кросс-платформенную версию, которая работает на Windows, iOS и Android. Изучив архитектуру в колледже, я всегда любил чистый лист бумаги. Довольно часто я начинаю с грубого эскиза в моём блокноте, но это не то, что обычно является интерактивным или в состоянии, в котором им можно поделиться в высоком качестве, поэтому я использую XD.
Когда я начинаю работать, Adobe XD приветствует меня пустым холстом, где я хочу разместить монтажные области — по одной для каждого экрана моего приложения. Для того, чтобы разместить монтажные области на холст, я нажимаю кнопку монтажной области (последний значок на левой панели инструментов) — и я вижу варианты для различных форм-факторов устройства, включая варианты для iOS, Android, Surface и Web.
Для начала, я выбираю несколько размеров экрана, нажав на Android Mobile, iPhone и Surface Pro 4 в инспекторе свойств справа и тогда создаются пустые монтажные области для каждого формата на холсте проекта.
Для того, чтобы начать свой проект я сначала сосредоточусь на разработке страницы карты, которая будет показывать карту текущего местоположения пользователя и примечательные здания поблизости. Я взял скриншот Сан-Франциско из папки на моем компьютере и перетащил его на каждую страницу, подогнав по размерам. После того, изображение помещено на страницу, любые не помещающиеся на экране области изображения скрываются при отмене выбора изображения. Это очень полезно при проектировании дизайна для нескольких размеров экрана параллельно.
Теперь я хочу сосредоточиться на одном из кадров экрана для разных устройств, чтобы добавить некоторые подробности, в данном случае, это дизайн для Android с левой стороны. Я перемещаюсь по монтажной области с помощью сенсорной панели на моем компьютере, панорамируя двумя пальцами, увеличивая и уменьшая масштаб с помощью сенсорной панели жестами сжатия и расширения. Это такой же метод взаимодействия для XD как и на MacOS. В этом первом предварительном выпуске XD для Windows, поддержка сенсорного и пера еще не работает на холсте проекта, но они работают на панели инструментов и в инспекторе свойств. Моя команда работает в тесном контакте с командой XD для того, чтобы сделать хороший пользовательский опыт для пера и сенсорного экрана в Adobe XD, который будет готов в конце 2017 года.
Я начал работу над прототипом, добавив три красных прямоугольника для обозначения архитектурных достопримечательностей в Сан-Франциско, и прямоугольника в нижней части, которая будет работать в качестве кнопок для взаимодействия с пользователем. Когда я рисую каждую кнопку, XD направляет меня с помощью рекомендаций, чтобы помочь мне расположить кнопки по отношению друг к другу. Я игнорирую рекомендации, чтобы показать, что, выбрав все три кнопки, а затем нажав кнопку Выровнять по нижнему краю, находящуюся в верхней части инспектора свойств (панель справа), я могу быстро выровнять кнопки и установить их размеры, чтобы иметь одинаковую ширину и высоту в свойствах на панели задач. Затем я могу распределить кнопки по горизонтали с помощью горячих клавиш Ctrl-Shift-H. Вы также можете распределить объекты по горизонтали и по вертикали с помощью иконки распределения объектов в инспекторе свойств.
Затем я использую текстовый инструмент для добавления заполнения значков кнопок, я пользуясь набором шрифтов Segoe MDL2 (стандартный, поставляется с Windows) для оформления кнопок Buildings, Locate Me, Add. Через несколько минут у меня есть идеи насчёт приложения и создал первую страницу моего приложения Architecture. Теперь я хочу добавить еще одну страницу, которая будет использоваться для просмотра списка зданий, при нажатии на первую кнопку на первой странице. Я добавил еще одну мобильную страниц для Android, нажав на кнопку монтажной области и выбрав новую страницу для мобильных устройств Android. Новая монтажная область страницы теперь находится на моем холсте проектирования прямо под страницей, над которой я работаю. Так как эта страница предназначена для просмотра списка зданий, я начинаю в дизайне с того, как каждое здание в списке будет выглядеть. Я перетащил изображение здания с моего рабочего стола на квадрат, и автоматически изменяется размер и обрезается изображение до квадратного.
После завершения этого первого элемента дизайна, я выбираю все элементы для зданий и нажмите кнопку Repeat Grid с правой стороны, а затем протаскиваю ручку, которая появилась на нижней части прямоугольника в нижней части страницы, повторяя элемент.
В то время как я протаскиваю повтор сетки, я вижу элементы из зданий отображаются мгновенно и мне подсвечивается интервал между элементами. После того, как я смотрю на все элементы вместе, становится ясно, что мне не нужны рамки вокруг отдельных элементов и такое большое расстояние между ними. Все, что мне нужно сделать, это выбрать элемент прототипа в верхней части списка и отредактировать этот элемент — изменения автоматически будут применены ко всему списку. Чтобы изменить интервал между элементами, я навёл курсор между отдельными пунктами и появилась розовая область отвечающая за расстояние между элементами. Растягивая эту область, я изменяю интервал между элементами и вижу результат мгновенно.
Теперь, когда у меня есть две связанные страницы, я хочу соединить их так, чтобы у меня был полноценный прототип, который начинается со страницы карты, а затем показывает страницу со зданиями, когда пользователь нажимает на кнопку Buildings. Я делаю это в интерфейсе Adobe XD для прототипирования, нажав на кнопку Prototype в верхней части окна. Я начинаю, нажав на кнопку Buildings на странице карты и кнопка подсвечивается синим цветом, а справа от кнопки появляется синяя стрелка. Все, что я делаю, это перетаскиваю, чтобы стрелка соединилась со страницей Buildings — тогда я могу установить тип и продолжительность визуального перехода — это очень легко.
Чтобы проверить это действие, я нажимаю кнопку Play в правом верхнем углу окна приложения и появляется новое окно со страницей карты. Затем я нажимаю на кнопку Buildings и мы видим как при предпросмотре приложения происходит переход на страницу Buildings. Предварительный просмотр прототипа также можно перетащить на другой экран, если у вас работает расширение рабочего стола и даже можно внести изменения в режиме конструктора во время предварительного просмотра. После того, как вы закончите с дизайном прототипа, вы можете легко экспортировать монтажные области как изображения, которые разработчики могут использовать в качестве отправной точки для разработки приложения.
В качестве последнего шага, я экспортировал монтажные области в изображения формата PNG и открыл их в Visual Studio, чтобы начать процесс вёрстки Xaml для моего приложения:
Технологии, которые стоят за Adobe XD
Работа с компанией Adobe по переносу приложения такой сложности и качества поможет другим разработчикам подготовиться к разработке для Windows 10. Благодаря тесному сотрудничеству в этом приложении, мы взяли большую часть обратной связи от разработчиков Adobe, чтобы сделать универсальную платформу Windows еще лучше.
Adobe XD на Windows является UWP приложением на основе XAML, C++, JavaScript и стремится быть лучшим в классе представителей использования пользовательского опыта Windows UWP при совместном использовании, насколько это возможно, из их Mac версии. Adobe имеет очень высокую планку для разработки приложений, приложения тестируются с помощью автоматизированных тестов. Adobe выпустив первый релиз Adobe XD ранее в этом году для Mac как публичное превью и через это публичное превью для Windows, Adobe получила лучшее приложение для проектирования пользовательского опыта. Обратная связь получаемая для обеих версий, как для Mac, так и для Windows, делает XD еще лучше. Интересно отметить, что Adobe использует преимущества некоторых новых функциональных возможностей в ОС Windows Anniversary Edition, чтобы они могли выпустить Adobe XD через приложение Creative Cloud (через которое вы получите Photoshop, Illustrator Lightroom и другие творческие приложения сегодня) вместо Windows Store.
Формы поддержки проекта Adobe XD на платформе Windows
Теперь, когда вы можете начать использовать Adobe XD на Windows, пожалуйста, попробуйте его и отправьте отзыв в Adobe через их сайт UserVoice и помогите сформировать будущее Adobe XD на Windows, 10. Это только начало.
— Прочитайте в блоге компании Adobe об этом выпуске Adobe XD на Windows 10.
— Попробуйте публичное превью Adobe XD (всё, что вам нужно — это компьютер с Windows 10 Anniversary Edition и бесплатная учётная запись Adobe ID или Creative Cloud).
— Отправьте свою обратную связь в Adobe на любую тему, но мы особенно заинтересованы в понимании того, как вы хотели бы использовать перо и сенсорные возможности в Adobe XD и как вы хотели бы использовать новый Surface Dial? Как бы вы использовали перо и сенсорные возможности одновременно с Adobe XD? Какие другие приложения и сервисы вы хотите, чтобы взаимодействовали с Adobe XD? Какие бы расширения Adobe XD еще улучшили бы ваш рабочий процесс дизайнера-разработчика?
Начните работать сегодня с Adobe XD на Windows 10 с помощью публичного превью сегодня.
Формат файла Adobe XD представляет из себя архив, который содержит описание структуры макеты в виде JSON структуры, графических растровых и векторных файлов использованных при создании макета.
Программу-сервис Avocode — за деньги.
Кроме того, некоторые программы работают только в среде Mac OS (Sketch - только MAC OS или веб-приложение)
И тому подобное.
Чтобы открыть макет Adobe XD бесплатно, можно воспользоваться бесплатной программой-сервисом Photopea — в этом случае видны все параметры объектов макета и даже доступ к CSS значениям реализован удобнее чем в Photoshop. А вот реализация извлечения растровых объектов из макета, для внедрения в вёрстку, немного подкачала, на мой вкус.
Итого, файл макета открыт в Photopea — данные CSS доступны для переноса. Папочка с графикой для вставки в вёрстку — готова.
Возможно, подход не оригинальный. Но уж чем богаты.
Вероятно есть и более простые методы.
Web-технологии
237 постов 4.6K подписчик
Правила сообщества
1. Не оскорблять других пользователей
2. Не пытаться продвигать свои услуги под видом тематических постов
3. Не заниматься рекламой
4. Никакой табличной верстки
5. Тег сообщества(не обязателен) pikaweb
Adobe XD бесплатный же
Сказ о том, как чел порвал жопу, чтобы зарабатывать не заплатив ни копейки за ПО в котором педалит =)
Собрались далекие от темы люди и пытаются убедить автора установить прогу обновив винду до 10ки. Обычные хомяки, хавают что дают, а не то что удобно.
ЗЫ: 10ка всё еще глючная
.neighborhood
Прошло 3 месяца с первого поста про мой проект — Gradients.app, он про цвета и градиенты.
Расскажу про изменения и обновления за это время.
Вращение градиента
Вращение градиента появилось в мини-карточке, на подробной странице и при генерации нового градиента. Выбирайте нужный угол поворота и скачивайте градиент под выбранным углом. В мини-карточках градиент скачивается в размере 1920 на 1080 px.
Новый вид страницы градиента
Пользователь может задать размер градиента самостоятельно или выбрать уже готовые размеры. Максимальный размер градиента — 2000 на 2000 px. Изображение градиента скачивается если на него нажать.
Добавление градиента в общую ленту
Сгенерируйте градиент → сохраните в профиль → перейдите в мои градиенты → отправьте в общую ленту.
Пользователю придёт письмо о добавлении в общую ленту и ссылка на градиент.
Генерация градиентов без грязных переходов
Случайная генерация градиентов теперь красивая, не появляются грязные переходы, а цвета рассчитываются по HSL модели.
Появился инструмент смешивания цветов
Можно выбрать до 4х цветов и два режима смешивания RGB и HSL.
Просто про режимы RGB и HSL:
Смешивая синий и желтый в RGB вы получите серый цвет, а в режиме HSL зеленый. В RGB между синим и желтым на цветовом круге серый цвет поэтому их сложение его и даст, а в HSL получится дуга т.к. цвета на разном уровне.
Появился генератор оттенков
Выбирайте цвет и количество оттенков от 3 до 36. Оттенки генерируются в сторону белого, серого и черного цвета.
Набор сочетаний цвета текста и фона
На мини-карточках есть цвет фона, текста и их контраст, чем он выше тем читаемость лучше.
Можно отсортировать наборы по контрасту, времени и просмотрам.
На подробной странице сочетания добавлен заголовок, абзац текста со всеми буквами алфавита и различные начертания шрифта.
Генерация сочетаний цвета текста и фона
К наборам добавил генерацию и для пользователей.
Пользователь может сгенерировать все цвета случайно или каждый по отдельности. Под цветами добавлены подсказки читаемости для заголовков и обычного текста по стандартам WCAG.
Огромное спасибо за комментарии в предыдущем посте, я всё записал и уже что-то добавил.
Буду рад критике и советам.
Генератор градиентов и палитры по картинкам
Делюсь своим проектом Gradients.app, занимаюсь им в свободное время и очень жду замечаний и предложений. Проект может пригодиться дизайнерам и иллюстраторам — тут про цвета и градиенты.
Набор градиентов
На сайте можно скачать градиенты разных размеров в PNG, скопировать цвета по отдельности и CSS-коды градиентов. Градиенты сортируются по цветам, скачиваниям и дате. Градиентов на сегодня 87, добавляю их самостоятельно, если у вас есть классные сочетания — буду рад их добавить.
Можно провалиться внутрь карточки градиента, там будет больше информации и разные размеры для скачивания. Для веб-дизайнера есть CSS-код градиента, а для иллюстраторов — цвета в RGB, CMYK, HEX и HSL.
Генератор градиентов
Можно делать градиенты самим: подбирать цвета, смотреть разные сочетания. Есть возможность выбрать от 1 до 5 цветов, скачивать в FHD, копировать CSS-код и рандомно менять цвета всего градиента или по отдельности.
Наборы палитр
Потом я добавил на сайт ещё один раздел — цветовые схемы. Загрузил картинки в разных стилях, с разными палитрами. Эти палитры можно использовать для оформления сайтов, графического дизайна или даже дизайна интерьеров.
Схемы можно отфильтровать по цветам и скопировать HEX-код каждого цвета палитры. На подробной странице схемы цвета применяются к небольшому web-шаблону: блоки, кнопки и другие элементы раскрашиваются под выбранную палитру.
Генератор палитры по фото
Ещё можно загрузить любую картинку или фотографию и определить палитру на ней. Изображение разбивается на 10 основных цветов. Есть подробные блоки с яркими, приглушенными, темными, светлыми и противоположными цветами. У всех цветов можно скопировать HEX-код.
Проект переведен на английский и частично на китайский язык.
Буду рад критике и идеям, может что-то вышло неудобно и непонятно.
Реакция на курсор
Дизайн контактных форм: поля ввода
С нуля до Frontend-разработчика. Начало
Всем привет,
произошел небольшой казус в прошлом посте (не знал всех правил редактирования постов, извиняйте), поэтому решил написать новый пост.
Как говорил ранее, все кто начинают обучение в веб-разработке сталкиваются с огромным количеством информации в сети и отсутствием практических навыков. Я не стал исключением.
Даже имея RoadMap и обучающие курсы, происходит так, что мы учим сухую теорию и когда дело доходит до собственного проекта, руки и голова забывает как писать код.
Пересмотрев уйму информации в интернете, а также повторяя код за лектором, решил остановиться и начать свой путь заново, почти с нуля.
Сейчас хотел бы посоветовать небольшой план для людей, которые только начинают свой путь в веб-разработку:
1) Думаю, самый народный способ изучить основы HTML и CSS это воспользоваться бесплатными курсами от HTML Academy.
Затем эти знания можно закрепить пройдя бесплатные задания на FreeCodeCamp. (Basic)
2) Советую скачать бесплатно курс, который писал здесь (п. 2)
!Либо можете найти ссылку на скачивание zip-файла в комментариях в этом посте!
Посмотрев первый модуль, вы уже отточите свои базовые знания + будет настроено пространство.
3) После этого сразу советую изучить препроцессор CSS (хотя его и ставят в середину обучения, считаю его надо учить сразу после основ). Про них можно узнать в модуле 2 - 025 из того курса, либо из любого другого видео на YouTube.
4) Изучаем основы Git/Github. Из курса Модуль 3 - 041, либо на YouTube. В начале необходимо уметь только пушать проекты в репозиторий. имхо)
+ также многие советуют выделять время на прочтение книг и изучения англа. Но я считаю, что лучше получать информацию с помощью интерактивных ресурсов (видео), а также стараться не распыляться на другие темы.
Сложно описать сколько времени у вас займет на обучение данного материала, но в среднем можно предположить 2/3 недели.
После этого можно уже с головой углубляться в верстку.
Мой план обучения на ближайшее время:
1) Практикуем верстку с помощью Bootstrap Grid (ее многие недолюбливают, но я хотел бы закрепить эти знания);
2) Продвинутая верстка с Flexbox без интерактива;
3) Стараемся настолько набить руку, чтобы могли сверстать почти любой проект без интерактива;
4) Основы JS;
5) Поверхностное изучения JQuery и добавления интерактива на сайты.
6) Продвинутый JS;
7) React.js
8) Создаем портфолио;
8) Стараемся устроиться на работу джуном.
План на следующую неделю:
1) Доделать проект из курса (модуль 2);
2) Найти и сверстать самостоятельно пару лендингов с помощью сетки + делать их "резиновыми".
Повторюсь, что постараюсь вести этот блог и создавать новые посты пока что каждую неделю, для структурирования знаний, получения фидбека, и возможно кому-то этот путь пригодиться)
Все получилось сумбурно, я еще дилетант в этом деле, так что рад любой критике и пожеланиям :)
Какой инструмент выбрать для обучения? Если вы задаётесь этим вопросом, тогда эта статья станет настоящей находкой. Мы разберёмся в ключевых аспектах Sketch, Figma, Adobe XD, проведём сравнение и выясним, какой инструмент стоит выбрать именно вам.
Сегодня рынок перенасыщен инструментами создания UI-дизайна. Многие компании последовали примеру Sketch с его гибким, простым и эффективным инструментом для создания дизайна пользовательского интерфейса чтобы занять часть рынка инструментов проектирования. Основываясь на исследовании инструментов дизайна 2019 года, проведённом UXtools.co, Sketch лидировал в прошлом году, в то время как сегодня немало инструментов (Figma, Adobe XD) навёрстывают упущенное.
Самые популярные инструменты по результатам опроса за 2019 год:
Самые популярные инструменты по результатам опроса за 2018 год:
Основываясь на наблюдениях за ростом этих инструментов, собственном опыте их использования, а также на опыте других дизайнеров, я полагаю, что в ближайшие год или два Sketch, Figma и Adobe XD, скорее всего, выстрелят с новой силой.
Начнём с ключевого требования каждого инструмента – операционной системы. Многие не знают, что Sketch – это программа для систем Macintosh. Поэтому, если вы работаете на машине с Windows или Linux, вы ограничены Figma или Adobe XD.
Ещё один ключевой (и часто решающий) фактор для большинства пользователей. Ниже находится сводка о ценообразовании персонального пакета каждой программы:
- Sketch: $99, разовый платёж. Одно бесплатное обновление в год. При желании пользования новыми функциями придётся заплатить $79 за каждый год;
- Figma: Лимит в 3 бесплатных проекта, неограниченным количеством файлов и 2 редакторами;
- Adobe XD: бесплатно с неограниченным количеством проектов/файлов и без ограничения шеринга до октября 2020 года. С октября появляется ограничение на 1 общий проект и 2 редактора.
Значительное количество времени проектирования тратится на управление макетом. Выбор инструмента с хорошо продуманным редактором имеет решающее значение для производительности.
В Sketch есть функция Smart layout, которая позволяет делать такие вещи как автоматическое изменение размера слоя при изменении длины/размера контента. Например, размер окна автоматически подстраивается под размер текста.
Figma предлагает аналогичный Sketch набор функций в этой области и помимо этого ещё и такие автоматические функции как переупорядочение содержимого перетаскиванием, как на гифке ниже.
У Adobe XD есть функция Content-Aware layout, которая помогает заполнить группы слоёв при изменении размера содержимого. В сравнении с функциями, применяемыми к слоям, в других инструментах, эта функция в Adobe XD является совершенно уникальной.
Возможность автоматической регулировки вертикального положения слоёв при изменении высоты содержимого позволяет значительно сэкономить время. Figma имеет небольшое преимущество в этой области.
Если вы работаете вместе с другими дизайнерами, все три инструмента предоставляют способы обмена файлами. В контексте этой статьи мы сосредоточимся на функциях, связанных с совместной работой, которые есть в программах по умолчанию, без установки всяких плагинов.
В Sketch файлы хранятся на облаке. Это позволяет делиться ими с другими пользователями и даёт возможность редактировать так же, как это работает и в других облачных сервисах. Также есть возможность прописывания версий. Исторически Sketch сочетался с другими инструментами такими как Invision или Zeplin для таких функций совместной работы как совместное использование дизайна и шеринг. Sketch развивается, чтобы предложить лучшие версии этих функций, но всё ещё чуть-чуть отстаёт от своих конкурентов в 2020 году.
Figma ворвалась в мир дизайнеров со своей возможностью совместной работы в режиме реального времени, которая позволяет нескольким людям просматривать/редактировать один и тот же файл одновременно. В последние годы это была одна из самых уникальных функций на рынке инструментов UI-дизайна. Тем не менее, она полезна только команде дизайнеров, которая фактически одновременно работает над одним и тем же проектом. Функция редактирования в реальном времени/предварительного просмотра удобна в том смысле, что любой, кто просматривает проект всегда будет видеть последние изменения и то, как это происходило. Помимо быстрой совместной работы, у Figma также есть система управления версиями, система проектирования и проверки, которая работает наравне с другими инструментами.
Adobe XD запустила собственную функцию совместного редактирования ещё в ноябре 2019 года с такими функциями как многопользовательское редактирование и контроль версий файлов. Кроме того, XD имеет те же наборы функций обмена, что и другие инструменты.
Учитывая бета-статус функций XD, Figma является лучшим выбором, особенно для дизайнеров, которые ценят сотрудничество в реальном времени.
Люди с хорошим компьютером не должны заметить значительной разницы в эффективности представленных инструментов. Проблемы с производительностью программ станут более заметными при работе с внушительным количеством артбордов/фреймов, внешними плагинами и графическими ресурсами в файле.
Я редко испытывал проблемы с производительностью при каждодневном использовании Figma. Учитывая, что она является браузерным инструментом (есть и десктопная версия, которая, скорее всего, является оболочкой веб-приложения), производительность в меньшей степени зависит от аппаратного обеспечения и в большинстве случаев работает довольно шустро. Как и в Sketch, загрузка плагинов может занять некоторое время в зависимости от содержимого и функций, что не так важно.
Что касается Adobe XD, я столкнулся с некоторыми проблемами с производительностью ещё во времена его запуска, в начале 2019 года. С тех пор все проблемы пофиксились регулярными обновлениями. Честно говоря, я не тестировал производительность XD так сильно, как другие инструменты, но находится она примерно на одном уровне со Sketch.
В категории производительности, Figma была самой надёжной в моём опыте.
Когда дело доходит до инструментов для создания прототипов, есть много чего обсудить, поскольку на рынке существует более специализированные инструменты, заточенные под это дело. Тем не менее, полезно иметь небольшое понимание возможностей прототипирования всех трёх инструментов.
Фиксированное положение в Sketch при прокрутке помогает создавать более сложные прототипы с переходом по клику.
Figma имеет почти тот же набор функций прототипирования, что и Sketch. Основное различие заключается в эффектах перехода, где у Figma есть функция Smart Animate (автоматическая анимация состояния двух фреймов). Используя её, можно создавать более сложные прототипы.
В Adobe XD есть больше возможностей в области прототипирования. В дополнение ко всем функциям Figma и Sketch Adobe XD могут предложить больше разнообразных возможностей, а именно: добавление клавиатуры, геймпада и голосовых триггеров, для более специализированного опыта.
В этом аспекте Adobe XD побеждает с чуть более широкими возможностями ввода.
Все три инструмента поставляются с собственными экосистемами плагинов.
За время своего существования Sketch обзавёлся большой библиотекой всяческих полезных плагинов для ускорения рабочего процесса или расширения функционала Sketch.
Плагины в Figma поддерживаются с августа 2019 года. С тех пор появилось большое количество плагинов, правда их не так много, как в других инструментах.
Adobe XD запустила свою экосистему плагинов в 2018 году. Возможно, она пока не на одном уровне со Sketch, но динамика развития выглядит перспективно. Среди всех трёх инструментов, у Adobe XD (на мой взгляд) приятный опыт поиска и управления плагинами.
Sketch побеждает в категории плагинов, учитывая его огромную библиотеку.
Выбирая инструмент дизайна, на который вы собираетесь потратить время для обучения, большое внимание уделяется тому, как быстро этот инструмент развивается.
Figma добавляет новые функции с такой же скоростью, что и Sketch. Стоит отметить, что Figma выпустила больше функций, посвящённых интеграции с другими инструментами, такими как Maze (для тестирования) и Framer Web (для создания прототипов). Благодаря этому Figma хорошо сотрудничает с дизайнерами или командами, которые используют дополнительные инструменты для улучшения процесса проектирования.
Темпы обновлений Adobe XD на самом деле впечатляют. Изначально он был запущен (учитывая запуск бета-версии в конце 2017 года) с проблемами, но меньше чем через два года он стал сильным соперником для других инструментов. XD не так широко интегрирован со сторонними инструментами проектирования или разработки, но он тесно связан с пакетом Adobe.
Sketch, Figma и Adobe XD – отличные инструменты для создания дизайна пользовательского интерфейса. Если вы новичок и выбираете, на какую тропу ступить – рекомендую Figma в качестве отправной точки. Если же вы ищете инструмент для проектирования, который может создавать более сложные прототипы (например, с триггерами голосового ввода), ваш выбор – Adobe XD. В конечном счёте, ваш работодатель/команда могут выбрать инструмент для вас, но хорошая новость заключается в том, что все эти три инструмента очень похожи. Это означает, что если вы изучите один инструмент, большая часть знаний пригодится при переходе на другой.
Больше интересных и актуальных статей ищите в нашем блоге и телеграм-канале.
Подскажите пожалуйста для чего тогда Adobe XD,если верстальщики требуют psd? Делаю давно дизайн сайтов в фотошопе,тут наткнулся на XD,мне очень понравилось. но на выходе. а так очень хорошая прога..для мобильной версии особенно..
- Вопрос задан более трёх лет назад
- 43641 просмотр
Простой 1 комментарий
Просто не все знают, что такое есть. Как-никак данная программа вышла из беты недавно, в конце прошлого года.
Рекомендую освоить Figma, которая доступна на всех платформах. Существенно облегчит задачу при разработке дизайна сайта или интерфейса (с фичами, которых нет в том же Photoshop), а верстальщик скажет спасибо, так как в вашем макете можно посмотреть сразу отступы, экспортировать изображения или посмотреть CSS-код для элемента.
вы пробовали Adobe XD?
Ostin1, пробовал, конечно, с самого первого запуска беты на Windows. Сначала использовал для прототипов, потом вернулся к Фотошопу, сейчас плотно переехал на Figma. Имхо, дизайнер должен выбирать инструменты под задачу: например, делать дизайн интерфейса в Figma, обрабатывать изображения для дизайна в Фотошопе, рисовать векторные иконки / изображения в Illustrator.
Если он использует Avocode (который работает с Adobe XD, Photoshop и Sketch), то он не скажет спасибо, т.к. avocode интегрируется с VS Code, имеет поддержку переменных, экспорт картинок в указанную директорию, работу с препроцессорами, получение шрифтов с Google Fonts. И Figma для такого верстальщика будет в плане удобства не шаг вперед, а шаг назад.
Владимир Проскурин, насчёт Sketch тоже надо чтобы руки прямо стояли при его использовании, гдето недавно читал что 90% иконок созданных в скетче вообще не пригодны к использованию, и нуждаются в полной перерисовке их с полного нуля
В XD все ясно и понятно, нет ненужных инструментов, которые не нужны в дизайне. Этакий sketch для мультиплатформы, с возможностью делать прототипы, и показывать их заказчику на расстоянии. Сейчас не знаю, но в будещем должны появляется конвертеры из .psd в .xd Рекомендую использовать именно adobe xd, а Photoshop так, чтобы обрезать картинку или что-нибудь такое ;D.
1. В России и в остальном мире - разное отношение к дизайну. Т.е. очень часто может быть что на компьютере верстальщика даже нет фотошопа :) Причина - цена лицензии.
2. Очень разные стили, мир идет к mobile-first, responsive и тд дизайну. В этом случае - фотошоп еще меньше нужен, а нужен инструмент, в котором ты сможешь подготовить макет, как дизайн выглядит в разных разрешениях.
3. задача Adobe XD немного другая чем Фотошопа. В фотошопе ты редактируешь картинку, и показываешь картинку. В XD ты можешь сделать полностью работающий (упрощённый) макет, чтобы проверить его в на разных разрешениях, устройствах и тд. Это дает возможность быстро прототипировать и проверять, насколько удобно будет пользоваться приложением, например на мобильных телефонах.
4. Adobe XD - не только веб, но и например телефоны, планшеты и тд. Т.е. можно проверять удобство работы например приложения на телефоне.
ProFM, В Финляндии и многих других странах - очень сильно "ругают" если у фирмы стоит нелецензионное ПО :)
и не всегда выгодно покупать фотошоп - многие верстальщики им не умеют пользоваться, ибо нет опыта.
Oleg, Ну для фирмы то ясное дело, я имел виду в частном пользовании, домашнем))) А по поводу не умения, так уроков куча разных, там научиться то дело плевое)
В таком случае о лицензии. чтоб просто нарезать на составляющие и взять текст - совершенно диким абсурдом является покупка для этого лицензии, не важно сколько верстальщик зарабатывает. Это просто тупо. Вот и альтернатива - пиратки, и это более правильно. А коли разрабы негодуют, так пусть сделают лёгкую версию именно для верстальщиков, где самым важным - разделить все элементы, взять стили, без надобности устанавливать HAT css всякие )))
Читайте также: