Basic Tool Fundamentals
Start giving a concrete form to your ideas
It can be intimidating to get into user experience, especially if you’re a newbie who isn’t quite sure what to do at first. Even if you’re not a newbie, you can still use the tools to get better at prototyping. Tools make our everyday life so easy like watches help us to tell the exact time and are now used for many purposes. Similarly, for prototyping, there are basic tools that help in creating prototypes easily, such as Figma, XD, Illustrator, Photoshop, and Sketch.
Figma is a product design platform that allows designing, collaboration, and presenting wireframes, mockups, and prototypes.
Free & Discounted Udemy Courses — Explore Now
Tools will help you in giving a form to your design ideas, especially coming to UX design, prototype is the final form that plays a key role. The prototypes are built using shapes, grouping, naming, interactions, layers, text, colors, etc. Now let us dive into each element
1. Create shapes
There might be pre-existing shapes like rectangles, circles in the tools you opt to use for design but to create any customized shape, pen icon/tool
is used. Once you start drawing it creates smooth paths that can be modified by using a property panel like making it curved, providing borders and filling it with colors, etc. The pen tool is commonly used by tools like Sketch, Axure, UXPin, etc. The shapes can be modified by using boolean operations like union, intersection, difference, intersect, etc.
The above gif shows how the pen tool is used in illustrator to create the customized shape. The dot/point is known as an anchor and the line is called a handle, by using these two one can create any type of shapes
2. Text and colors
To add a text element in the tool click on “T” the text box will show up on the canvas or you can select the textbox from the panel and insert it, this shortcut works in UXPin and Sketch. Style the text by adding font size, font family, font color, alignment, line, paragraph spacing, etc. all these features for text will be available in the property panel.
Colors can be added to any element you create on the canvas. Select the element that needs to be colored and fill it with color by using hex codes or by selecting the list of colors available or by using a color picker or by using a gradient.
The above gif is from Figma it shows how can we add colors to the text and shapes
3. Group and name the elements
On a canvas, we create multiple elements, to avoid confusion group the similar type of elements, and name them. It also helps you to organize everything neatly which is easily findable. For example, if you have created a header that contains a logo, navigation text, search bar, and user icon. Group all those individual elements and name them as a header. It will be useful and easy when you have to copy it to the next page or other parts of the screen
The above gif shows how to group the elements present on the canvas and name them
4. Create and arrange layers
Layers are the building blocks for creating designs in tools. Shapes, Groups, and elements are the types of layers. A layer is created when an element is added to the canvas/editor. By clicking on the element the layer will be selected and it can be moved up and down or you can hide and show them. Select multiple layers/elements and group them. You can lock or hide the layers. Once the layer is locked it can’t be moved on the canvas and it will help you to work on complex screens without any distractions
The above image shows the grouped layers, on hover, it’s showing the eye icon, and on clicking it is locked
5. Give interactions to prototype
Interactive prototypes can be made by giving proper controls to certain elements in the design. Interactions/Actions are the methods by which users interact with your prototype i.e. some kind of response/output is shown when users click, swipe, or hover over them. Basic interactions let you show, hide, move, and manipulate other elements on the screens. In general, every interaction has an element, trigger, and action. Element is the item on which the user initiates the interaction. Trigger is the type of interaction and action is the change that will occur. For example, an “element” can be a button, “trigger” is the click, and “action” is going to another page. When the user clicks on the button he/she will navigate to another page
The above example clearly shows how to group elements and rename them. Provide interaction for that group
These are some of the common functionalities/features present in any tool.
Here’s a video tutorial on how to use the Figma Tool
Tips / Best Practices
- Always name the layers, to avoid confusion
- Group similar type of elements and name them
- Preview the interactions immediately after applying them
- Practice the tool by replicating any screens that are available before designing from scratch
- The tool you opt for will have tutorials/youtube videos, go through them to get a better understanding
- Learn the shortcuts of the tools that you will be using eg: press R in Sketch and UXPin to create a rectangle
- Make sure you have a reference artifact like paper sketches or digital inspirations before building your design ideas
- Plan the complex interactions before building
Checklist
- Understand the functionality of the tool and use it
- Try to create a new icon or interaction or screen using the tool
- Name the layers properly which can be understood by any person who looks into it
- Group the related elements
- Follow alignments and spacing across the prototype
- Maintain consistency between the similar type of elements
Related Articles
Quick Question
Which of the following are triggers?
1. Click
2. Show
3. Swipe right
4. GoTo
Leave your answer in the comments section below!
Free & Discounted Udemy Courses — Explore Now
