Web-Design
Friday May 7, 2021 By David Quintanilla
A to Z of Figma: Tips & Tricks!


On this tutorial you’ll be launched to some speedy suggestions and tips on use Figma! We’ll take a look at 26 Figma options, suggestions and tips from A to Z. Let’s obtain Figma and get right down to enterprise.

A to Z of FigmaA to Z of FigmaA to Z of Figma

When you get familiarized with Figma, try Envato Elements! With one subscription, you’ll have limitless entry to hundreds of thousands of artistic digital belongings reminiscent of graphics, Figma icons, Figma mockups, Figma templates, and extra. One easy business licensing you could cancel at any time!

What You Will Study:

  • Methods to Prototype in Figma
  • Methods to Create an Animation in Figma
  • Methods to Work with Elements in Figma
  • Methods to Use Grid in Figma
  • Methods to Work with Figma Shortcuts

A is for Auto Structure

Figma’s auto format function permits you to apply dynamic frames that regulate to their contents. You should use this wonderful function to create buttons that resize in keeping with their textual content, create lists or columns of components that may be simply rearranged, or you possibly can even nest auto format frames inside different auto format frames.

Wanna study extra about Figma auto format and in addition design one thing? Try this tutorial and create an eCommerce cart design as you observe working with auto format in Figma: Create a Shopping Cart Design with Figma Auto Layout.

figma auto layoutfigma auto layoutfigma auto layout

B is for Blurs

Blurs are results that may be utilized to things in Figma. The 2 sorts of Blur results that may be utilized from the fitting sidebar are Layer Blur and Background Blur.

Layer Blur is the basic kind of blur whereas Background Blur can be utilized to blur a selected part out of your design.

figma layer blurfigma layer blurfigma layer blur
figma background blurfigma background blurfigma background blur

C is for Elements

Elements are design components that may be simply reused throughout your Figma designs. Figma icons and some other kind of layer or object may be saved as a Figma element.

As soon as saved, that design turns into the Primary Element. A replica of this foremost element is known as Occasion. If you edit the principle element the remainder of the cases modify concurrently.

Elements are an important a part of any Figma design system. Try this tutorial for those who want to study extra in regards to the energy Figma elements as you create this iPad sport UI: How to Turbocharge Your Components with Figma Variants.

figma componentsfigma componentsfigma components

D is for Design tab

The Design tab from the fitting 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 regulate the Background settings or explored the kinds saved for the opened doc.

figma designfigma designfigma design

E is for Edit mode

With Edit mode you possibly can add, choose or regulate 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 clicking 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 while you end, press Enter or the Achieved button within the toolbar.

figma edit objectfigma edit objectfigma edit object

F is for Frames

A Body represents the world the place your design goes to be drawn in Figma. By default, your beginning body is white.

Deciding on the Body instrument from the toolbar or urgent the F hotkey will open a listing with the most typical display screen sizes in the fitting sidebar. You’ll be able to 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.

figma framefigma framefigma frame

G is for Management – G

Utilizing this Figma shortcut you possibly can simply group chosen components out of your design. Grouping components is an effective observe while you’re coping with advanced designs. It makes it simpler to prepare and choose a number of design components with only one click on. To ungroup components inside a bunch, use the Shift – Management – G keyboard shorcut.

In the event you 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.

figma groupfigma groupfigma group

H is for Hand Software

The H hotkey provides you the Hand instrument which can be utilized everytime you want to pan and transfer round a doc with out unintentionally choosing or transferring objects.

Alternatively, you possibly can maintain down the Area bar to quickly activate this Figma instrument.

figma hand toolfigma hand toolfigma hand tool

I is for Examine tab

The Examine tab may be accessed from the fitting sidebar and is used to examine the properties of any component 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 will also be utilized by collaborators with whom you share a selected doc.

Try this tutorial for those who want to study 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.

figma inspectfigma inspectfigma inspect

J is for Joins

Joins have an effect on the nook factors of a stroke. Strokes settings may be adjusted in the fitting sidebar. Relying on the kind of Be a part of that you choose from the fitting sidebar, you may make the corners seem sharp (Miter Be a part of), rounded (Spherical Be a part of), or squared (Bevel Be a part of).

figma stroke joinfigma stroke joinfigma stroke join

Ok is for Management – Shift – Ok

Utilizing this Figma shortcut you possibly can simply entry the Place Picture instrument which lets you simply import pictures inside a Figma doc.

You’ll be able to import a photograph straight on the body which can protect the unique measurement or you possibly can import a photograph inside a form from the design which can scale your photograph and make it match that form.

