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
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.
Figma Tutorials on Tuts+
Now we have a great deal of tutorials on Tuts+, newbie to intermediate degree, have a look!
FigmaHow to Create a Medical Website Design in Figma
FigmaHow to Turbocharge Your Components with Figma Variants
FigmaHow to Work with Auto Layouts, Components, and Dynamic Content in Figma
FigmaHow to Create Onboard and Login Screens for a Dating App Template in Figma
FigmaHow to Use the New Figma Auto Layout Features
FigmaCreating a Figma Design System: Typography, Spacing, and Sizing
FigmaEssential Figma Shortcuts for Working Efficiently
FigmaHow to Change Multiple Colors at the Same Time in Figma
FigmaHow to Fix Cropped Shadows or Overflowing Elements in Figma
Figma20 Figma UI Kits for Designers