The new tool is always hard to learn, especially if you’re dealing with text editors most of your working time. Graphic editors may be something that you as a developer didn’t use much or even starting to use for the first time.

Figma is one of the most efficient tools that help us designers to design components, web pages, and applications. I’m here to explain how you can use Figma more effectively in your workflow. Let’s go over the crucial things that you need to know.

I will use the Ant design system as an example that you can download in the Figma community.

🧭 Navigation

1. Get the Figma project link

2. Figma interface


  1. Comment button - you can leave a comment on an element or a section in the file
  2. Project pages - if your project has a complex structure, you can navigate through each element by clicking on a specific page
  3. Page navigation - helps you to navigate through components and elements that the page contains
  4. Editor - allows you to browse through the design
  5. Additional buttons
    1. User avatars - current page viewers
    2. Share - allows you to share the project link with your teammates
    3. Play - clicking on this button will allow you to see the interactive clickable prototype of the page (if exists)
    4. Zooming options
  6. Element inspect panel

3. Editor

It’s the main window that we designers use to create a design, and you will use to view it.


  1. Select each element on the page