Draft

The City of Toronto Web Design System is available as an Adobe XD library. The library can be added to your projects for access to the Design System’s colour palettes, typography, components and full page templates. The full page templates for Desktop and Mobile are a great starting point for building your prototypes.

A preview of the design system is available as a prototype. For access to the library, contact @Sara Greenwood . When you access the link you are sent, you will be prompted to add to your libraries.

Open

See more information from Adobe on working with Creative Cloud libraries.

Note that Desktop components are designed for a width of 1366, Mobile components for 414.

Library Updates

The library is a work in progress and updates are being made continuously. Components are added to the library as they are required in projects. If a component is not available, contact @Sara Greenwood to make a request.

New components will be added your library automatically.

You will be notified if there are updates available, and the components in your document assets will indicate if there is an update. You can choose to apply all updates, or select individual components to update. Depending on what stage you are in design, you may choose to not update a component to avoid unexpected changes to your prototype.

Tips & Tricks

Working with Libraries
Open	When you add a library to your project, it will appear under the Design tab. You can search across all your libraries or select a particular library.
	When working with the CoT library, elements are within Colours, Character Styles and Components. Components are further grouped.
	The search can be used to find elements across the whole library.
Updates
	If there are updates to the library available, the icon at the bottom left of the screen will indicate there are updates. You can choose to apply all updates, or if you look at your document assets you will also be able to see which elements have updates (blue icons). You can choose to update individual elements or make them a local element. Red icons indicate that an element has been removed from the library. It will remain within your project and you can choose to make it a local element. New elements will be automatically added your library.
Component States
	Some elements (particularly form elements and buttons) make use of component states. You can select each state to apply your changes. In the prototyping tab, you can then make use of these states for an interactive prototype. See Adobe’s page on working with states.