materi tentang figma

1. FIGMA 101:
ALL ABOUT UI DESIGN & PROTOTYPING
Moh. Salman Alfarisi, MMSI

2. @Mohsalfa Product Design Introduction: Figma 101
Pengenalan Figma
02

3. @Mohsalfa Product Design Introduction: Figma 101
Kenapa
Menggunakan
Figma?

8. @Mohsalfa Product Design Introduction: Figma 101
Alasan Saya Menggunakan Figma
Dimulai dari Gratis (Personal)
Multi Platform (Web browser, mac, windows, hingga app di smartphone)
Fitur Kolaborasi Online (Multi User Editing & Commenting)
Community Yang Inspiratif
Banyak Plugins & Assets Untuk Mempercepat Design
All-In-One Design Tool

9. @Mohsalfa Product Design Introduction: Figma 101
Semua Bisa
Didesign
Dalam Figma

10. @Mohsalfa Product Design Introduction: Figma 101
Social Media Post Design

11. @Mohsalfa Product Design Introduction: Figma 101
Illustration

12. @Mohsalfa Product Design Introduction: Figma 101
NFT Avatar Design

13. @Mohsalfa Product Design Introduction: Figma 101
3D Design (with Plugins)

14. @Mohsalfa Product Design Introduction: Figma 101
Interface Figma

16. 3.
Canvas
1 Main Menu
4. Insp-
ector
Panel
2.
Page,
Layer &
Assests

17. @Mohsalfa Product Design Introduction: Figma 101
Dasar Figma

18. @Mohsalfa Product Design Introduction: Figma 101
Dimulai Dengan Membuat Frame (F)

19. @Mohsalfa Product Design Introduction: Figma 101
Sesuaikan Frame Sesuai Kebutuhan

20. @Mohsalfa Product Design Introduction: Figma 101
Memasukan Teks (T)

21. @Mohsalfa Product Design Introduction: Figma 101
Membuat Retangle (R)

22. @Mohsalfa Product Design Introduction: Figma 101
Memasukan Image Kedalam Retangle (Mask)

23. @Mohsalfa Product Design Introduction: Figma 101
Ulangi Proses 1 - 4 Untuk Membuat UI

24. @Mohsalfa Product Design Introduction: Figma 101
@Dwinawan

25. @Mohsalfa Product Design Introduction: Figma 101
Step by Step UI
Design di dalam
Figma

26. @Mohsalfa Product Design Introduction: Figma 101
Menentukan Styling

27. @Mohsalfa Product Design Introduction: Figma 101
Dimulai Dengan Membuat Design Component

28. @Mohsalfa Product Design Introduction: Figma 101
Menggunakan Auto Layout

29. @Mohsalfa Product Design Introduction: Figma 101
Menerapkan Component

30. @Mohsalfa Product Design Introduction: Figma 101
Hands-on Figma
+ Tips & Trick
03
bit.ly/figma101workshop

31. @Mohsalfa Product Design Introduction: Figma 101
Download & Login Ke Figma

32. @Mohsalfa Product Design Introduction: Figma 101
Figma User Dashboard (Setelah Login)

33. @Mohsalfa Product Design Introduction: Figma 101
Setting New Frames (Sesuai Kebutuhan)

34. @Mohsalfa Product Design Introduction: Figma 101
Membuat Grid & Layout Columns

35. @Mohsalfa Product Design Introduction: Figma 101
Mengenal Layers & Groups

36. @Mohsalfa Product Design Introduction: Figma 101
Vector Shape

37. @Mohsalfa Product Design Introduction: Figma 101
Images

38. @Mohsalfa Product Design Introduction: Figma 101
Typography

39. @Mohsalfa Product Design Introduction: Figma 101
Membuat Colour Styles

40. @Mohsalfa Product Design Introduction: Figma 101
Membuat Text Styles

41. @Mohsalfa Product Design Introduction: Figma 101
Membuat Effect Style

42. @Mohsalfa Product Design Introduction: Figma 101
Membuat Grid Style

43. @Mohsalfa Product Design Introduction: Figma 101
Membuat Reusable Components

44. @Mohsalfa Product Design Introduction: Figma 101
Mengenal Components

45. @Mohsalfa Product Design Introduction: Figma 101
Swapping & Nesting Components

46. @Mohsalfa Product Design Introduction: Figma 101
Overwrites Components

47. @Mohsalfa Product Design Introduction: Figma 101
Merubah Layers Menjadi Auto-Layout

48. @Mohsalfa Product Design Introduction: Figma 101
Nested Auto Layout

49. @Mohsalfa Product Design Introduction: Figma 101
Setting Up Prototype

50. @Mohsalfa Product Design Introduction: Figma 101
Connecting Screens

51. @Mohsalfa Product Design Introduction: Figma 101
Overflow Behaviours

52. @Mohsalfa Product Design Introduction: Figma 101
Sharing With Other (Developers View)

53. @Mohsalfa Product Design Introduction: Figma 101
Exporting Assets
@Christine Vallaure

54. @Mohsalfa Product Design Introduction: Figma 101
Favorite
Figma Plugins

55. @Mohsalfa Product Design Introduction: Figma 101
Content Reel by Microsoft

56. @Mohsalfa Product Design Introduction: Figma 101
Unsplash by Unsplash

57. @Mohsalfa Product Design Introduction: Figma 101
Iconify by Vjacheslav Trushkin

58. @Mohsalfa Product Design Introduction: Figma 101
Brandfetch by Brandfetch

59. @Mohsalfa Product Design Introduction: Figma 101
Charts by Sam Mason de Caires

60. @Mohsalfa Product Design Introduction: Figma 101
Autoflow by Coinbase

61. @Mohsalfa Product Design Introduction: Figma 101
Color Contrast Checker by Tiffany Chen

62. @Mohsalfa Product Design Introduction: Figma 101
Similayer by David Williames

63. @Mohsalfa Product Design Introduction: Figma 101
Roto by Carlo Jörges

64. @Mohsalfa Product Design Introduction: Figma 101
Figmotion

65. Terima Kasih