Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Figma

How to Use Figma’s Inspect Panel

by
Difficulty:BeginnerLength:ShortLanguages:
Final product image
What You'll Be Creating

We’re going to design a scheduling app in Figma! In doing so we’ll work with Figma’s Inspect panel, explaining how to export a Figma design to code, how to inspect a Figma design system, and how to use Figma to inspect any element from a design.

What You Will Learn in This Figma Tutorial

  • How to Inspect frames in Figma
  • How to Inspect Auto Layouts in Figma
  • How to Inspect Components in Figma
  • How to Move from Design to Code in Figma

For more inspiration on how to adjust or improve your final Figma design system you can find plenty of resources on Envato Elements. Elements is home to thousands of UI and UX kits, compatible with your favorite design tools (including Figma) for one single subscription price!

1. How to Use Figma’s Inspect Panel

Step 1

The Inspect panel can be opened from the right sidebar with a simple click on the Inspect tab at the top.

Using this panel you can easily inspect the properties of any element from your design.

figma inspect panel

The Inspect panel can also be used by collaborators with whom you share a file.

Both can edit and can view access to a file grant access to collaborators to the the Inspect panel.

figma share

We’ll use this scheduling app design to see how you can easily inspect different elements from a design.

figma schedule app

Having nothing selected, the Inspect panel gives you information about the background color, the saved styles, or any other elements from your Figma design system.

Does Figma generate code? Figma does generate code, making it really easy to switch from your Figma design to code. In the next steps I will show you how this can be done and what are your options.

inspect figma design system

2. How to Use Figma to Inspect Frames

Click the name of a frame to inspect it. In the Inspect panel you’ll get access to:

  1. The name of the frame
  2. The size and position of the frame
  3. The color of the frame. In this case, you can see the name of color style used and the color code. Using the drop down menu you can change the color mode to: HEX, CSS, HSL or HSB.
  4. The Code section from the Inspect panel shows you how to replicate any selected element in code making it a lot easier to switch from your Figma design to code.
figma inspect frames

Using the drop down menu you can choose between CSS, iOS(Swift), and Android (XML) formats and with those icons you can switch between Code view and Table view. Keep in mind that you can’t export to HTML in Figma.

does figma generate code

3. How to Use Figma to Inspect Text

Having this text container selected, the Inspect panel will give you access to:

  1. The size of the text container
  2. The top and left margin settings
  3. The opacity and blend mode
  4. The resizing settings
  5. The text inside the text container
  6. The text settings. When you select a text container with multiple text settings, the Inspect panel displays all styles separately
  7. The color of the text
  8. The code that you need to replicate the Figma design to code

Besides these attributes, depending on the type of text that’s selected, you can also inspect: stroke settings and effects settings.

figma inspect text

4. How to Use Figma to Inspect Shapes, Groups and Auto Layouts

Having this blue rounded rectangle selected, the Inspect panel will give you access to the following:

  1. Thanks to that tiny icon you can tell that you are dealing with an auto layout and that the name given inside the Layers panel is, Frame 9
  2. The size of the auto layout frame
  3. The distance to the top and the left edge of the artboard
  4. The corner radius, the padding and the spacing settings
  5. The fill color used for the auto layout
  6. The settings of the applied Drop Shadow effect
  7. The code that you need to replicate this Figma design to code
figma inspect auto layout

5. How to Use Figma to Inspect Components

Having this component selected, the Inspect panel will give you access to the following:

  1. Thanks to that tiny icon you can tell that you are dealing with an instance of a component, not the main component, and that the name given inside the Layers panel is Schedule Status
  2. The description of the component
  3. The active variant of the component
  4. The size and position of the component
  5. The code that you need to replicate the component in code
figma inspect component

You can also inspect objects that make up a component. As I further double-click this component and inspect the check mark I can get access to:

  1. The name give to this path in the Layers panel
  2. The name of the parent component. Click the bullseye icon to get back to the settings of the component
  3. The size, and the top and left margin values
  4. The stroke settings
  5. The code that you need to replicate this circle
figma inspect path

6. How to Use Figma to Inspect Animations

Besides design specifications, the Inspect panel also shows you values for prototype animations.

Having this notifications icon selected, in the Animation section of the Inspect panel you’ll get information about:

  • On Click: The animation trigger
  • Navigate to: The prototype action and the linked destination
  • Animate: The animation type
  • Curve: The animation type of ease
  • Duration: The animation duration
figma inspect animation

7. How to Copy Properties from the Inspect Panel

As you hover over most of the settings from the Inspect panel you’ll notice a blue Copy button. Clicking this button will copy the values from that section. You’ll then be able to paste the copied values anywhere you need.

copy properties inspect panel

Congratulations! You’re Done!

I hope you’ve enjoyed this tutorial and can apply these techniques in your future projects. Don’t hesitate to share your final result in the comments section.

Feel free to adjust the final design and make it your own. You can find some great sources of inspiration at Envato Elements, with interesting solutions to improve your design.

how to use figma to inspect

Figma Tutorials on Tuts+

We have loads of tutorials on Tuts+, beginner to intermediate level, take a look!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.