# Figma Tour

:::info
Figma is an collaborative online design tool.
https://www.figma.com/

:::

## UI

1. top side tool bar
:::success
:::
- Menu
- Move tools -> select, move, scale
- Region tools -> place a frame (like a paper), place a slice (an export area)
- Shape tools -> draw shape & place image
- Draw tools -> bezier curve, pen, pencil
- Text -> place text
- Hand tool -> move whole page
- Add comment
2. middle top tools (show when select an object)
:::success
:::
- Edit object
- Create component -> make objects into component, let you reuse them easier
- Use as mask -> mask other object, should use with grouping

3. left side layers & assets
:::success
:::
- Layers -> show all objects in this page
- Assets -> show all components in this page

4. right side content options
:::success
:::
- Design -> object settings
- Prototype -> create demo
- Inspect -> properties & codes

## controls

- zooming -> Ctrl/Cmd + Mouse scroll
- moving (hand tool) -> Space + Mouse dragging
- multiple select -> Shift + Mouse click
- duplicate object -> Alt + Dragging

## try it!

https://www.figma.com/file/MmYWP8m1dVM4ceWxXiRaLF/AiRRR?node-id=206%3A14