Product Design Handbook EN
Search…
Sketch
Sketch
Sketch is the studio's main tool. Sketch is a part of our day-to-day workflow, and with which we design most of our projects.
This section details how we use Sketch, the way we organize it, and the plugins we use.
1. Organization
The basic organization of our Sketch files is based on pages, artboards, symbols, and shared styles.
1.1 Pages
In our Sketch files, you can find three types of pages, depending on their content and the status of the content.
Pages in progress ⚙️
The pages in progress are the ones you are currently working on. These are iterated on within the same artboard or element.
It is important for us to identify pages that are not finished because we are still working on them. These are pages in which the content does not have to be perfect.
Master pages ✅
The master pages contain the finished content. The content of this page must be perfect, have implemented styles, be made up of components and respect the defined spacing.
Symbols page (Symbols)
In most of our projects, this page only appears when the file is a library, which contains the design system of our product.
The naming system we use in Sketch's pages
This is our way of organizing Sketch, but it doesn't always have to be like this. This is our way of resolving conflicts about which pages are ready and which are being worked on.
In order to reflect these three types of pages and keep Sketch files consistent within all projects, we require that all pages have a visual identifier, a numerical identifier, and a descriptive name for their content.
Following the nomenclature:
1
[Emoji] [Page id] [Page name]
Copied!
- Emoji: we use ✅ for master pages and ⚙️ for pages in progress.
- Page id: Are an incremental numerical identification with a 0 (zero) as a prefix.
An example would be:
- ✅ 02 Account
- ✅ 03 Catalog
- ⚙️ 04 Profile
1.2 Artboard
We group artboards into user flows or user stories. Each row represents a possible path for the application or web being designed. At the beginning of each row, there is an artboard containing the name and a description of the user flow being represented.
To name the artboards we use an ID, which corresponds to that particular page, and a number that consists of the row number and the screen number.
1
[id]_[row number][screen number]
Copied!
- The id refers to the id of the page✏️ If the page is 01 Account → id page: 01
- The row number refers to the user flow number in which we find ourselves.
An example would be:
First user flow → row number: 1
Second user flow → row number: 2
Third user flow → row number: 3
- The screen number is incremental from left to right.✏️ If 01 02 03 04 05 06 07 08 09 10 11 12
An example would be:
For the user flows on page 01 Account:
- 01_100 01_101 01_102 01_103
- 01_200 01_201 01_202 01_203 01_204
- 01_300 01_301 01_302 01_303
1.3 Symbols
We use symbols to optimize and automate our work. Symbols make it easier for us to change multiple components at the same time.
The symbols in Sketch are located in a Sketch Library, a linked Sketch file we're working on. The use of libraries allows all Sketch files of a project to share components, thus avoiding duplicates that lead to an error.
1.4 Shared Styles
We work with two types of shared styles, text styles and layer styles.
Normally these reside in the library where the design system of our project is located, and will be applied to the file we are working on.
Styles, such as symbols and components, help us avoid inconsistencies and duplicities.
Layer Styles
The layer styles can be differentiated between color, opacity and shadows.
- ColorText styles must match the product's color palette. We create these in both color fills and outline.
- OpacityWe apply opacity to the container group of an element or elements that we want to give a certain opacity. Thus, we control which opacities are used in the project. This allows us to update layer and text styles without losing the different opacities of the said style instances.
- Shadows
Text Styles
In all our files, texts have to have an assigned text style. This helps us to maintain consistency in the file and in the product.
2. Sketch plugins
The following are 5 Sketch plugins that help us efficiently work with Sketch 🚀.
Sketch Runner helps us search for everything you can imagine within Sketch, apply styles and insert symbols.
Screenshot of Sketch Runner
Sketch Runner allows:
- Executing plugins
- Install plugins
- Go to any page, artboard, group or layer in the Sketch document we are in.
- Inserting Symbols
- Create symbols
- Create text styles and layer styles
- Apply text styles and layer styles
- Update outdated plugins
Some of the things you can do with this plugin that make our every day easier are:
- Replace Fonts
- Import Styles from Library
- Replace Symbol with Library Symbol
- Rename instances of symbols
- Select Layer by Layer / Text Style
- Resize artboards to fit the height of the layers and groups it contains (Resize to a fixed height)
Rename It allows:
- Rename Layers
- Rename artboards
- Replace words with others (Find and Replace)
For us, it is very useful because it allows us to automatically add a sequence of numbers in ascending or descending order, which allows us to name the artboards easily.
Screenshot of the Rename It window
It's similar to Rename It, but for text styles. It's really useful as it lets you rename text styles and replace their words.
Screenshot of Sketch Style Master
One of the great advantages of this plugin is being able to extract all the text styles that exist in the file. When you run the plugin, Sketch Style Inventory creates a page with all existing text styles.
Screenshot of Sketch Style Inventory
It's really useful when you need to change a feature of a particular style. This way we can ensure that the change has been applied to all text styles.
Sketch Style Inventory can also generate all the colors and symbols present in the Sketch file, and even export them.
This plugin allows you to add numbering to artboards in Sketch in such a way that they are numbered according to the order in which they appear in the list of layers (they can also be numbered in reverse order).
Screenshot of Sketch Page Numbers
It is especially useful when designing Sketch documents such as brand books or concept presentations.
Last modified 2yr ago