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
Anonymous
shared this idea
Thanks for your clarification! I’ll leave this open with your comments.
1 comment
-
Anonymous
commented
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.