
If you wish to explore the rest of Figma's shortcuts, press the question mark button from the bottom-left corner of the screen and go to Keyboard shortcuts or use the Control - Shift - ? Figma shortcut. To ungroup elements inside a group, use the Shift - Control - G keyboard shorcut. It makes it easier to organize and select multiple design elements with just one click. Grouping elements is a good practice when you're dealing with complex designs. Using this Figma shortcut you can easily group selected elements from your design. Use the bounding box to scale any frame and double click its name to rename it. You can select one of the preset sizes and add the frame to your design, or you can define your own custom size frame. Selecting the Frame tool from the toolbar or pressing the F hotkey will open a list with the most common screen sizes in the right sidebar. By default, your starting frame is white.

F is for FramesĪ Frame represents the area where your design is going to be drawn in Figma. Use the tools from the toolbar to adjust the path and when you finish, press Enter or the Done button in the toolbar.

Select the shape that you wish you edit and click the click the Edit Object button from the Toolbar or simply press Enter to switch to Edit mode. With Edit mode you can add, select or adjust the properties of individual points and lines from a vector shape. When nothing is selected, you can adjust the Background settings or explored the styles saved for the opened document. The Design tab from the right sidebar allows you to view, edit or remove the settings of a selected objects from your design.
#Figma tutorials how to#
Check out this tutorial if you wish to learn more about the power Figma components as you create this iPad game UI: How to Turbocharge Your Components with Figma Variants. When you edit the main component the rest of the instances modify simultaneously.Ĭomponents are an essential part of any Figma design system. A copy of this main component is called Instance. Once saved, that design becomes the Main Component.

Figma icons and any other type of layer or object can be saved as a Figma component. C is for ComponentsĬomponents are design elements that can be easily reused across your Figma designs. Layer Blur is the classic type of blur while Background Blur can be used to blur a specific section from your design. The two types of Blur effects that can be applied from the right sidebar are Layer Blur and Background Blur. B is for Blursīlurs are effects that can be applied to objects in Figma. Wanna learn more about Figma auto layout and also design something? Check out this tutorial and create an eCommerce cart design as you practice working with auto layout in Figma: Create a Shopping Cart Design with Figma Auto Layout. You can use this amazing feature to create buttons that resize according to their text, create lists or columns of elements that can be easily rearranged, or you can even nest auto layout frames inside other auto layout frames. Figma's auto layout feature allows you to apply dynamic frames that adjust to their contents.
