Figma tutorial for frontend developers

January 29, 2022

This tutorial intended for developers consuming the design to develop products. It it based on a tutorial I gave inside my company.

You can watch the video here. Or read the main points.

Like and support!

You need an account to inspect the designs

You would have received a link from the designer. You don’t need a Figma app installed. But an account to login is required to inpsect the designs. View access of the designs are usually free. So won’t cost your organisation.

The UI

Middle design view
Right side inspect panel
Left side layers panel

The middle is where you see the design. Right side you have all the info you would need. It would show different info depending on what kind of layer you select. On the left side you have layers. Most of the time you won’t be dealing with layers. But when you need to select elements precisely you should use them.

Navigation (moving around and zoom in out)

Depends on device you use. Trackpad or mouse. On a mouse, hold “spacebar” to get move tool and click and drag to move around. You can use scroll wheel with holding “command” on mac or “ctrl” on windows to zoom in. But I find using “command +” “command -” to zoom in out.

For trackpad it’s more easy. You can use two finger scroll to move around. Pinch to zoom in and out.

Inspecting details

Check the details
Choose which code you want

Click on what you want info on. And the right side panel you would see the info displayed. There is a lot of info. You can also platform specific code if your using developing for native apps.

Copy content(text)

Use the right side panel to copy text

If you select text on the design. On you the right side panel you would have options to copy the content.

Check spacing

Click on one element. hover to check spacing

Click on what you want to measure from. Then hover over where you want to see the spacing is.

Export

When you lazy designer forgot to send you the assets like svg of the designs. And what if the designer is on holiday? You can’t wait forever. Figma gives you the option to export yourself. On the right side panel top. There is an export tab. You can set the format you need for your tech stack.

Commenting

In a remote working setup. Using messages sometimes result in confusion. And video calls are sometimes not worth the effort. You can easily comment on the design and refer what you have questions or requests about the design. Press “c” on the keyboard to comment.

Precise selection with layers

Hover to see what will be selected in the middle design view

Sometimes there are invisible boxes that you don’t see. And it’s needed for measuring precisely. Select what you want on the middle design view. And then on the left side layer panel try to select the top or bottom layer by clicking on it.