If you are are around Product Ownership and prototyping you will eventually bump in to a sketching/prototyping tool called Figma. There is a ton of other sketching/prototyping tools, but Figma is becoming an industry standard. This is understandable, because it is a great tool. In this article I will give you a very basic introduction/jumpstart to what Figma usage, what are the main benefits for using it.

What is Figma and why to use it

Figma is basically a sketching, prototyping, design tool for UI/UX. You can design logos, documents, diagrams, apps and use it as a collaborative tool. For me the biggest benefits for using Figma are: 

• A mature and advanced tool – You can use it for really large and complex products. It can be used for simple wireframing to hi-fidelity designs.
• It is a widely used tool – Became an industry standard, giants like Microsoft, Github, AirBnb, Uber, Zoom, Twitter, Dropbox, Slack, Volvo,…are using it. The chance that you will use it in the future or on your next product is high. 
• Collaborative tool – You can share materials, leave comments and even have calls via Figma. It also allows to work on the same sketch for multiple people at once. You don’t need to send files, but you just share the link and the other person can work on the same sketch. 
• It is a prototyping tool – You can design and a prototype/ideas for your product really easily. You can use advanced user interactions to really detail out how the system reacts on the user (animations, user interactions,…).
• Wide options for design – There is wide palette of design tools you could be used to from graphical design tools as styles, color pallets, vectors, constrains, auto-layouts, masks, export…
• Wide community – There are a lot of people using Figma, so you have a tons of materials and resources that you can re-use, like templates, plugins,… Thank to the wide community there are a lot of learning materials on Youtube, Udemy,…
• Free license options – You can use a lot of features even when you use just the free plan. The paid version allows you to have more projects and better collaboration. 
• Web based option – The app has two versions. A web app – Figma is entirely browser-based – or a desktop app. The browser-based app worked fantastically for me and I never tried the desktop I never felt the need for it. So, no worries it works with PCs and Macs. 

Basic application functions

How to start? Just go to figma.com, sign in and create a new draft. When you start you can see on your screen multiple areas:

• Canvas – the main area where all the work is done
• Top bar
  • Figma menu
    • you can find all the standard options that you would expect – new File, Edit, View, Vector, working with objects, texts, 
    • but you can find here also Quick actions which can help you to quickly find what you need if you can’t remember where the menu item is located. Especially effective if you use a hotkey for it (CTRL+/).
    • Plugins – little apps that can simplify your work like – removing bag round from a picture, adding an icon/illustration, generate Lorem ipsum texts and many more. 
    • Preferences – here you can customize your workspace
    • Libraries – Libraries of components you can share with other projects.
  • Tools
    • Move and Scale – when you grab multiple objects you can use the scale tool to scale them up so, you don’t need to do it individually
    • Frame and Slice – Frames are very important, you organize your content to frames and frames provides a lot of useful functions (like auto-layout). With Slice you can select certain area, but I find little to no use for it.
    • Shapes – You can add basic shapes with this tool and also importing/adding an image to canvas.
    • Pen and Pencil – Classic tools creating vectors.
    • Text – Write a text.
    • Move – Move around canvas (just use Space bar)
    • Comment – Leave comment to you or your comments.
  • Share – via link or via sending an email or you can share your work with the Figma community. 
  • Play – When you created a prototype, you can start the demo/presentation with this button.
  • Zoom – Zoom and view options.
• Left bar
  • Layers – Here you can see all of the content in you sketch for the page you have opened. This is a very important for navigation in the content. The content is organized in groups and frames. Always use good naming conventions and use frames as content holders. 
  • Assets – Here are listed all of the components and libraries you use. 
  • Pages – Each sketch can have multiple pages, to navigate among them you select page you want to see. 
• Right bar
  • Alignment – I use it very often to align objects, but also to distribute objects vertically or horizontally. 
  • Position, Size – You can define the position or width, height of an object pixel perfect.
  • Rounding – You can round corners of your objects.
  • Constraints – Is a very useful function to stick an object relative to the the position to another object under it. e.g. if you want to create a modal where the button is always top, right 20px from right side and bottom, you can define it here. 
  • Layer – You can use standard masks as Darken, Hue, Difference, etc…
  • Fill, Stroke – Define colors of the objects.
  • Effects – Simple effects.
  • Auto layout – A very useful tool that helps you to organize your content in an area for cases you need to re-size them. It adds flexibility to your modals, buttons, etc…so you can easily re-use them regardless on the dimensions.   
  • Layout grids (on Frames) – Another very useful tool if you want to have your content consistently positioned. You can define a grid or maybe a lot more useful is to have columns defined. 
  • Export – If you need to export the content you created you can use this very simple export tool. You just select what you want to export (a frame, one single element), then you select what format you want to have it saved (PDF, PNG,…) and save it.

