Web-Design
Wednesday December 23, 2020 By David Quintanilla
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.

figma inspect panel

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.

figma share

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

figma schedule app

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.

inspect figma design system

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:

  1. The identify of the body
  2. The scale and place of the body
  3. 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.
  4. 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.
figma inspect frames

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.

does figma generate code

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

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

  1. The scale of the textual content container
  2. The highest and left margin settings
  3. The opacity and mix mode
  4. The resizing settings
  5. The textual content contained in the textual content container
  6. 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
  7. The colour of the textual content
  8. 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.

figma inspect text

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:

  1. 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
  2. The scale of the auto format body
  3. The space to the highest and the left fringe of the artboard
  4. The nook radius, the padding and the spacing settings
  5. The fill coloration used for the auto format
  6. The settings of the utilized Drop Shadow impact
  7. The code that it’s essential replicate this Figma design to code
figma inspect auto layout

5. The right way to Use Figma to Examine Elements

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

  1. 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
  2. The outline of the element
  3. The lively variant of the element
  4. The scale and place of the element
  5. The code that it’s essential replicate the element in code
figma inspect component

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:

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

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
figma inspect animation

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.

copy properties inspect panel

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.

how to use figma to inspect

Figma Tutorials on Tuts+

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



Source link