Branding & Design Agency Logos | brandulum Custom Design Agency Logo Designs

Wednesday December 23, 2020 By Dave

How to Use Figma’s Inspect Panel

Final product image — What You may Be Creating

We’re going to design a scheduling app in Figma! In doing so we’ll work with Figma’s Examine panel, explaining the best way to export a Figma design to code, the best way to examine a Figma design system, and the best way to use Figma to examine any aspect from a design.

What You Will Be taught in This Figma Tutorial

The best way to Examine frames in Figma
The best way to Examine Auto Layouts in Figma
The best way to Examine Parts in Figma
The best way to Transfer from Design to Code in Figma

For extra inspiration on the best way to alter or enhance your last Figma design system you’ll find loads of assets on Envato Parts. Parts is residence to thousands of UI and UX kits, suitable together with your favourite design instruments (together with Figma) for one single subscription value!

1. The best way to Use Figma’s Examine Panel

Step 1

The Examine panel could be opened from the fitting sidebar with a easy click on on the Examine tab on the high.

Utilizing this panel you’ll be able to simply examine the properties of any aspect out of your design.

The Examine panel will also be utilized by collaborators with whom you share a file.

Each can edit and can view entry to a file grant entry to collaborators to the the Examine panel.

We’ll use this scheduling app design to see how one can simply examine totally different parts from a design.

Having nothing chosen, the Examine panel provides you details about the background shade, the saved kinds, or every other parts out of your Figma design system.

Does Figma generate code? Figma does generate code, making it very easy to modify out of your Figma design to code. Within the subsequent steps I’ll present you ways this may be performed and what are your choices.

2. The best way to Use Figma to Examine Frames

Click on the title of a body to examine it. Within the Examine panel you’ll get entry to:

The title of the body
The dimensions and place of the body
The colour of the body. On this case, you’ll be able to see the title of shade type used and the colour code. Utilizing the drop down menu you’ll be able to change the colour mode to: HEX, CSS, HSL or HSB.
The Code part from the Examine panel exhibits you the best way to replicate any chosen aspect in code making it lots simpler to modify out of your Figma design to code.

Utilizing the drop down menu you’ll be able to select between CSS, iOS(Swift), and Android (XML) codecs and with these icons you’ll be able to swap between Code view and Desk view. Understand that you’ll be able to’t export to HTML in Figma.

3. The best way to Use Figma to Examine Textual content

Having this textual content container chosen, the Examine panel offers you entry to:

The dimensions of the textual content container
The highest and left margin settings
The opacity and mix mode
The resizing settings
The textual content contained in the textual content container
The textual content settings. When you choose a textual content container with a number of textual content settings, the Examine panel shows all kinds individually
The colour of the textual content
The code that you should replicate the Figma design to code

Moreover these attributes, relying on the kind of textual content that’s chosen, it’s also possible to examine: stroke settings and results settings.

4. The best way to Use Figma to Examine Shapes, Teams and Auto Layouts

Having this blue rounded rectangle chosen, the Examine panel offers you entry to the next:

Due to that tiny icon you’ll be able to inform that you’re coping with an auto format and that the title given contained in the Layers panel is, Body 9
The dimensions of the auto format body
The space to the highest and the left fringe of the artboard
The nook radius, the padding and the spacing settings
The fill shade used for the auto format
The settings of the utilized Drop Shadow impact
The code that you should replicate this Figma design to code

5. The best way to Use Figma to Examine Parts

Having this element chosen, the Examine panel offers you entry to the next:

Due to that tiny icon you’ll be able to inform that you’re coping with an occasion of a element, not the principle element, and that the title given contained in the Layers panel is Schedule Standing
The outline of the element
The lively variant of the element
The dimensions and place of the element
The code that you should replicate the element in code

You can too examine objects that make up a element. As I additional double-click this element and examine the examine mark I can get entry to:

The title give to this path within the Layers panel
The title of the dad or mum element. Click on the bullseye icon to get again to the settings of the element
The dimensions, and the highest and left margin values
The stroke settings
The code that you should replicate this circle

6. The best way to Use Figma to Examine Animations

Moreover design specs, the Examine panel additionally exhibits you values for prototype animations.

Having this notifications icon chosen, within the Animation part of the Examine panel you’ll get details about:

On Click on: The animation set off
Navigate to: The prototype motion and the linked vacation spot
Animate: The animation kind
Curve: The animation kind of ease
Length: The animation period

7. The best way to Copy Properties from the Examine Panel

As you hover over many of the settings from the Examine panel you’ll discover a blue Copy button. Clicking this button will copy the values from that part. You’ll then be capable of paste the copied values wherever you want.

Congratulations! You’re Completed!

I hope you’ve loved this tutorial and might apply these methods in your future initiatives. Don’t hesitate to share your last consequence within the feedback part.

Be happy to regulate the ultimate design and make it your personal. You could find some nice sources of inspiration at Envato Elements, with fascinating options to enhance your design.