How to Use Figma’s Inspect Panel

Final product image — What You will Be Creating

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

What You Will Study in This Figma Tutorial

The right way to Examine frames in Figma
The right way to Examine Auto Layouts in Figma
The right way to Examine Elements in Figma
The right way to Transfer from Design to Code in Figma

For extra inspiration on learn how to alter or enhance your last Figma design system yow will discover loads of assets on Envato Parts. Parts is residence to thousands of UI and UX kits, appropriate together with your favourite design instruments (together with Figma) for one single subscription value!

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

Step 1

The Examine panel will be opened from the appropriate sidebar with a easy click on on the Examine tab on the prime.

Utilizing this panel you’ll be able to simply examine the properties of any factor 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 components from a design.

Having nothing chosen, the Examine panel offers you details about the background coloration, the saved kinds, or another components out of your Figma design system.

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

2. The right way to Use Figma to Examine Frames

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

The identify of the body
The scale and place of the body
The colour of the body. On this case, you’ll be able to see the identify of coloration fashion 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 reveals you learn how to replicate any chosen factor in code making it loads simpler to change 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. Remember the fact that you’ll be able to’t export to HTML in Figma.

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

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

The scale 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 it’s essential replicate the Figma design to code

Apart from these attributes, relying on the kind of textual content that’s chosen, you can too examine: stroke settings and results settings.

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

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

Because of that tiny icon you’ll be able to inform that you’re coping with an auto format and that the identify given contained in the Layers panel is, Body 9
The scale 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 coloration used for the auto format
The settings of the utilized Drop Shadow impact
The code that it’s essential replicate this Figma design to code

5. The right way to Use Figma to Examine Elements

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

Because of that tiny icon you’ll be able to inform that you’re coping with an occasion of a element, not the primary element, and that the identify given contained in the Layers panel is Schedule Standing
The outline of the element
The lively variant of the element
The scale and place of the element
The code that it’s essential 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 test mark I can get entry to:

The identify give to this path within the Layers panel
The identify of the mother or father element. Click on the bullseye icon to get again to the settings of the element
The scale, and the highest and left margin values
The stroke settings
The code that it’s essential replicate this circle

6. The right way to Use Figma to Examine Animations

Apart from design specs, the Examine panel additionally reveals 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 sort
Curve: The animation sort of ease
Period: The animation period

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

As you hover over a lot 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 to paste the copied values anyplace you want.

Congratulations! You’re Carried out!

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

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

Figma Tutorials on Tuts+

We’ve got a great deal of tutorials on Tuts+, newbie to intermediate degree, have a look!

Source link