Pink Flower

How to make the most of Sketch?

Sketch is software similar to Figma or the not-so-missed (or maybe it is...) Adobe XD. Created by the Dutch company Bohemian Coding, this software is a vector graphics editor, also known as a graphic interface design tool, for app and website design. Much like its competitor Figma, it also allows for interactive prototyping. It offers a range of tools and features aimed at enhancing the design process. So, that's all nice, but how do we actually use it? You are about to dive step by step into your first use of the software, allowing you to fulfill your wildest dreams (in terms of mockups, of course... not sure you can become a millionaire... or maybe).

First things first, you need to create an “artboard,” which is similar to a workspace, defining your screen size. Sketch provides some predefined screen sizes to simplify this task. Now that we have our canvas, we can start painting! Let's add some graphic elements; click on “Insert” and choose the element you want, such as a button, a label, or a text input. These elements are called atoms. We can then create a molecule by duplicating and moving the atoms together. The tool allows you to modify the text of the label, the input, and the button. Make it a search bar (this is the label's text) with “Perform a search” written in the input and note “Search” for the button text. Select these elements and press Ctrl+G to group them.

You've created your first molecule! Now, let's tackle your organism by creating a header. Duplicate your search bar to the right, then add 3 labels, which you will place to the left of it, and on the far left, add a rectangle to represent your logo.
And there you go, we are now biology experts! Just like any good doctor, it's very important to organize your content. Name your pages and organize them as you see fit. You can also add titles to your artboards and place them in sections to create a hierarchy level. This will help you easily navigate your project and avoid wasting time on potential modifications.

You are now a novice with the software and have acquired the basics of Sketch in just a few minutes!

Create a free website with Framer, the website builder loved by startups, designers and agencies.