Canvas Medical Design System

At Canvas Medical we are committed to creating deep partnerships with the teams innovating healthcare. To continue delivering on this commitment, we’re making our design system available for developer teams.

Benefits

  • Accelerates the development of design deliverables and assets
  • Drives consistency and set constraints in the feasibility of UI components
  • Increases performance by driving towards a programmatically generated UI

What's Included

  1. Inputs (Text fields, dropdown, search, checkboxes, radios, pills, etc. in their different states)
  2. Buttons (Primary, secondary, destructructive, dropdown and icon buttons in different states and sizes)
  3. Popup (Variations on how to easily create screen overlays with all its components)
  4. Commands (Set of components to design Canvas Medical commands) 
  5. Icons (Collection of all icons used in the Canvas Medical app and few additional ones)
  6. Badges (Customizable badges and alerts)
  7. Tooltips (Easy to set variations on tooltips)
  8. Navigation (navigation and structural components)
  9. Utilities (Miscellaneous components)

Installation Instructions

Sketch

The Canvas Medical Design System works like any other library you have already installed, see below the sequence of steps.

For Mac app users:

  1. Download the sketch library
  2. Go to Sketch / Preferences. A window will open
  3. Go to the “Library” tab
  4. Click on the “Add library” button at the bottom left corner of the window 
  5. Browse to where you have saved the “Canvas Medical Design System” file
  6. The library will be added to Sketch

The Canvas Medical Design System works like any other library you have already installed, see below the sequence of steps.

From the web app:

  1. Download the sketch library
  2. Go to the bottom-right side of the document’s sidebar and click Add Library to Sketch. A window will open
  3. Go to the “Library” tab
  4. Click on the “Add library” button at the bottom left corner of the window 
  5. Browse to where you have saved the “Canvas Medical Design System” file
  6. The library will be added to Sketch

More on managing extensions in Sketch see link below:
https://www.sketch.com/docs/designing/libraries/adding-a-library/