Cara Menggunakan Figma untuk Desain UI/UX

- Gratis untuk personal use
- Browser-based (cross-platform)
- Real-time collaboration
- Powerful prototyping
- Extensive plugin ecosystem
- Developer handoff features

1. Kunjungi figma.com
2. Klik Sign up
3. Daftar dengan Google atau email
4. Pilih Free plan
5. Mulai desain!

Left Panel:
- Layers (daftar objek)
- Assets (komponen)
- Pages (halaman)

Canvas:
- Area kerja utama
- Zoom: Scroll atau Ctrl+scroll
- Pan: Space + drag

Right Panel:
- Design tab (styling)
- Prototype tab (interaksi)
- Inspect tab (developer info)

Toolbar (top):
- Selection tools
- Shape tools
- Pen tool
- Text tool
- Frame tool

Shortcut: F

Frame = Container/Artboard
- Preset sizes (iPhone, Desktop, etc.)
- Custom size
- Auto layout
- Constraints

Tips:
- Use frames untuk setiap screen
- Nested frames untuk components
- Frame > Rectangle untuk containers

Shortcuts:
R - Rectangle
O - Ellipse
L - Line
P - Pen (custom shape)

Properties:
- Fill (warna)
- Stroke (border)
- Corner radius
- Effects (shadow, blur)

Shortcut: T

Properties:
- Font family
- Size
- Weight
- Line height
- Letter spacing
- Alignment
- Fill color

Tips:
- Gunakan auto width/height
- Set text styles untuk konsistensi

Fill options:
- Solid color
- Linear gradient
- Radial gradient
- Angular gradient
- Diamond gradient
- Image fill

Cara:
1. Select objek
2. Klik Fill di right panel
3. Pilih warna atau gradient

Types:
- Drop shadow
- Inner shadow
- Layer blur
- Background blur

Shadow settings:
- X offset
- Y offset
- Blur
- Spread
- Color + opacity

Buat reusable styles:
1. Style warna/text/effect
2. Klik 4-dot icon di property
3. Klik + untuk create style
4. Beri nama (misal: Primary/500)

Gunakan styles:
1. Select objek
2. Klik style icon
3. Pilih style yang dibuat

Shortcut: Ctrl+Alt+K

Steps:
1. Design element (button, card, etc.)
2. Select element
3. Ctrl+Alt+K atau right-click > Create component
4. Component ditandai dengan ◆ icon

Main Component = Master
Instance = Copy yang linked

Buat variants untuk states:

Button variants:
- State: Default, Hover, Active, Disabled
- Size: Small, Medium, Large
- Type: Primary, Secondary, Outline

Steps:
1. Select component
2. Klik "+" di Variants
3. Add variant
4. Edit setiap variant
5. Name dengan format: State=Default, Size=Medium

Types:
- Boolean (show/hide)
- Instance swap (icon, avatar)
- Text (editable text)

Example:
Button component:
- Show Icon: Boolean
- Icon: Instance swap (icon library)
- Label: Text property

Shortcut: Shift+A

Auto layout:
- Automatic spacing
- Responsive resizing
- Padding control
- Direction (horizontal/vertical)

Direction:
- Horizontal (row)
- Vertical (column)
- Wrap

Spacing:
- Gap between items
- Padding (top, right, bottom, left)

Alignment:
- Horizontal: Left, Center, Right, Space between
- Vertical: Top, Center, Bottom

Resizing:
- Hug contents
- Fill container
- Fixed

Tips:
1. Use auto layout untuk containers
2. Set "Fill container" untuk responsive width
3. Set "Hug contents" untuk content-based size
4. Use min/max width constraints
5. Combine dengan constraints

Steps:
1. Pilih Prototype tab
2. Select element (button)
3. Drag connection ke target frame
4. Set trigger dan animation

Triggers:
- On click
- On hover
- On drag
- While pressing
- Mouse enter/leave
- After delay

Types:
- Instant
- Dissolve
- Smart animate
- Move in/out
- Push
- Slide in/out

Smart Animate:
- Matches layers by name
- Animates position, size, rotation
- Great untuk micro-interactions

Shortcut: Ctrl+Alt+Enter

Options:
- Device frame
- Background color
- Starting frame
- Flow starting point

Cara share:
1. Klik Share button (top right)
2. Invite dengan email
3. Set permission (view/edit)
4. Copy link

Permissions:
- Can view: lihat saja
- Can edit: bisa edit
- Owner: full control

Shortcut: C

Features:
- Pin comment ke specific location
- Reply threads
- @mention team members
- Mark as resolved
- View all comments

Access:
1. File name dropdown
2. "Show version history"

Features:
- Auto-save versions
- Named versions
- Restore previous versions
- Compare versions

Untuk developers:
1. Share file dengan dev
2. Dev buka file
3. Pilih Inspect tab

Info available:
- Dimensions
- Colors (hex, rgb)
- Typography
- Spacing
- CSS code
- iOS/Android code

Export options:
1. Select element
2. Scroll ke Export di right panel
3. Add export setting

Formats:
- PNG (raster)
- JPG (raster, smaller)
- SVG (vector)
- PDF (document)

Settings:
- 1x, 2x, 3x, 4x (retina)
- Suffix (_@2x, etc.)

Icons:
- Iconify
- Feather Icons
- Material Design Icons

Images:
- Unsplash
- Pexels
- Lorem Ipsum

Utilities:
- Contrast
- Auto Flow
- Content Reel
- Figma to Code

Steps:
1. Menu > Plugins > Browse plugins
2. Search plugin
3. Install
4. Access via Ctrl+/ atau right-click

Selection:
V - Move tool
K - Scale tool
Ctrl+A - Select all
Ctrl+Shift+A - Deselect

Create:
F - Frame
R - Rectangle
O - Ellipse
L - Line
T - Text
P - Pen

Edit:
Ctrl+D - Duplicate
Ctrl+G - Group
Ctrl+Shift+G - Ungroup
Ctrl+Alt+K - Create component
Shift+A - Auto layout

View:
Ctrl+1 - Zoom to 100%
Shift+1 - Zoom to fit
Ctrl++ - Zoom in
Ctrl+- - Zoom out
Space+drag - Pan