XD – App интеграция

В една от предходните статии разгледахме част от плъгините за XD. В тази обаче ще говорим за интеграция между XD и дадени приложения. Следва да разгледаме накратко Avocode, Kite App, Slack и Zeplin.

От тук можете да видите всички приложения, с които XD е свързано.


Интеграция с Avocode

Добавянето на дизайни в Avocode може да бъде не само от XD, но и от други програми на Adobe – Photoshop, Illustrator. Също така можете да добавяте картинки (в .jpeg и .png формат). За съжаление не приема векторни (.svg) изображения. Освен това имате възможност да импортвате файлове от sketch и figma. Но нека сега се съсредоточим върху XD конкретно. Можете да направите това като:

  • отворите менюто в XD (след като сте отворили съответния проект) > изберете “Export” и от там изберете “Avocode”:
  • след това ще ви се отвори и самата програма:
welcome screen in Avocode
  • след като достъпите своят акаунт > ще ви се появи прозорче, от където да изберете дали да добавите към вече съществуващ проект или да създадете нов:
избор на проект

Avocode можете да достъпите или чрез Desktop приложението или през уеб. Не е проблем да сте отворили и на двете места – всичко се синхронизира автоматично.

От тук можете да видите повече за самото конвертиране от различните програми към Avocode.


Интеграция с Kite App

В XD създавате дизайни, но с помощта на Kite App можете да ги направите „по-живи“. Създавате анимации, action бутони, добавяте слоеве. След което можете да експортвате във формати .mov и .gif. Съдържа вградени темплейти и примери, които можете да използвате докато осъществявате своте идеи. Има и „помощни съвети“ (help tips) ако се затрудните. Аз самата ги ползвам често понеже от скоро тествам самия app (макар да го има отдавна).

Има вграден „Animation Curve Editor“, с помощта на който можете да редактирате:

  • времето, за което искате да стартира анимацията
  • скорост и общата продължителност
  • колко пъти и за какво време да се повтаря
  • има опция да обърнете посоката на анимацията (autoreverse at end)

Има и „инспектор“, който освен че ви дава възможност да погледнете начина, по който е направена дадена анимация, ви позволява и директно да редактирате от там – цветове, криви, image филтри и т.н.

Пълната документация за това можете да видите от тук. Видео уроци от тук. А новости от последните версии на програмата от тук.


Интеграция със Slack

Благодарение на интеграцията със Slack споделянето на файлове, снимки, preview на artboard-ове и обсъждането на детайлите по проект е много по-лесно. Така че ако използвате ACC > оптимизирайте процеса като си добавите Slack. Тук са и няколко причини защо да направите това:

  • в момента, в който създадете публична връзка > копирате линка и го пускате в създадения канал към проекта. Така всеки участник ще може да го получи на момента.
  • получавате feedback много по-лесно, който е достъпен и за останалите, ако искат да добавят нещо
  • получавате известия когато някой от другите участници отговори на коментар в прототипа
  • ако пък вие имате задачки, които искате да пуснете на другите от екипа относно проекта – също можете да го направите чрез Slack

Ако искате да разгледате повече можете да видите видеото тук.


Интеграция със Zeplin

Също толкова лесно става интегрирането. Само се уверете, че използвате последна версия на програмите. Подобно на Avocode, от подменюто “Export” ще го намерите (стига да имате инсталирана десктоп app-a). След като кликнете на “Zeplin”, ще ви се отвори и самата програма. От там аналогично ще ви попита “към кой проект искате да добавите дизайна”. Изберете съответно към кой и експортнете.

Самите дизайни ще се качат “layered”, т.е. няма нужда да се притеснявате за това. Освен дизайните, автоматично ще се качат и спецификациите и “code” снипетите, необходими на програмистите.

Нагледно в няколко стъпки:

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *