Momentum Design System provides UI libraries to assist in creating Cisco Webex designs. The libraries are here to optimize our designers’ workflow as they provide the most commonly used components across Webex products. We have five libraries: one for each platform that our products are built for. Each library is constantly evolving as the functionality and needs of our applications change. The following guide will help set up the libraries to automatically update in Sketch whenever we push any updates.
Install and always stay up to date by subscribing to the Sketch Library links below.
Copy/paste the URLs below into any browser address bar
-
Icons Library:
sketch://add-library?url=https%3A%2F%2Fdownloads.momentum-ui.com%2Fui-kits%2Fmomentum-icons-sketch-rss.xml -
Web Library:
sketch://add-library?url=https%3A%2F%2Fdownloads.momentum-ui.com%2Fui-kits%2Fmomentum-ui-web-sketch-rss.xml -
MacOS Library:
sketch://add-library?url=https%3A%2F%2Fdownloads.momentum-ui.com%2Fui-kits%2Fmomentum-ui-macos-sketch-rss.xml -
Windows Library:
sketch://add-library?url=https%3A%2F%2Fdownloads.momentum-ui.com%2Fui-kits%2Fmomentum-ui-windows-sketch-rss.xml -
iOS Library:
sketch://add-library?url=https%3A%2F%2Fdownloads.momentum-ui.com%2Fui-kits%2Fmomentum-ui-ios-sketch-rss.xml -
Android Library:
sketch://add-library?url=https%3A%2F%2Fdownloads.momentum-ui.com%2Fui-kits%2Fmomentum-ui-android-sketch-rss.xml
or download and install these files manually but please note that you will not receive automatic library updates when using this method.
Download the most recent version of Sketch.
- Download the Cisco Sans fonts from the Momentum UI repository
- Install the Cisco Sans fonts on your system
The Momentum Design team has made optimizations with this Sketch Library so you can more efficiently create Cisco Webex interfaces. In the instructions below, we’ll cover the basics and some tips for you to get started.
Sketch Libraries allow you to have Momentum Design components and patterns available from Sketch’s symbols menu in any file you open. Sketch Libraries will automatically update your designs when the library is updated. Your designs will never be out of date if they’re linked to this Sketch Library document.
- Copy and paste the following links, one by one, in any browser. This will subscribe your Sketch application to automatically download and install new versions of the Momentum Design System Sketch UI Kits.
-
Icons Library:
sketch://add-library?url=https%3A%2F%2Fdownloads.momentum-ui.com%2Fui-kits%2Fmomentum-icons-sketch-rss.xml -
Web Library:
sketch://add-library?url=https%3A%2F%2Fdownloads.momentum-ui.com%2Fui-kits%2Fmomentum-ui-web-sketch-rss.xml -
MacOS Library:
sketch://add-library?url=https%3A%2F%2Fdownloads.momentum-ui.com%2Fui-kits%2Fmomentum-ui-macos-sketch-rss.xml -
Windows Library:
sketch://add-library?url=https%3A%2F%2Fdownloads.momentum-ui.com%2Fui-kits%2Fmomentum-ui-windows-sketch-rss.xml -
iOS Library:
sketch://add-library?url=https%3A%2F%2Fdownloads.momentum-ui.com%2Fui-kits%2Fmomentum-ui-ios-sketch-rss.xml -
Android Library:
sketch://add-library?url=https%3A%2F%2Fdownloads.momentum-ui.com%2Fui-kits%2Fmomentum-ui-android-sketch-rss.xml
- Your browser may ask you if you want to open Sketch. Select Open Sketch.
- Sketch will open and automatically open Preferences and take you to the Libraries tab. Your chosen library will take a moment to sync will then be completely ready to use.
- That's it! Now you can access your libraries from the Symbols icon or under the insert menu in Sketch.
Alternatively, download the Sketch Libraries in this repository you'd like to install. Open Sketch > Preferences > Libraries and click Add Library.... Select the library you'd like to install.
Verify that you've successfully installed the Sketch Libraries by opening Sketch > Preferences > Libraries. You should see all of the libraries you installed above.
-
Make sure you have the Sketch Palette plugin installed
-
Download the Momentum Design Kit (the color palette will be in this folder)
-
Clear your palette in Sketch Palettes in the Plugins dropdown Global Presets.
- Load the palette into Sketch
- Add the Sketch palette from Momentum Design Kit
- Add the colors to the Global Presets (to use it in all files)
- The color palette is now available in Sketch
The Momentum Design System team welcomes your help in maintaining the MDS Component Library. Please add any bugs or feature requests under the Issues tab of this repository.
External contributions are currently closed
Throughout a release, Momentum's design team contributes to these Sketch files through an application called Abstract. Public contributions become unmanageable to merge since they are added to a version that is out of date.
©2013-2019 Cisco Systems, Inc. and/or its affiliates. All Rights Reserved.
See LICENSE for details.