Figma

Is a design Software that let you edit vector

Notes

Definition

• Frames
  • Own dimensions & properties
  • Container to place shape, text, images
  • Presets can be used
  • Constraints can be set up to let thing moves around
  • Grids can be used
  • Clip helps to shows or not items that overflow
• Groups
  • Sum of parts, no properties
• Objects properties
  • Fill
  • Stroke → Lines
• Auto Layout
  • Similar to CSS Flexbox
• Pen tools
  • Create vector network
  • Press Enter to finish the form

Components

• Assets can be shared as a library
  • Copied assets benefits from the main assets change
• Component can be created from the top bar

Style

• Reusable properties with common set of properties
• Usable for text, shades, ...
• Can be overriden

Hotkeys

• Space to move around
• Alt to show measuring grids
• Ctrl+P to open the Command Palette
• Zoom
  • Shift+2 to zoom to selection
• While having object
  • Shift to constraint ratio
  • Alt to duplicate
    • Ctrl+D to duplicate further
  • Space to not auto-layout

Prototype

• Double-click to select the wished component
• When creating a connection, last settings are used

Scrolling

• Items can have scroll constraints