figma save componentfigma save componentfigma save component

L is for Layour Grid

Each time you choose body you get the choice to allow the Structure Grid in the fitting sidebar. A Figma grid can be utilized to outline the principle construction of a design and to measure, align or simply create pixel excellent 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 modifying choices. A effectively put collectively grid may be the proper begin for a Figma wireframe.

Try this tutorial to raised perceive how the grid can ease your work: How to Create a Medical Website Design in Figma.

figma layout gridfigma layout gridfigma layout grid

M is for Masking

Masking provides you the likelihood to cover elements of design components in Figma.

If you masks it’s essential to guarantee that the thing that may act because the masks lies beneath the thing (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 can 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 it’s a must 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.

figma maskingfigma maskingfigma masking

N is for Management + N

Use this Figma shortcut to rapidly create a brand new doc in Figma.

figma new documentfigma new documentfigma new document

O is for Ellipse Software

The O hotkey provides 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 excellent circles utilizing this Figma instrument.

figma ellipse toolfigma ellipse toolfigma ellipse tool

P is for Prototype

A Figma Prototype provides you the likelihood to attach frames, apply transitions and create Figma animations that simulate how customers will work together along with your last design.

To construct your personal prototype, first it’s essential to change to the Prototype tab in the fitting 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 completed you possibly can preview the Figma animation utilizing the Current button (little play button) from the higher proper nook.

Wanna study extra about Figma prototype and in addition design one thing? You might create this courting app template in Figma as you discovers the magi of Figma prototype: Create a Shopping Cart Design with Figma Auto Layout.

figma prototypefigma prototypefigma prototype

Q is for Management – Q

Use this basic Figma shortcut everytime you want to rapidly give up Figma.

figma quitfigma quitfigma quit

R is for Nook Radius

Nook Radius is among the two options that can be utilized to use rounded corners in Figma. Rounded corners may be utilized on any kind of vector shapes or body.

Choose your form/body and a merely enter a worth within the Nook Radius field. In the event you’re working with a rectangle you possibly can click on the Impartial corners button and set totally different values for every nook.

figma corner radiusfigma corner radiusfigma corner radius

Apart from Nook Radius, you should utilize the Nook smoothing function to offer your corners a seamless steady curve.

figma corner smoothingfigma corner smoothingfigma corner smoothing

S is for Shadows

Shadows are results that may be utilized to things in Figma. The 2 sorts of Shadow results that may be utilized from the fitting sidebar are Drop Shadow and Internal Shadow. Relying on the kind of impact that you just select you’re going to get totally different modifying choices.

figma drop shadowfigma drop shadowfigma drop shadow
figma inner shadowfigma inner shadowfigma inner shadow

T is for Textual content

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 fitting sidebar you possibly can choose the font and the opposite textual content settings.

figma textfigma textfigma text

U is for Union choice

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.

Apart from Union choice you will discover one other three boolean operations within the toolbar: Subtract Choice, Intersect Choice, Exclude Choice.

figma union selectionfigma union selectionfigma union selection

V is for Variants

With Variants you possibly can group a number of cases of a element in a single, after which simply change between the variants.

Utilizing properties and values you possibly can simply manage your numerous variants. Properties and values may be all the time edited and reorganized as your Figma design system evolves.

Try this tutorial to raised perceive how variants work: How to Turbocharge Your Components with Figma Variants.

figma variantsfigma variantsfigma variants

W is for Management – W

Use this basic Figma shortcut everytime you want to shut your present Figma doc.

figma close documentfigma close documentfigma close document

X is for Management – X

Use this basic Figma shortcut everytime you want to Lower a component out of your design.

figma cutfigma cutfigma cut

Y is for Management – Alt – Y

This Figma shortcut permits you to allow or disable the Pixel Preview.

Pixel Preview may be helpful while you goal to create pixel excellent designs. This options permits you to preview vector shapes of their rasterized format.

figma pixel previewfigma pixel previewfigma pixel preview

Z is for Zooming

Holding down the Z hotkey provides you the Zoom instrument which can be utilized to zoom in or out. Click on anyplace 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 anyplace on the design.

figma zoomfigma zoomfigma zoom

Able to Attempt Extra Figma Tutorials?

Superior! So now that we’ve gone by the A to Z of Figma, why not transfer to the following degree and check out one of many extra in depth tutorials on Envato Tuts+ . Bear in mind to take a look at Envato Elements the place you will discover 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 need to study extra, Envato Tuts+ has bought you lined!



Source link