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.
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!
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.
Click on the identify of a body to examine it. Within the Examine panel you’ll get entry to:
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.
Having this textual content container chosen, the Examine panel gives you entry to:
Apart from these attributes, relying on the kind of textual content that’s chosen, you can too examine: stroke settings and results settings.
Having this blue rounded rectangle chosen, the Examine panel gives you entry to the next:
Having this element chosen, the Examine panel gives you entry to the next:
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:
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:
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.
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.
We’ve got a great deal of tutorials on Tuts+, newbie to intermediate degree, have a look!
Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.
If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.