Figma tutorial for frontend developers￼
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.
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 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.
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.
If you select text on the design. On you the right side panel you would have options to copy the content.
Click on what you want to measure from. Then hover over where you want to see the spacing is.
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.
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
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.