Skip to main content
j.khakase
Inspiring
January 23, 2020
解決済み

[Design]-How to design accordion component with single artboard in XD?

  • January 23, 2020
  • 返信数 4.
  • 29528 ビュー

Hello,

 

How can we design accordion component as shown below. with single artboard

https://www.w3schools.com/howto/howto_js_accordion.asp

 

any tutorial please

 

<The Title was renamed by moderator>

解決に役立った回答 tobiglaus

Great solution !

Now how to prevent it from jumping up and down ?

Add something like a ghost item to constraint the size ?


You can do that pretty easily (without a ghost element): 

Select all elements/groups within the component (not the component itself) and move it up to the same Y-position as the opened state.

The accordion should now be top-aligned. 

 

The trick I'm using here is that you can reposition the whole component by moving the inner elements, without affecting the other states.

返信数 4

Participant
June 28, 2021

Hi,
You can design by using adobe photoshop. I have created all design-related stuff for my website by using this tool. My website name is advertising agency nyc

You can check my website

Participant
June 10, 2020

Thank you so much for the share. This is excellent.

Peter Villevoye
Community Expert
Community Expert
January 24, 2020

[EDIT June 2020] It's indeed very well possible !

See the other answer in this thread with sample file.

 

- - - - 

 

You can't, at least not within one screen.

With the new Component States you might be able to mimic the appearance of one single menu opening and closing, but you can't prepare it to work for all menus, and let the previewing user just choose any arbitrary menu to open or close.

 

Eventually, an accordeon will typically be able to work technically well within one single web page or app screen. But that's not how Adobe XD works, nor what you're goal should be in the design stage. You're showcasing a predefined flow, designed by using an artboard for each step in the process.

 

So these artboards represent each interaction, even within a single page or screen. E.g. you could mimic how a user opens menu C of the accordeon first, then A and finally B, and subsequently picks submenu B2, ending up in another screen. This flow of interactions would require 5 artboards...

 

You're creating a design, a mock-up at best, not the whole blueprint for the development.

HARSHIKA_VERMA
Community Manager
Community Manager
January 23, 2020

Hi there,

 

Thank you for reaching out. You may check out this tutorial here:https://www.youtube.com/watch?v=g2QJfHcqyLU&list=PLx5PTsBocuvSbsF37JOENREPbVvyPwsqF and let us know if that helps.

 

We would also suggest checking this request: https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/34693864-collapsible-sections-vertical-accordion and add your vote if you find it useful.

 

Thanks,

Harshika

j.khakase
j.khakase作成者
Inspiring
January 24, 2020

Hi Harshika,

 

Thank you for the reply.

I was seen these tutorial before post my query. the issue is still remain. I want to create it with/within Single Artobard. to save time on creating prototype and update them later.

 

Spas K.
Community Expert
Community Expert
June 19, 2020

Hi,

Thank you for your response.

Unfortunately, it doesn't work this way either..

I uploaded the menu in drive, maybe you can see something that I am missing?

Thank you so much! 

https://drive.google.com/file/d/1KWOtQFyqpsIKhjlWd-cJ7JgBKZCFQOhv/view?usp=sharing


I already replied to you on the thread you posted, the problem is you can switch states of the wrapping component only if the trigger is attached to a group. You're trying to put it on another component, and it only shows the states of that inner component. Put your "Cards data" component in a group, and attach the action to that instead.