Sketch Deprecated

We used Sketch as the main design tool. To keep the design files of George consistent, a designer of George has to stick to the conventions listed below.

Artboard sizes

Bootstrap 4 differentiates between 5 sizes for devices, and Bootstrap 5 between 6 sizes. We are not using Bootstrap 5 (yet), but there is the possibility to opt into their 6 sizes already, which then includes the XXL tier.

If you design for one of those stay consistent with the width of the artboard(s).

HINT The outer gutter width is always 30 pixels (2× 15px).

HINT You can add custom artboards for George to Sketch by replacing ~/Library/Application Support/com.bohemiancoding.sketch3/artboard.plist of your home directory with artboards.plist.
(In the case you already have set up custom artboards in Sketch and do not want to lose them, you have to manually merge the files and copy and paste the George specific artboard XML nodes to the file on your drive.)

Sketch Plugins

We use several third party plugins to enhance Sketch.

Recommended plugin

• ⓖ Design by George Design System - “A plugin collection for George Designers”

Optional plugins

• Sketch Runner – “Runner helps you to get around Sketch quicker by giving you an intuitive interface to supercharge your daily workflow. Stop searching through your menu & start running commands directly from your keyboard.”
  • HINT Install Sketch Runner first and use it to install the other plugins.
  • Open Settings of Sketch Runner and insert ‘mixin’ as the symbol name prefix. This will hide symbols with the term ‘mixin’ in the symbol name from Sketch Runner. Those symbols are used for nested symbols but should not be used in the artboards themselves.
• Auto Layout by AnimaApp “Great for stacking layers.
• Automate Sketch by Ashung “Make your workflow more efficient.”
• Bootstrap Helpers by Konstantin Demblin - “A plugin to help working with (bootstrap) grids in Sketch.”
• Rename it by Rodrigo Soares - “Sketch plugin to rename layers like a boss.”
• Sketch Artboard Manager by Ale Muñoz - “This plugin automatically arranges the position of all Artboards in your Sketch document, to snap them to rows & columns.”
• Sketch meaXure by qjebbs - “Make it a fun to create spec for developers and teammates.”
• Stark by Cat Noone, Michael Fouquet, and Benedikt Lehnert- “The colour-blind simulator and contrast checker for Sketch. Design with accessibility in mind.”

Sketch Libraries

We use several custom Sketch libraries to design George.

Some useful shortcuts

• Press Ctrl + C to open the Colour Picker
• Select a layer and press Cmd + R to rename a layer; press Tab (or Shift + Tab) to jump to the next (or previous) layer
• Press Cmd + . to switch to presentation mode
• Press Cmd + ß to collapse all layers - (this is a custom shortcut that needs to be set up in Mac OS System Settings!)
• Press Alt + click on the eye/lock-icon while hovering on the layer list to lock layer.