Useful features 

Frames

For visual design one of the most useful feature I consider the possibility to add guidelines to split the space of your element in to columns, rows, grid or a combination of them. It does not just visually indicate how you should organize the content, but also you can snap the element to the border of the column. 

The second most useful feature regarding frames is the auto-layout feature which allows you to automatically organize elements in a frame. This is especially useful when you are reusing elements in your design as buttons, modals, etc… With this features you don’t need to play around with repositioning each element when you add or change it’s content, but it automatically falls in the logic of the frame. Example if you want to add a new item in a menu you just CTRL+D and it automatically add a new menu item.

Components

Components are here for case when you want to have a uniform look and make changes quickly over your whole design. With this feature you don’t need to go to each instance of an element when you later do a decision to change a design. You have a common component defined, that can be re-used as an instance of the master. When the master is changed it is changed in every instance of the component. E.g. when you want to change an icon of on a button that looks nicer, you just change it on the master and it is changed everywhere. Or if you want to change color, etc…

Prototyping

You can do a simple functioning prototype really fast if you have designed your content. At first you can select the device type on which you want to demonstrate your content or you define your own device size. Then you define the start of your flow (in the example the flow starts with showing the frame Prototype screen – 01), then you can select the type of interaction of your user with the system (e.g. click or pressing a key). You have a lots of options: on tap, on drag, While hovering, While pressings, Key/Gamepad, Touch enter/leave, Mouse Touch enter/leave. When selected you can just simply drag the an arrow from an element to another element to change. When you have all the interactions you just hit a play button and you can see the demo on the device you selected and you can click through it. It is really fast to set it up, so you can have a simple demo in few minutes, but if you want to have a hi-fidelity demo you can really customize the interactions with animations etc… Usually it is very simple interactions like clicking/taping, dragging is more then enough, but if you want to have something fancy you have the option.  

If you want to share your prototype you just share the link to the prototype and anyone can test it out. Makes it very easy to share as you don’t need any exporting tools, the user don’t need to set anything up, etc…but they can leave comments. 

The downside is that sometimes it takes Figma a long time to render all the content to the prototype demo.

Shortcuts

I love shortcuts. You can save few minutes by searching for some tool or feature, but even saving few seconds for a features/tools you use often can help you to be more productive. There are a lot of hotkeys in Figma and many times they are intuitively chosen. From simple functions as Rectangle (R for rectangle, L for line,…) to stuff like running the last plugin you used (CTRL+ALT+P). Here are few hotkeys I consider very useful from what I use the most often at the top:

• Moving on the canvas screen – Switching between a tool and moving the screen – Space
• Duplicate an object – I’m always re-using content that I have created and there is a simpler/faster alternative to CTRL+C/V. You can use just CTRL+D or, what I really love just press ALT and drag the copied object where you want it.
• Use “K” for scaling. This will save you a lot of time as you won’t need to rescale each element in an object when you want to change the scale of it.
• Zooming:
  • in to frame – SHIFT+1
  • in to selection – SHIFT+2
  • in to next frame – N
• Create a frame and apply auto-layout – Select objects and SHIFT + A
• Import an image – CTRL+SHIFT+K
• Deep select – Often you need to select an object that is deep in the layers of your content. You can double click it or just hold CTRL and click.
• Re-naming – Naming your content in a consistent way is very important, especially for complex project. Believe me you will thank me later. You can go to right bar or just use CTRL + R to re-name.
• Mass renaming – You can rename multiple objects at once and not just that, but also use ascending/descending parameters. 
• You can copy the styling of a text with ALT+CTRL+C/V
• Working with layers – Bring forward/backward CTRL + [ / ]; Bring to front/back CTRL + SHIFT + [ / ]

Last words