Blog
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.

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 parts from a design.

figma schedule app

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.

inspect figma design system

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:

  1. The title of the body
  2. The dimensions and place of the body
  3. 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.
  4. 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.
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. Understand that you’ll be able to’t export to HTML in Figma.

does figma generate code

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

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

  1. The dimensions 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 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.

figma inspect text

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:

  1. 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
  2. The dimensions 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 shade used for the auto format
  6. The settings of the utilized Drop Shadow impact
  7. The code that you should replicate this Figma design to code
figma inspect auto layout

5. The best way to Use Figma to Examine Parts

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

  1. 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
  2. The outline of the element
  3. The lively variant of the element
  4. The dimensions and place of the element
  5. The code that you should 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 examine mark I can get entry to:

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

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

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.

copy properties inspect panel

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.

how to use figma to inspect

Figma Tutorials on Tuts+

Now we have a great deal of tutorials on Tuts+, newbie to intermediate degree, have a look!



Source link

Leave a Reply

Your email address will not be published. Required fields are marked *