Skip to content
← Adobe XD: Feature Requests (Read-Only)

Request details

Adobe XD: Feature Requests (Read-Only): 10: Developer Handoff

Categories

(thinking…)

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

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  ·   ·  Report…  ·  Admin →

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  ·   ·  Report

    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.