Project Name
Tools for rapid prototyping and wireframing with the Salesforce Lightning Design System and Base Lightning Components as the visual and functional library.
Project Team
Help us give you the thanks you deserve! Please ensure that all contributing members of the team are included!
- Team Leader(s):Rich Nevin
- GitHub Scribe(s): Melissa Hansen, Rich Nevin
- List of all Contributors: Greg Sampson, Melissa Hansen, Rich Nevin
Project Vision
- If we could use the Lightning Design System & Base Lightning Components for wireframing and mocking up prototypes, we could:
- Improve time-to-market: while prototyping will shorten the app / solution development lifecycle and eliminate rework, prototyping with the same interactive library you’re going to build with will save more time and reduce surprises for stakeholders
- Lower cost: The Salesforce UX team has made an incredible design system - there is often no need to reinvent the wheel with expensive design resources
- Achieve consistent user experience for constituents and users interacting with your solution / program / brand
- Ideally: the prototype library would automatically update as the actual Lightning UI library updates
- NOTE: when building with Lightning Components, simple CSS can create differentiated and unique visual experiences. It is not expected to have this design layer at the prototyping step, just the components is enough.
Intended Users
We think these tools would be of the most value/interest for UI/UX Designers, Product Owners and Developers accross all verticals.
Project Resources
-
In the end, it was access to Salesforce Product Managers at the sprint that unlocked the solution. After some basic research, a few platforms tested and a few clues from the interweb, Art Ordoqui connected us to Steven Shyu, a designer at Salesforce, who showed us a solution set for exactly this problem. Many thanks to both of them!
-
Wiki within this repository contains working notes on additional products, links and findings.
Project Team Accomplishments
SOLUTION SETS (to be chosen based on needs / complexity):
Create simple HTML page mockup:
- Install and subscribe to the Salesforce UX team’s Design System Starter Kit:
- CAVEAT: requires basic markup skills
- NOTE: could not actually demo this due to conflicts in our environment
Base level design solution for single page wireframes / mockups:
- Purchase Sketch (1 license minimum); $99 / yr
- Install and subscribe to the Salesforce ui kit: https://github.com/salesforce-ux/design-system-ui-kit/
- CAVEAT: limited to MAC USERS ONLY!!
- Note: watch this space for improved component searching:
Advanced level solution to ALSO test interactivity (and more):
- Uses InvisionApp and the Craft plugin in conjunction with the base level Sketch solution to make interactive mockups:
- https://www.invisionapp.com/ (first prototype free, $15/mo for 3 prototype; $99 / mo unlimited)
- “Craft” plugin for publishing Sketch mockups to InvisionApp (FREE)
- CAVEAT: limited to MAC USERS ONLY (Sketch limited)!!
You’re Probably Not a Non-Profit Level
- Leverage the Invisionapp design system manager for cross team collaboration and consistency
- https://www.invisionapp.com/design-system-manager/