On this tutorial you may be launched to some fast suggestions and methods on the right way to use Figma! We’ll take a look at 26 Figma options, suggestions and methods from A to Z. Let’s obtain Figma and get all the way down to enterprise.
When you get familiarized with Figma, take a look at Envato Elements! With one subscription, you’ll have limitless entry to hundreds of thousands of artistic digital belongings resembling graphics, Figma icons, Figma mockups, Figma templates, and extra. One easy industrial licensing that you would be able to cancel at any time!
Figma’s auto structure characteristic permits you to apply dynamic frames that modify to their contents. You should use this superb characteristic to create buttons that resize in keeping with their textual content, create lists or columns of parts that may be simply rearranged, or you possibly can even nest auto structure frames inside different auto structure frames.
Wanna be taught extra about Figma auto structure and likewise design one thing? Take a look at this tutorial and create an eCommerce cart design as you follow working with auto structure in Figma: Create a Shopping Cart Design with Figma Auto Layout.
Blurs are results that may be utilized to things in Figma. The 2 kinds of Blur results that may be utilized from the precise sidebar are Layer Blur and Background Blur.
Layer Blur is the traditional kind of blur whereas Background Blur can be utilized to blur a particular part out of your design.
Parts are design parts that may be simply reused throughout your Figma designs. Figma icons and some other kind of layer or object will be saved as a Figma part.
As soon as saved, that design turns into the Important Part. A replica of this predominant part is named Occasion. If you edit the primary part the remainder of the situations modify concurrently.
Parts are a vital a part of any Figma design system. Take a look at this tutorial should you want to be taught extra in regards to the energy Figma elements as you create this iPad sport UI: How to Turbocharge Your Components with Figma Variants.
The Design tab from the precise sidebar permits you to view, edit or take away the settings of a specific objects out of your design.
When nothing is chosen, you possibly can modify the Background settings or explored the types saved for the opened doc.
With Edit mode you possibly can add, choose or modify the properties of particular person factors and features from a vector form.
Choose the form that you just want you edit and click on the press the Edit Object button from the Toolbar or just press Enter to modify to Edit mode. Use the instruments from the toolbar to regulate the trail and once you end, press Enter or the Finished button within the toolbar.
A Body represents the world the place your design goes to be drawn in Figma. By default, your beginning body is white.
Choosing the Body instrument from the toolbar or urgent the F hotkey will open an inventory with the most typical display screen sizes in the precise sidebar. You may choose one of many preset sizes and add the body to your design, or you possibly can outline your personal customized measurement body.
Use the bounding field to scale any body and double click on its identify to rename it.
Utilizing this Figma shortcut you possibly can simply group chosen parts out of your design. Grouping parts is an efficient follow once you’re coping with advanced designs. It makes it simpler to arrange and choose a number of design parts with only one click on. To ungroup parts inside a gaggle, use the Shift – Management – G keyboard shorcut.
If you happen to want to discover the remainder of Figma’s shortcuts, press the query mark button from the bottom-left nook of the display screen and go to Keyboard shortcuts or use the Management – Shift – ? Figma shortcut.
The H hotkey offers you the Hand instrument which can be utilized everytime you want to pan and transfer round a doc with out unintentionally choosing or shifting objects.
Alternatively, you possibly can maintain down the Area bar to quickly activate this Figma instrument.
The Examine tab will be accessed from the precise sidebar and is used to examine the properties of any aspect out of your design, together with frames. Relying on the kind of object that you choose from, you possibly can examine: Properties, Content material (for textual content), Typography, Colours, Borders, Shadows, Figma Animations, CSS, iOS or Android Code.
The Examine tab may also be utilized by collaborators with whom you share a particular doc.
Take a look at this tutorial should you want to be taught extra in regards to the energy of the Examine tab as you create this scheduling app in Figma: How to Use Figma’s Inspect Panel.
Joins have an effect on the nook factors of a stroke. Strokes settings will be adjusted in the precise sidebar. Relying on the kind of Be part of that you choose from the precise sidebar, you can also make the corners seem sharp (Miter Be part of), rounded (Spherical Be part of), or squared (Bevel Be part of).
Utilizing this Figma shortcut you possibly can simply entry the Place Picture instrument which lets you simply import pictures inside a Figma doc.
You may import a photograph immediately on the body which is able to protect the unique measurement or you possibly can import a photograph inside a form from the design which is able to scale your photograph and make it match that form.
Each time you choose body you get the choice to allow the Structure Grid in the precise sidebar. A Figma grid can be utilized to outline the primary construction of a design and to measure, align or simply create pixel good objects.
Utilizing the dropdown menu, you possibly can select between: Grid, Columns or Rows. Relying on the kind of grid that you choose you’re going to get totally different enhancing choices. A properly put collectively grid will be the proper begin for a Figma wireframe.
Take a look at this tutorial to raised perceive how the grid can ease your work: How to Create a Medical Website Design in Figma.
Masking offers you the likelihood to cover elements of design parts in Figma.
If you masks it’s worthwhile to guarantee that the article that can act because the masks lies under the article (or objects) that will probably be masked. Choose all of the shapes and click on the Use as Masks button from the toolbar or press the Management – Alt – M Figma shortcut. This may masks your layer and create a masks group contained in the Layers panel.
To edit the content material of a masked group simply double click on it. To regulate the masks double click on your masked group twice. To disable a masks, all you need to do is choose the masks form after which click on once more the Use as Masks button or press the Management – Alt – M Figma shortcut.
Use this Figma shortcut to shortly create a brand new doc in Figma.
The O hotkey offers you the Ellipse instrument which can be utilized to create ellipse shapes in Figma.
Maintain down the Shift key as you click on & drag to simply create good circles utilizing this Figma instrument.
A Figma Prototype offers you the likelihood to attach frames, apply transitions and create Figma animations that simulate how customers will work together together with your ultimate design.
To construct your personal prototype, first it’s worthwhile to change to the Prototype tab in the precise sidebar. In Prototype mode it is possible for you to to attach the frames out of your designs, selecting the set off, the motion and the Figma animation that matches your want.
When your prototype is finished you possibly can preview the Figma animation utilizing the Current button (little play button) from the higher proper nook.
Wanna be taught extra about Figma prototype and likewise design one thing? You would create this courting app template in Figma as you discovers the magi of Figma prototype: Create a Shopping Cart Design with Figma Auto Layout.
Use this traditional Figma shortcut everytime you want to shortly stop Figma.
Nook Radius is among the two options that can be utilized to use rounded corners in Figma. Rounded corners will be utilized on any kind of vector shapes or body.
Choose your form/body and a merely enter a price within the Nook Radius field. If you happen to’re working with a rectangle you possibly can click on the Impartial corners button and set totally different values for every nook.
In addition to Nook Radius, you should utilize the Nook smoothing characteristic to provide your corners a seamless steady curve.
Shadows are results that may be utilized to things in Figma. The 2 kinds of Shadow results that may be utilized from the precise sidebar are Drop Shadow and Interior Shadow. Relying on the kind of impact that you just select you’re going to get totally different enhancing choices.
Seize the Textual content instrument or use the T hotkey everytime you want to add new textual content in Figma.
When you click on in your body you possibly can kind within the new textual content. From the precise sidebar you possibly can choose the font and the opposite textual content settings.
Use this boolean operation to simply unite shapes out of your design. Simply choose the shapes that have to be united, go as much as your toolbar and choose Union choice.
In addition to Union choice you’ll find one other three boolean operations within the toolbar: Subtract Choice, Intersect Choice, Exclude Choice.
With Variants you possibly can group a number of situations of a part in a single, after which simply change between the variants.
Utilizing properties and values you possibly can simply set up your numerous variants. Properties and values will be all the time edited and reorganized as your Figma design system evolves.
Take a look at this tutorial to raised perceive how variants work: How to Turbocharge Your Components with Figma Variants.
Use this traditional Figma shortcut everytime you want to shut your present Figma doc.
Use this traditional Figma shortcut everytime you want to Lower a component out of your design.
This Figma shortcut permits you to allow or disable the Pixel Preview.
Pixel Preview will be helpful once you goal to create pixel good designs. This options permits you to preview vector shapes of their rasterized format.
Holding down the Z hotkey offers you the Zoom instrument which can be utilized to zoom in or out. Click on wherever in your body to zoom in or click on and drag to outline the world on which you want to zoom it.
To zoom out, maintain down the Alt key together with the Z key and click on wherever on the design.
Superior! So now that now we have gone by the A to Z of Figma, why not transfer to the following stage and take a look at one of many extra in depth tutorials on Envato Tuts+ . Bear in mind to take a look at Envato Elements the place you’ll find loads of Figma icons, Figma mockups or Figma templates to encourage you.
Whether or not you are engaged on a Figma design system otherwise you simply wish to be taught extra, Envato Tuts+ has obtained you lined!
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.