dev-SR / figma

• Figma
  • Basics of Figma tools
    • Creating Circle, lines with same proportions
    • Creating Shapes
    • Image PlaceHolder
    • Mask
    • Reuse Styles
    • Creating Components and Reusing Them
    • Constraining [applying limitation] Components
      • Groups vs Frame, Component
    • Rulers
    • Grid Layout
    • Auto Layout 🚀🚀🚀
    • Alignment, Distribution, & Tidy up Properties
    • Shadow and Blur Effects
  • ShortCut
    • Zoom and Pan
      • Zoom
      • Pan or Moving the canvas
    • Duplicate
    • 🚀🚀Direct Child Selection - Ctrl + Select 🌟🌟
    • 🚀🚀Micro Selection - Ctrl + Select 🌟🌟
    • 🚀🚀Batch Select Multiple Component - Shift + Select 🌟🌟
    • Search anything - Quick Action

Figma

Basics of Figma tools

Creating Circle, lines with same proportions

• press SHIFT then draw to preserve ratio:

Creating Shapes

• Pie, Ring with circle's Arc

Image PlaceHolder

• Placing Image

• Changing Image Quickly

Mask

• Use as Mask

Reuse Styles

Likewise, styles can also be created for Text,Effects and other component.

• Creating Style Hierarchy

• Quick DarkMode

Creating Components and Reusing Them

Instance can be detach from master components through Detach Instance option or Ctrl+Alt+B key

Constraining [applying limitation] Components

Groups vs Frame, Component

!!WATCH OUT: Constrain only works with Components or Frames

• Group have constrain relative to root frame/ArtBoard.
• Frames and Components work as independent container.

• constraining frame

Rulers

• Shift ⇧R

Grid Layout

Auto Layout 🚀🚀🚀

• Auto Layout Shortcut: Select element then press Shift + A

Alignment, Distribution, & Tidy up Properties

Shadow and Blur Effects

ShortCut

Zoom and Pan

Zoom

• The standard zoom commands are accessed with Ctrl+(+), Ctrl+(-) , Ctrl + Mouse Wheel

Those commands will just focus in on the center of your current view. But there are some other handy zoom commands available:

• Shift ⇧2 will zoom to the current selection
• Shift ⇧1 will zoom to show the whole canvas

Finally, here’s an extra handy zoom tip to move between Frames without having to zoom in and out the whole time:

• N will zoom to the next Frame
• Shift ⇧N will zoom to the previous Frame

Pan or Moving the canvas

• Hold Spacebar to Pan or Move Canvas

Duplicate

• Hold ALT and Drag to duplicate or,
• With current shape selected, simply hit CTRL-D to duplicate the shape. You can also CTRL-C and CTRL-V (copy and paste) for the same behavior.

🚀🚀Direct Child Selection - Ctrl + Select 🌟🌟

• Hold Ctrl and Select Child to select Child element directly without double click

🚀🚀Micro Selection - Ctrl + Select 🌟🌟

• Hold Ctrl and Drag to select everything Under the cursor only, avoid parent components

🚀🚀Batch Select Multiple Component - Shift + Select 🌟🌟

• Hold Shift and Select Multiple Component at once

Search anything - Quick Action

• Right Click > Quick Actions
• Ctrl+/