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.
The basic organization of our Sketch files is based on pages, artboards, symbols, and shared styles.
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.
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:
[Emoji] [Page id] [Page name]
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
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.
[id]_[row number][screen number]
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
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.
✏️ To learn more about how we work with symbols and components you can read 4. Design Systems.****
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.
The layer styles can be differentiated between color, opacity and shadows.
Text styles must match the product's color palette. We create these in both color fills and outline.
We 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.
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 🚀.
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.