This idea has been merged into another idea. To comment or vote on this idea, please visit DESIGNER-I-18 Annotations.
Many of us at larger companies have to hand these prototypes over to engineering teams to rebuild in production code. While Webflow is great at creating very robust prototypes there is currently no integrated way to add UX documentation to callout things that aren't represented in the prototype such as where data is pulled from or a different intention of a component. UXPin does this very well (https://www.uxpin.com/products/documentation-developer-handoff). It would be great to see a feature like this built into Webflow as it would make it a more complete package.
Evan Daugherty
.svg){kind=logo}
> If you merge the two, do the votes also get merged? Do you even merge wishlist ideas?
Yep that's what I'm gonna do. It automatically merges the votes.
Attachments Open full size
Perhaps ;) Kidding, yes that is basically the same thing. I guess I'm just using more specific industry terms than that submission. I also wanted to provide a little more insight and description into it's use case. If you merge the two, do the votes also get merged? Do you even merge wishlist ideas? I can't tell if that's a thing.
Attachments Open full size
Sounds like Annotations (https://wishlist.webflow.com/ideas/DESIGNER-I-18) will work for your use case Evan.
Attachments Open full size
@Sergie, in regards to UX documentation, we've been experimenting with ways to duplicate a page or component to a documentation-specific page whereby we add visual callouts to certain parts that explain something about the component that may not be readily apparent in the prototype. Things such as best practices, no-nos, where engineering is to pull data from, etc. In a typical UX workflow one might add this type of spec on top of their flat page comps but in Webflow we actually have to house them within divs and give them styling and relative positioning, both of which muddy up the code and are difficult to maintain.
What would be ideal is a way to simply drag-and-drop or place ux callouts on top of the page but where they don't interfere with the page code itself.
In less words, pretty much this:
https://www.uxpin.com/community/tutorials/free-flow-documentation-value/
Attachments Open full size
Regarding redlines - the code is not always a good representation. Sometimes I have issues with how things look where I add negative margins to make things line up the wya I need so I'm pretty sure that would be horrible code to copy.
Something I like to use for redlines, but wish it was more robust is a chrome extension called Prism Redline Tool:
https://chrome.google.com/webstore/detail/prism-redline-tool/hkbhjllliedcceblibllaodamehmbfgm?hl=en-US
Along with ways to add notes that can be turned on and off, I feel this kind of tool would be a great asset as well.
Attachments Open full size
Can you help me understand what type of documentation you need? Not sure if red-lines makes sense since they can see or copy/paste the code.
Attachments Open full size