UI Authoring Foundations and UI Component Library for the Invision application family
About Invision UI
Invision UI is a UI component warehouse for created, testing, and QA'ing style and angular components for the Invision suite of applications.
For stakeholders
You can think of Invision UI as a prefabrication warehouse. It's meant to showcase and test components in isolation, while also providing the ability to quickly scaffold and test some components together. Invision UI is a 'dumb' application - it leverages mock data and minimal extra functionality to showcase component style and behavior. As such, do not expect all functionality that you would see in an Invision module to be found when looking at an individual Invision UI component. Like any prefabrication facility, you may see some "wires" and "innards", but each example within the UI guide is meant to showcase some piece of style, state, or behavior.
UI Guide Areas
Some sections of prefabrication are pretty low level, and you may not find those sections interesting or useful. However two sections are meant to present UI for stakeholder consumption and feedback:
UI Component Library
Components are individual UI components for the web. Some components are very simple markup and style. Others are more complex, with behavior and expected inputs and outputs for the Invision module.
For stakeholders, a component is meant to showcase different stylistic or behavioral states (think disabled, active, etc.) for a given UI component in a single spot. Consider how one might view a disabled state on a button within an application - you may have to take many steps to get to that state. Instead, we can build that same button in our prefabrication warehouse, where each state is directly exposed and looked at next to all of the other states a component can take on when used within Invision.
Showcase
Showcases allows us to bring together different components within a "theme" area of the application so that we can prototype how components will look when holistically integrated.
Theme areas in our app (sometimes call swatches) are things like the top navigation, side navigation, modals, and main content area. Each of these areas has their own specific suite of background and foreground colors. Scaffolding gives us a testing playground where we can bring together those different components in a single themed area to ensure a consistent and sharp experience.
For developers
For an authoring guide, please consult the Getting Started section of the guide.