Getting started - designer guide
Setting up Sketch
Sketch is the primary tool used by the TELUS Design team to mock up designs. It’s an application tool that is only available on Mac OS and is fairly easy to pick up. Sketch offers quite a few tutorials to help you get started.
You will need Sketch set up on your computer before starting any project. Please be sure to keep your Sketch app up to date with the latest Sketch release.
For TELUS designers:
You should have been given a Sketch license during your onboarding. If not, you can download a trial version of the latest Sketch app and then contact @BrianLam1 from the Design Strategy team for a license.
For vendors or designers outside of TELUS Digital, you can purchase and download Sketch for $99/year.
There are a variety of plugins available for Sketch. Here is a short list of plugins that will be useful when setting up your Sketch file and using the Design System Manager (DSM) component library:
Craft Manager: Suite of plugins by Invision to help streamline your workflow. (Note: This is required to use the DSM Component library)
Launchpad by Anima: Customize designs with responsive settings (Note: Without this plugin, some of the responsive components will not work properly)
Paddy: Create components with fixed padding (Note: Used for automatic resizing of our button component)
Sketch Toolbox: Manage and install your Sketch plugins
Shared Text Styles: Import/export text styles within your Sketch files
Nudge Push Shove: Set up custom nudge settings
Dynamic Button: Create components with fixed padding
Setting up Invision
From design to prototyping, the TELUS Design team uses Invision suite of apps to help with our design workflow and to assist with collaboration. You can use InVision to share your prototypes and Craft Sync to sync up your designs.
During your initial onboarding to the design team, you should have gotten an invitation sent to your TELUS email to set up a TELUS Invision Enterprise account. If you haven’t please contact your design lead, or your InVision administrator (@brianlam1) to add you to the project.
TDS has two projects set up on Invision:
TDS_blocks (not yet coded): Inspirational blocks that use TDS components/symbols that can be used in your Sketch file. These blocks live in the master Sketch file as designs and some of the blocks have been coded and can be found in SiteBuilder.
TDS_components: Library of all the components that can be found in TDS.
These are both working projects that continue to get updated, and improved on as we add components and blocks to the system.
TDS component library
There are two component libraries available in TDS to help you with your designs, TDS components and TDS Blocks (as mentioned in the previous section). These libraries are part of DSM (Design Systems Manager) and is accessilble through Craft Manager. Follow the below instructions to get set up with the component libraries.
What you’ll need:
Invision DSM (Design Systems Manager): You should have access to DSM if you have access to TELUS Invision Enterprise. If not, please contact your Invision administrator (@BrianLam1) or your design lead so they can add you to DSM and Invision Enterprise.
Craft Manager is a suite of Sketch tools by Invision that helps with your workflow. Download and install the plugin before continuing to the next section.
Sync up to the DSM library
Note: We have a sneak preview of DSM as it’s in beta and not public, so the following steps must be done before using the tool.
|Once you’re back in Craft Manager go to the bottom of the window and select ‘Design System Manager in the Environment bar.|
|Install the Craft Tools for Sketch 3+|
Note: It’s important that you sign in using the ‘Enterprise sign in’ link. Otherwise you will be creating your own library on your personal account.
|Enter "telus.invisionapp.com" as the enterprise domain and hit ‘Continue’|
|Sign into your InVision account.|
|Both the TDS component and TDS block libraries (and any other libraries you belong to) should now appear in the DSM window.|
|To switch between versions, go to the TELUS Design System dropdown on the top left of the DSM window and select TELUS Design System>Switch Version.
Note: Please fix to the latest version of DSM (eg. v1.0.0) and not on the 'shared draft'.
You can use the TDS component library by dragging and dropping the assets onto your artboard. For more information or detailed instructions on how to use DSM, please visit the Invision DSM Support Centre.
TDS Component Documentation
To view the code and usage of the components please visit the TDS components documentation site.
Master Sketch file
The TDS Master Sketch file was used prior to the DSM library. If for any reason you need access to these legacy versions, you can download them from the assets > source files in the TDS project on Invision Enterprise.
Here you can also find the TDS_Grid.sketch file that may be used to kick start your project.
TELUS' primary typeface is Helvetica Neue which is available as a system font on Mac OS X 10.7 Lion and later. No other fonts are needed to use the TDS component library, or the Master Sketch file.
Currently Utility icons are available to use as components in the TELUS Design System. Decorative icon usage is currently being reviewed by the TELUS Brand team. Stay tuned for more updates. In the meantime, you can continue to use the Brand approved icons available on the TELUS BrandHub.
For nature, TELUS critters and devices images, please visit the TELUS BrandHub for a library of brand-approved images to use with your project. You will need your TELUS ID to log in or you can follow the instructions to sign up for a an account. There is an approval process to sign up for an account so make sure you allot time to it.
The brand team is working towards creating a library of lifestyle photography. Until then, use your preferred stock photography site to source lifestyle images if your project requires lifestyle photography. Where possible, please consider using images from the TELUS BrandHub before trying to source lifestyle photography.
Please follow the TELUS Brand Photography Guidelines for detailed information on usage and implementation of the images.
The TELUS Design System team often makes design improvements to the TDS component library and Master Sketch file. We track all release updates in our version page in the Master Sketch file and on the DSM release page on Invision.
When TDS makes releases you will get notified the next time you are on Sketch and signed into DSM.
Releases updates to the system can be found on the release notes on Github, so check back frequently for updates to the system.
Please take the time to join our #TDS-Guild Slack channel. It's the perfect place for general discussions, announcements, and design questions related to TDS. For further help please see our Support Page