Known Participant

Question

UX/UI Redesign / Which Programs (XD, AE and / or Illustrator)?

Forum|Forum|2 years ago
May 30, 2023
3 replies
2827 views

Hey everyone,

I am opening this thread because I need some help to figure out what programs I should be using for a small UX/UI redesign project I am working on.

I am posting in the Adobe XD section because I know for sure that the desired outcome is an interactive interface that changes "scene" after the press of a button / a certain action happening - therefore I know the final "assembly" should take place in Adobe XD, but the main problem is that I have never used this app, which makes harder to me to figure out what's possible in here or not.

I will try to provide an example of a scene that I want to achieve (peraphs, the "most complicated" one) to get you an idea of what tools I may be needing:

Output Device: Android Tablet (2560x1600 px)

Scene 1

Animated gradient background

Animated text

Call to action button (static)

Other static elements: logos, pictures, static text

Action: Button Press

Effects:
1. Feedback sound is played

2. Scene 1 transitions to Scene 2

Scene 2
Progress bar runs automatically (duration 6 seconds)

Other animated elements

Other static elements

Scene 3

Appears when the Scene 2 has been displayed for 6 seconds

Other elements are shown in Scene 3

Now, my question is: how can I achieve all of that?

I know that a combination of Illustrator and Adobe XD is usually the way to go for most of the elements, but I am a bit unsure if After Effects is also required.

Considering that I am not looking to achieve an extremely fancy and polished result, I am wondering if After Effects can be completely skipped in the process.

Also, how to maximize the quality of it? I would be prefer working with vectors only and not with rasterized elements (i.e. videos exported from AE).

Thank you very much in advance.

This topic has been closed for replies.

BacchinifAuthor

Known Participant

Hi @Spas K. , @AkinGn I won't open a new thread but I am trying to figure out if it's possible to run something with Auto-Animate (created in XD) and at the same time a Lottie file on loop for the duration I want.
As you can see from the attached video, I managed to let the bar loading (it's a draft), but the Lottie works only at the beginning and at the end although its duration is shorter than my circle animation. Is there a way to let the Lottie keep running also in between my circle animation is complete?

2023-06-04_Screenshot_Bacchinif_20-07-04.zip

AkinGn

Community Expert

Hi @Bacchinif, can't say I worked with lottie animations much but I'd first try to complete circular animation in two artboards and see how lottie behaves. Another way would be building lottie animation (maybe a simpler version) also in XD, that way you could control what and when changed in each artboard, after all auto animate checks all the elements in the artboard and animates all of them. Maybe you can also check with lottie community: https://lottiefiles.com/community?utm_medium=web&utm_source=navigation-community Hope this helps!

BacchinifAuthor

Known Participant

Thank you for you reply @AkinGn .

What I am basically asking here is if it's possible to run two animations at a time in a single artboard. This is what confusing me now.

BacchinifAuthor

Known Participant

@Spas K. , @AkinGn sorry to bother you again... but - after having tried to implement some audio effects when tapping some buttons - I have realized that they don't play on a mobile / tablet preview.

Any workaround?

Spas K.

Community Expert

Check if something isn't blocking the sound (settings on the device, auto-mute in browser, etc). Are you viewing it through a browser on the mobile device, or in the Xd app?

BacchinifAuthor

Known Participant

XD app.

How do I share and view it through the browser on my tablet?

AkinGn

Community Expert

Hi @Bacchinif, to me only "playing audio on button press and transition to scene 2" looks tough in terms of doing all in XD, as we can only assign one trigger for an action, in this case, you can either play a sound or make a transition on button press/tap. Maybe you can try playing audio on tap and making transition on drag on the same button (for demonstration purposes obviously, it doesn't sound like it'd be a proper solution for a real use case). Hope it can give you an idea to explore, feel free to update us or ask if you have any follow up questions, happy designing!

Spas K.

Community Expert

Hey, just to pitch in, there are some hacks that will allow timed transition between component states, and the sound-and-transition interaction, using video & using a combination of a "Time" trigger for the video playback and the "End of Playback" trigger for transitioning to another state / artboard.

Here I'm using a video with a click sound, which is hidden behind the button:

https://xd.adobe.com/view/201a53e4-b06b-4c09-b008-7b96421debdc-7549/

Here's the .xd file.

Using the same hack you can achieve any tickers / progress between states (using a 1 frame empty video or lottie file for just the Playback / End of Playback triggers that allow the switch).

Since we can now use video and lottie, you can use After Effects to animate anything, export .mp4 video (or Lottie) and import the animations into Xd (or Figma), and use the available triggers to control when the video plays & what happens next.

None of these will be 100% smooth like on the live product, but it's a prototype and with a lot of fiddling you can make it work.

AkinGn

Community Expert

Thank you for sharing workaround and ideas @Spas K. , exactly btw, I forgot mentioning lottie files, you can also use those and with AE & lottie integration, you can use any animation created in AE 👍

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded