Highlighted

Help with adding different components together on XD

Community Beginner ,
Jun 13, 2019

Copy link to clipboard

Copied

Hey all,

I recently started a new project on XD after quite some time and it's very obvious to me that a lot has changed since I last used it. Furthermore, I am trying to adding an object to a component. I read the article on how to work with components in XD (http://helpx.adobe.com/xd/help/components.html) and found the section for adding elements onto a master component would be useful to me in my case. However, I tried to apply the tips that were mentioned in that section but was not able to add the Menu Arrow onto the Navbar Links component. I have posted a few screenshots below to provide more context and detail in order to better illustrate my issue.

Navbar Component.JPG

Menu Arrow.JPG

XD Component Canvas.JPG

Going back to the article I posted the link to, there was a section towards the end of the article that discussed limitations with the latest update of XD and how to work around them. This part, in particular, caught my attention but I wasn't quite sure what it meant:

Working with Components on XD.JPG

I would appreciate if you guys could help me out and point out what I'm missing here or if there is any way for me at all to add the Menu Arrow onto the Navbar Links component. It looks like something that could be done on XD and I hope I'm able to find out how to do that successfully on here. Let me know if you have any questions or if there's anything else you'd like for me to provide or clarify for you. Thanks to all who responded. I appreciate your assistance!

Best,

Abhi

Adobe Community Professional
Correct answer by kennethkawamoto2 | Adobe Community Professional

You can turn the group into component - if you do that it will appear under the assets panel

Views

197

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Help with adding different components together on XD

Community Beginner ,
Jun 13, 2019

Copy link to clipboard

Copied

Hey all,

I recently started a new project on XD after quite some time and it's very obvious to me that a lot has changed since I last used it. Furthermore, I am trying to adding an object to a component. I read the article on how to work with components in XD (http://helpx.adobe.com/xd/help/components.html) and found the section for adding elements onto a master component would be useful to me in my case. However, I tried to apply the tips that were mentioned in that section but was not able to add the Menu Arrow onto the Navbar Links component. I have posted a few screenshots below to provide more context and detail in order to better illustrate my issue.

Navbar Component.JPG

Menu Arrow.JPG

XD Component Canvas.JPG

Going back to the article I posted the link to, there was a section towards the end of the article that discussed limitations with the latest update of XD and how to work around them. This part, in particular, caught my attention but I wasn't quite sure what it meant:

Working with Components on XD.JPG

I would appreciate if you guys could help me out and point out what I'm missing here or if there is any way for me at all to add the Menu Arrow onto the Navbar Links component. It looks like something that could be done on XD and I hope I'm able to find out how to do that successfully on here. Let me know if you have any questions or if there's anything else you'd like for me to provide or clarify for you. Thanks to all who responded. I appreciate your assistance!

Best,

Abhi

Adobe Community Professional
Correct answer by kennethkawamoto2 | Adobe Community Professional

You can turn the group into component - if you do that it will appear under the assets panel

Views

198

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Jun 14, 2019

Copy link to clipboard

Copied

I believe XD product team is working on it to fix this issue. In the meantime, you can group the menu and the arrow to create a new component (not sure if this may not work for you...)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Community Beginner ,
Jun 14, 2019

Copy link to clipboard

Copied

Hi Kenneth,

Thanks for your response. I appreciate your help. Can you please explain how you would go about grouping the arrow and navbar links together to create a single component? I previously tried to do that by selecting all of those items at once to make a component but to no avail. Afterwards, I tried to go about combining them to form one component as detailed in my original post, but made little progress with that.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Community Beginner ,
Jun 14, 2019

Copy link to clipboard

Copied

I think I may have figured it out. What I did was go to the layers panel and held the Ctrl button to select both the menu arrow and navbar links. Once I did that, I was able to make a single group with those components. The only problem I'm facing now is that when I go back to my Assets panel, it still shows the navbar links and down arrow as two separate panels. But when I go to my Layers panel, it correctly displays it as a single component with the name of Navbar. I've added a couple of snips below for context. Let me know if you there's anything you'd like me to clarify. Thanks again for your assistance!

Navbar.JPG

Assets Panel.JPG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Jun 15, 2019

Copy link to clipboard

Copied

If you combine Component A and Component B to create Component C, you will have all three components listed in the Assets panel - is this what you are referring to?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Community Beginner ,
Jun 15, 2019

Copy link to clipboard

Copied

Hi Kenneth. Sorry for not clarifying. What I was referring to was the discrepancy between what's displayed in the Assets panel and what's displayed in the layers panel. In the layers panel, I was able to successfully group the navbar links and the down arrow to form a single component, the Navbar. As a result, I am able to see just the Navbar component on the layers panel. But when I go to the Assets panel, I don't see navbar component. Instead, I see separate components for the navbar links and the down arrow, even though I'm able to select the both components at once just like in the layers panel. I've posted images the images below for additional detail.

While this hasn't affected any subsequent work I've done on this file, I would like to know if there's any way I can see the navbar component on the assets panel as well. I was thinking that if I'm able to see navbar component on the layers panel, I should also be able to see it on the assets panel. But apparently that's not the case. Let me know if you have any questions. Thanks for helping out!

Navbar.JPG

Assets Panel.JPG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Jun 17, 2019

Copy link to clipboard

Copied

Your "Navbar" is a group, not a component?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Community Beginner ,
Jun 17, 2019

Copy link to clipboard

Copied

I see. Thanks for the clarification. If that's the case, is there any way I can create groups in the Assets panel or is that something I can only do in the Layers panel?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Jun 17, 2019

Copy link to clipboard

Copied

You can turn the group into component - if you do that it will appear under the assets panel

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Community Beginner ,
Jun 17, 2019

Copy link to clipboard

Copied

Got it. Thanks for your help, Kenneth. I really appreciate your assistance. As somebody trying to re-learn how to use XD, I found your responses to my questions quite insightful.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Employee ,
Jun 14, 2019

Copy link to clipboard

Copied

Hi Abhinav,

Thank you for reaching out. I looked for similar information and found this <Cannot add layers to existing Component > post that I think has the answer to your question. please check this out, and let us know if you need more assistance.

Thanks,

Harshika

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Community Beginner ,
Jun 14, 2019

Copy link to clipboard

Copied

Hi Harshka,

Thanks for your response. I appreciate your help and the link to that post you mentioned. I looked at it and helped me figure out a way to group the navbar links and down arrow together to form a single group. Instead of manually adding layers onto selected components in the Layers panel, what I did was hold down the Ctrl button to select the two items I wanted to group together and, from there, I was able to create my group. However, as mentioned in my response to Kenneth, there seems to be an inconsistency with how this newly formed group is displayed on different panels. When I go to my Assets panel, it still shows the down arrow and navbar links as two separate components. But when I go to my layers panel, it correctly shows one group with a singular name. I've provided a couple of snips below for visual detail. Let me know if you have any questions or if there's anything you'd like me to clarify. Thanks again for your assistance!

Navbar.JPG

Assets Panel.JPG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...