New and returning users may sign in

We're glad you're here

Please sign in to leave feedback

Signed in as (Sign out)
Close
Close
← Adobe XD: Feature Requests

Request details

Feedback

Adobe XD: Feature Requests: 10: Developer Handoff

Categories

  • CATEGORIES
  • All ideas
  • My feedback
  • 01 : Design mode 1352 ideas
  • 02 : Prototype mode 368 ideas
  • 03: Share mode 47 ideas
  • 04 : Sharing on the web 212 ideas
  • 05 : Asset exporting 157 ideas
  • 06 : Extensibility 37 ideas
  • 07 : Integration with other tools 120 ideas
  • 08 : Mobile (iOS) 24 ideas
  • 09 : Mobile (Android) 18 ideas
  • 10: Developer Handoff 137 ideas
  • 11: Plugins 134 ideas
  • Other 102 ideas

(thinking…)
  • Searching…

    No results.

    Clear search results
    • Adobe XD: Feature Requests 2,835 ideas

Component documentation and description

This is mainly for designers that also know how to code, who works with or is trying to build a design system based on modern frontend frameworks such as material design, vue+quasar, etc. Or for designers who follows design systems that already have documentations that they can refer to.

The idea is to give the designers ability to add description to a component, and to be able to add links so that the devs can know exactly which component from the documentation the design is based from, or at least which component will help achieve the best results.

Attached here is an example in figma, where you can add description, and 1 documentation link when you click the master component.

Also, when a child component is clicked, it will have a button to bring the selection to the master component. I think it would be better if we just display the description and links for child components as well so they don't have to view the master component.

Second screenshot (input box) is for design mode
First screenshot is for preview mode

  •  
    Screenshot 2021-07-20 184645.png 3 KB
  •  
    Screenshot 2021-07-20 184444.png 4 KB
3 votes

We're glad you're here

Please sign in to leave feedback

Signed in as (Sign out)
Close
Close

We’ll send you updates on this idea

Anonymous shared this idea  ·  Jul 20, 2021  ·  Flag idea as inappropriate…  ·  Delete…  ·  Admin →

How important is this to you?

We're glad you're here

Please sign in to leave feedback

Signed in as (Sign out)
Close
Close
AdminElaine (Adobe) (Product Manager, Adobe) responded  ·  Aug 2, 2021

Thanks for your clarification! I’ll leave this open with your comments.

Show previous admin responses (1)
feature-needs-more-info  ·  AdminElaine (Adobe) (Product Manager, Adobe) responded  ·  Jul 29, 2021

I’m wondering if something like the VSCode extension would work for your needs. Is what you’re suggesting along this line, or are you looking for something different? https://www.adobe.com/products/xd/learn/design-systems/cloud-libraries/vscode-extension.html

Tweet
  • Remove
Attach a File

We're glad you're here

Please sign in to leave feedback

Signed in as (Sign out)
Close
Close
Submitting...
An error occurred while saving the comment
  • Anonymous commented  ·  July 31, 2021 2:14 AM  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    First, this VSCode extension seems to be a lot more complicated than it needs to be. We just need to add 2 textboxes for the components, 1 for links, and 1 for description.

    To give a more specific example, we use VueJS along with Quasar Framework. Then, I design a component based on the component inside the Quasar Framework. For example, this stepper component: https://quasar.dev/vue-components/stepper

    So there's 2 things that can happen after the dev handoff.
    1. The dev already knows what component to use and the implementation went smoothly.
    2. The dev doesn't know that this is already a component in quasar, and so the designer would need to let the devs know which component is the design based on, and what properties would be needed to set in order to achieve the desired design. As the project gets bigger, this process will be unproductive and repetitive.

    To solve this, the designer should be able to give a link to the component's documentation, give notes, descriptions, or any instruction that will point the devs to the right direction. This way, the designer would only need to specify the documentation in the components library or the master file of the components, then everytime the designer uses that component, it will have the documentation already attached.

    So for the stepper example
    1. I would like to give the component a link which is: "https://quasar.dev/vue-components/stepper"
    2. I used the stepper's vertical layout, dark mode, and flat properties, so to help the devs, I want to give instructions saying something like: "vertical=true, dark=true, flat=true"

    Also, not every developer uses VSCode. In my case, most of them use IntelliJ.

    Last, this should be a very simple addition to components that will have a bigger impact for the development handoff, compared to the VSCode plugin, which relies mostly on VSCode and the developer's understanding of design system packages. Adding 2 textboxes for a link and a description would cover more cases where different teams of developers are using different frontend frameworks, while using the IDE of their choice.

    Submitting...

Adobe XD Feedback : Feature Requests & Bugs · UserVoice Terms of Service & Privacy Policy · Adobe Terms of Use · Adobe Privacy Policy