This document provides an introduction to Figma, a popular graphic and UI design tool. It discusses why designers use Figma, including that it is free for personal use, works across platforms, allows for online collaboration, and has a large community. The document then demonstrates some of the types of designs that can be created in Figma, such as social media posts, illustrations, 3D designs, and interfaces. It also provides step-by-step instructions for using basic Figma features like frames, text, and shapes, as well as more advanced components like auto-layout, prototyping, and sharing designs with other users. Finally, it lists some popular Figma plugins that can help speed up the design process.

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