Build Customer Demos That Convert! Magic Patterns Tutorial

1
00:00:00,000 --> 00:00:03,326
วันนี้เราจะมาใช้ AI agent (เอเจนต์เอไอ)

2
00:00:03,326 --> 00:00:07,164
ที่ออกแบบ demo app (แอปสาธิต) ให้ได้อัตโนมัติ

3
00:00:07,164 --> 00:00:11,769
และเป็นแบบที่แปลงลูกค้าให้กลายเป็นยอดขายได้จริงนะครับ.

4
00:00:11,769 --> 00:00:15,180
เพราะถ้าคุณเคยทำงานสายขาย ในฐานะ founder

5
00:00:15,180 --> 00:00:18,080
(ผู้ก่อตั้ง) หรือทำงานด้าน product

6
00:00:18,080 --> 00:00:20,894
คุณคงเคยเจอสถานการณ์แบบนี้มาก่อน.

7
00:00:20,894 --> 00:00:24,988
ลูกค้าขอ demo แต่คุณไม่มีสิ่งที่เขาต้องการเป๊ะ ๆ

8
00:00:24,988 --> 00:00:26,085
แล้วจู่ ๆ

9
00:00:26,085 --> 00:00:31,287
คุณก็ต้องใช้เวลาหลายสัปดาห์ทำ mockup (แบบจำลอง) ขึ้นมาคร่าว ๆ

10
00:00:31,287 --> 00:00:36,490
ให้ดูคล้ายสิ่งที่เขาอยากได้ สุดท้ายก็โดนสั่งให้ทำใหม่ทั้งหมด.

11
00:00:36,490 --> 00:00:39,389
แต่ตอนนี้คุณทำเสร็จได้ในไม่กี่นาที

12
00:00:39,389 --> 00:00:40,839
ไม่ใช่เป็นสัปดาห์

13
00:00:40,839 --> 00:00:44,677
และทำได้ในระหว่างประชุมจริงกับลูกค้าด้วยครับ.

14
00:00:44,677 --> 00:00:52,182
ใน tutorial (บทเรียน) นี้ เราจะใช้ Magic Patterns ซึ่งเป็นเครื่องมือที่บริษัทอย่าง KPMG,

15
00:00:52,182 --> 00:00:57,299
DoorDash และอีกหลายแห่งใช้กัน เพื่อสร้าง demo app ที่สมจริง.

16
00:00:57,299 --> 00:01:00,540
เป้าหมายง่ายมากครับ. แทนที่จะใช้เวลา 2

17
00:01:00,540 --> 00:01:04,207
สัปดาห์สร้าง mockup app เราจะสร้าง feedback

18
00:01:04,207 --> 00:01:08,130
loop (วงจรรับฟังความคิดเห็น) แบบ 2 ชั่วโมงแทน.

19
00:01:08,130 --> 00:01:11,626
พอจบวิดีโอนี้ คุณจะเข้าใจวิธีใช้ AI agent

20
00:01:11,626 --> 00:01:13,929
สร้างหน้าจอแอปได้ตามต้องการ

21
00:01:13,929 --> 00:01:17,170
แปลงหน้าจอเหล่านั้นให้เป็น interactive

22
00:01:17,170 --> 00:01:19,984
prototype (โปรโตไทป์แบบโต้ตอบได้)

23
00:01:19,984 --> 00:01:23,396
และจัดแพ็กเป็น demo พร้อมส่งมอบให้ลูกค้า

24
00:01:23,396 --> 00:01:25,187
ที่ช่วยปิดดีลได้จริง.

25
00:01:25,187 --> 00:01:28,513
แล้วเราจะรออะไรอยู่ล่ะครับ. ไปทำกันเลย.

26
00:01:28,513 --> 00:01:34,824
มาคลิกที่ลิงก์ในคำอธิบายใต้วิดีโอกันก่อน เพื่อให้ทุกคนเริ่มจากจุดเดียวกัน.

27
00:01:34,824 --> 00:01:40,452
ในส่วนนี้ ผมจะแจก prompt (คำสั่ง) ที่ผมใช้สร้าง demo app ให้ดูกัน.

28
00:01:40,452 --> 00:01:45,314
เราจะสร้าง demo app ให้กับ startup (สตาร์ทอัพ) แห่งหนึ่ง.

29
00:01:45,314 --> 00:01:51,710
ลองนึกภาพว่าคุณกำลังนั่งประชุมอยู่กับ founder ของบริษัทเช่าบ้านพักตากอากาศ.

30
00:01:51,710 --> 00:01:58,362
ตอนนี้เขามีที่พักอยู่สองสามแห่ง และใช้ Airbnb หรือ Booking.com ในการทำการตลาด.

31
00:01:58,362 --> 00:02:01,517
แต่เราอยากให้เขาหันมาใช้บริการของเรา.

32
00:02:01,517 --> 00:02:03,564
งั้นไปเริ่มกันเลยดีกว่า.

33
00:02:03,564 --> 00:02:06,208
ผมไม่ชอบเสียเวลาเปล่า ๆ นะครับ.

34
00:02:06,208 --> 00:02:10,387
ขอแค่ให้แน่ใจว่าคุณใช้ระบบเดียวกันกับที่ผมใช้อยู่

35
00:02:10,387 --> 00:02:12,348
ซึ่งผมใช้แบบค่าเริ่มต้น

36
00:02:12,348 --> 00:02:14,566
แต่ก็มีให้เลือกอีกหลายแบบ.

37
00:02:14,566 --> 00:02:20,024
คุณยังสร้าง demo จาก screenshot (ภาพหน้าจอ) ได้ด้วย ซึ่งเจ๋งมาก.

38
00:02:20,024 --> 00:02:21,985
เดี๋ยวเราจะดูกันทีหลัง.

39
00:02:21,985 --> 00:02:26,335
คุณ import (นำเข้า) จาก Figma หรือจากเว็บไซต์ก็ได้.

40
00:02:26,335 --> 00:02:29,320
งั้นช่วยบันทึก prompt นี้ไว้นะครับ.

41
00:02:29,320 --> 00:02:35,119
นี่คือ prompt ที่ผมแนะนำให้ทุกคนบันทึกไว้ แล้วค่อยปรับแก้ตามต้องการ.

42
00:02:35,119 --> 00:02:40,151
ขั้นตอนที่หนึ่งตรงนี้ เรากำลังกำหนด role (บทบาท) ให้กับ AI.

43
00:02:40,151 --> 00:02:42,965
การกำหนดบทบาทเกิดขึ้นในบรรทัดแรก.

44
00:02:42,965 --> 00:02:48,338
ทำไมมันถึงสำคัญ ก็เพราะ AI ตอบสนองแตกต่างกันไปตามบริบทของบทบาท.

45
00:02:48,338 --> 00:02:55,331
ถ้ากำหนดให้เป็น product designer (นักออกแบบผลิตภัณฑ์) เราก็จะได้ความสมจริงด้าน UX.

46
00:02:55,331 --> 00:02:58,572
ถ้าเป็น sales engineer (วิศวกรฝ่ายขาย)

47
00:02:58,572 --> 00:03:02,154
ก็จะได้ความน่าเชื่อถือทางเทคนิค และถ้าเป็น

48
00:03:02,154 --> 00:03:05,736
growth strategist (นักวางกลยุทธ์การเติบโต)

49
00:03:05,736 --> 00:03:08,636
ก็จะได้แนวคิดที่เน้นการแปลงยอดขาย.

50
00:03:08,636 --> 00:03:13,070
ต่อไป เรามาดูส่วน constraints (ข้อจำกัด) ตรงนี้ครับ.

51
00:03:13,070 --> 00:03:20,405
เราจะเพิ่มเงื่อนไขอย่างเช่น ทำออกมาให้ดูสมจริง เพื่อกันไม่ให้ได้ผลงานเลื่อนลอยไร้สาระ.

52
00:03:20,405 --> 00:03:28,336
เรายังกำหนด pain point (จุดเจ็บปวดของลูกค้า) ลงไปด้วย ซึ่งจะบังคับให้ระบุรายละเอียดได้ตรงจุด.

53
00:03:28,336 --> 00:03:31,662
เราบอกให้เน้น ROI (ผลตอบแทนจากการลงทุน)

54
00:03:31,662 --> 00:03:34,135
ให้ชัดเจน เพราะ CFO (ซีเอฟโอ)

55
00:03:34,135 --> 00:03:37,462
ไม่ได้ซื้อที่ฟีเจอร์ แต่ซื้อที่ผลลัพธ์.

56
00:03:37,462 --> 00:03:44,796
เรายังจัดโครงสร้างเพื่อการขาย เพื่อให้ flow (ลำดับขั้นตอน) รองรับการนำเสนอ demo สดได้.

57
00:03:44,796 --> 00:03:49,742
และสุดท้าย เราเพิ่มข้อความที่โน้มน้าวใจในโทนการนำเสนอด้วย.

58
00:03:49,742 --> 00:03:50,839
เยี่ยมมาก.

59
00:03:50,839 --> 00:03:54,506
ต่อไป เราจะมาทำความเข้าใจลูกค้าเป้าหมายกัน.

60
00:03:54,506 --> 00:03:59,112
ตรงนี้สำคัญ เพราะการระบุรายละเอียดอย่างเช่นอุตสาหกรรม.

61
00:03:59,112 --> 00:04:02,523
อุตสาหกรรมแต่ละแบบใช้คำศัพท์ ตัวชี้วัดบน

62
00:04:02,523 --> 00:04:06,020
dashboard (แดชบอร์ด) และภาษาภาพที่ต่างกัน

63
00:04:06,020 --> 00:04:09,858
คุณต้องอยู่ในวงในให้ได้ เพราะรายละเอียดเล็ก ๆ

64
00:04:09,858 --> 00:04:12,842
น้อย ๆ ทุกอย่างมีผลต่อการปิดการขาย.

65
00:04:12,842 --> 00:04:14,548
ขนาดของบริษัทลูกค้า.

66
00:04:14,548 --> 00:04:18,471
สตาร์ทอัพกับองค์กรใหญ่ให้ความสำคัญต่างกัน เช่น

67
00:04:18,471 --> 00:04:21,200
สตาร์ทอัพจะสนใจความเร็ว ความง่าย

68
00:04:21,200 --> 00:04:23,418
และต้นทุนด้านข้อมูลที่ต่ำ.

69
00:04:23,418 --> 00:04:26,061
ส่วนองค์กรใหญ่จะสนใจความปลอดภัย

70
00:04:26,061 --> 00:04:28,705
การเชื่อมต่อระบบ (integrations)

71
00:04:28,705 --> 00:04:32,543
การปฏิบัติตามข้อกำหนด (compliance) และอื่น ๆ.

72
00:04:32,543 --> 00:04:33,908
ผู้ตัดสินใจหลัก.

73
00:04:33,908 --> 00:04:37,319
คนแต่ละบทบาทซื้อสินค้าด้วยเหตุผลต่างกัน.

74
00:04:37,319 --> 00:04:44,483
ถ้าคุณคุยกับ head of ops (หัวหน้าฝ่ายปฏิบัติการ) ให้เน้นประสิทธิภาพและระบบอัตโนมัติ.

75
00:04:44,483 --> 00:04:49,856
แต่ถ้าคุยกับ CFO ให้เน้นผลตอบแทนจากการลงทุนและการประหยัดต้นทุน.

76
00:04:49,856 --> 00:04:53,182
จุดเจ็บปวดที่ใหญ่ที่สุด อันนี้สำคัญมาก.

77
00:04:53,182 --> 00:04:59,919
demo ส่วนใหญ่ล้มเหลว เพราะโชว์แต่ความสามารถของสินค้า แทนที่จะแก้ปัญหาให้ลูกค้า.

78
00:04:59,919 --> 00:05:01,710
อย่าทำแบบนั้นเด็ดขาด.

79
00:05:01,710 --> 00:05:05,121
ปัญหาต่างหากที่สร้างความเร่งด่วน. ถ้า AI

80
00:05:05,121 --> 00:05:08,874
ไม่ยึดโยงกับ pain point แล้วไปโชว์แต่ฟีเจอร์

81
00:05:08,874 --> 00:05:10,750
มันก็ไม่ช่วยลดแรงกดดัน

82
00:05:10,750 --> 00:05:13,053
และพลาดเป้าหมายโดยสิ้นเชิง.

83
00:05:13,053 --> 00:05:16,208
การระบุเครื่องมือที่บริษัทนั้นใช้อยู่

84
00:05:16,208 --> 00:05:19,449
จะช่วยให้คุณวางตำแหน่งทางการแข่งขันได้

85
00:05:19,449 --> 00:05:22,263
มีจุดเชื่อมต่อสำหรับการ integrate

86
00:05:22,263 --> 00:05:23,543
(เชื่อมต่อระบบ)

87
00:05:23,543 --> 00:05:28,063
และยังทำให้ลูกค้าอุ่นใจว่าไม่ต้องเปลี่ยนระบบทุกอย่าง.

88
00:05:28,063 --> 00:05:32,156
นี่เป็นจุดที่ช่วยเพิ่มอัตราการปิดการขายได้ดีมาก.

89
00:05:32,156 --> 00:05:35,141
และแน่นอน ต้องระบุเป้าหมายของ demo.

90
00:05:35,141 --> 00:05:36,932
ทำไมถึงจำเป็นล่ะครับ.

91
00:05:36,932 --> 00:05:41,793
ก็เพราะ demo ที่ไม่มีวัตถุประสงค์ชัดเจนจะลอยเรื่อยเปื่อย.

92
00:05:41,793 --> 00:05:47,507
เป้าหมายคือจะจอง pilot (โปรเจกต์นำร่อง) หรือจะปิดสัญญา อะไรก็ว่าไป.

93
00:05:47,507 --> 00:05:51,260
สุดท้าย เราสามารถเพิ่มโครงสร้างของ demo ได้.

94
00:05:51,260 --> 00:05:54,245
ซึ่งก็คือการตั้งชื่อแอป เพิ่ม value

95
00:05:54,245 --> 00:05:57,400
proposition (ข้อเสนอคุณค่า) ที่ชัดเจน

96
00:05:57,400 --> 00:06:00,470
กำหนดหน้าจอหลักของแอป 5 ถึง 7 หน้าจอ

97
00:06:00,470 --> 00:06:03,455
แต่ละหน้าจอทำหน้าที่อะไร และอื่น ๆ.

98
00:06:03,455 --> 00:06:07,378
และในขั้นตอนสุดท้าย เราจะโฟกัสที่เรื่องการขาย.

99
00:06:07,378 --> 00:06:11,216
เราจะเพิ่มเงื่อนไขให้ demo โชว์คุณค่าภายใน 30

100
00:06:11,216 --> 00:06:14,969
วินาทีแรก มีความชัดเจนแบบก่อนกับหลัง (before

101
00:06:14,969 --> 00:06:17,698
versus after) ให้เห็น ROI ชัดเจน

102
00:06:17,698 --> 00:06:21,706
ลดความเสี่ยงที่ลูกค้ารู้สึกว่าการนำไปใช้ยุ่งยาก

103
00:06:21,706 --> 00:06:22,803
และแน่นอน

104
00:06:22,803 --> 00:06:26,555
ต้องให้ความรู้สึกว่าเป็นของเฉพาะลูกค้ารายนี้

105
00:06:26,555 --> 00:06:29,114
ไม่ใช่ของตายตัวที่ส่งให้ทุกคน.

106
00:06:29,114 --> 00:06:31,417
เอาล่ะ นี่คือ prompt ของผม.

107
00:06:31,417 --> 00:06:33,719
ช่วยบันทึกไว้ แล้วไปกันเลย.

108
00:06:33,719 --> 00:06:35,340
มาลองกรอกข้อมูลกัน.

109
00:06:35,340 --> 00:06:40,627
กำหนดว่าอุตสาหกรรมของลูกค้าคือบ้านพักตากอากาศ (holiday homes).

110
00:06:40,627 --> 00:06:43,783
เป็นสตาร์ทอัพ. ผมกำลังคุยกับ founder.

111
00:06:43,783 --> 00:06:50,264
จุดเจ็บปวดที่ใหญ่ที่สุดคือผู้ใช้ไม่เข้าใจถึงข้อดี เมื่อเทียบกับการจองโรงแรม.

112
00:06:50,264 --> 00:06:52,823
เครื่องมือที่บริษัทนี้ใช้อยู่.

113
00:06:52,823 --> 00:06:59,901
ผมจะบอกว่าตอนนี้เขาใช้ Airbnb และอาจจะใช้ Booking.com รวมถึง Excel สำหรับจัดการงาน.

114
00:06:59,901 --> 00:07:04,677
และเป้าหมายของ demo สมมติว่าเพื่อให้เขาหันมาใช้แอปของผม.

115
00:07:04,677 --> 00:07:08,174
เอาล่ะ เยี่ยมมาก. ปล่อยทุกอย่างไว้แบบนี้.

116
00:07:08,174 --> 00:07:11,415
แล้วให้ AI คิดชื่อแอปเอง แล้วไปกันเลย.

117
00:07:11,415 --> 00:07:15,082
ตอนนี้ Magic Patterns กำลังทำงานของมันแล้ว.

118
00:07:15,082 --> 00:07:16,361
มันกำลังวางแผน.

119
00:07:16,361 --> 00:07:19,431
ดีที่เราได้เห็นว่ามันทำอะไรอยู่บ้าง.

120
00:07:19,431 --> 00:07:23,013
แชทจะแสดงผลเป็นภาษาที่มนุษย์อ่านเข้าใจได้.

121
00:07:23,013 --> 00:07:26,254
มันยังสร้างโค้ดด้วย ซึ่งเราจะได้ดูกัน.

122
00:07:26,254 --> 00:07:28,983
และเรายังแก้ไขแบบเห็นภาพได้ด้วย.

123
00:07:28,983 --> 00:07:32,650
เอาล่ะ ได้ผลลัพธ์แล้ว. นี่คือทางเลือกสำหรับ

124
00:07:32,650 --> 00:07:36,147
founder บริษัทบ้านพักตากอากาศ ที่จะใช้แทน

125
00:07:36,147 --> 00:07:39,985
Airbnb และ Booking.com ซึ่งคิดค่าธรรมเนียมถึง

126
00:07:39,985 --> 00:07:43,396
20%. แน่นอนว่านี่แก้ปัญหาใหญ่ที่ founder

127
00:07:43,396 --> 00:07:45,955
อาจเจอได้ และเขาอาจเลือกคุณแทน

128
00:07:45,955 --> 00:07:48,598
เพราะคุณเสนอทางเลือกที่ถูกกว่า.

129
00:07:48,598 --> 00:07:50,730
โน้มน้าวเขาได้ด้วยจุดนี้.

130
00:07:50,730 --> 00:07:56,871
และถ้ายังไม่พอ คุณก็ไปต่อได้ด้วยการโชว์ว่าลูกค้าของเขาจะได้เห็นอะไรบ้าง.

131
00:07:56,871 --> 00:08:01,220
เช่น ตรงนี้คุณจะเห็นที่พักของบริษัทบ้านพักตากอากาศ.

132
00:08:01,220 --> 00:08:04,376
มาดูรายละเอียดของที่พักกัน. ดูดีแล้ว.

133
00:08:04,376 --> 00:08:09,322
ตรงนี้คือ Villa Serena และเหตุผลว่าทำไมที่นี่ดีกว่าโรงแรม.

134
00:08:09,322 --> 00:08:12,648
นั่นคือหนึ่งใน pain point ที่เขาพูดถึง.

135
00:08:12,648 --> 00:08:15,719
เห็นชัดเจนว่าทำไมที่นี่ดีกว่าโรงแรม.

136
00:08:15,719 --> 00:08:21,688
เรากำลังตอบโจทย์จุดเจ็บปวดที่ลูกค้าอาจพูดถึงในการประชุมของคุณได้ตรง ๆ.

137
00:08:21,688 --> 00:08:25,441
เยี่ยมมาก. แน่นอนว่า คุณดูโค้ดได้ถ้าเขาสนใจ.

138
00:08:25,441 --> 00:08:26,550
มันง่ายมาก ๆ.

139
00:08:26,550 --> 00:08:32,861
แค่คลิกตรงนี้ คุณจะเห็น component (คอมโพเนนต์) ทั้งหมดที่ประกอบกันเป็นแอป.

140
00:08:32,861 --> 00:08:35,504
คุณจะแก้ไขในนี้ก็ได้ ถ้าอยากทำ.

141
00:08:35,504 --> 00:08:37,807
หรือจะแก้ไขแบบเห็นภาพก็ได้.

142
00:08:37,807 --> 00:08:42,583
เช่น ถ้าคุณอยากเปลี่ยนอะไรสักอย่าง คุณระบุได้ละเอียดมาก.

143
00:08:42,583 --> 00:08:45,227
แทบจะเปลี่ยนอะไรก็ได้ตรงนี้เลย.

144
00:08:45,227 --> 00:08:47,444
คุณเปลี่ยนระยะห่างได้ด้วย.

145
00:08:47,444 --> 00:08:51,197
แค่คลิกเลือกแต่ละ element (องค์ประกอบ) ก็พอ.

146
00:08:51,197 --> 00:08:53,926
ง่ายมาก ๆ. แล้วก็กดบันทึกได้เลย.

147
00:08:53,926 --> 00:08:59,810
ไม่เพียงเท่านั้น คุณยังดูได้ว่าแอปนี้เป็นอย่างไรบนแท็บเล็ตหรือมือถือ.

148
00:08:59,810 --> 00:09:02,625
และยัง publish (เผยแพร่) ได้ด้วย.

149
00:09:02,625 --> 00:09:09,532
เผยแพร่ไปยัง custom domain (โดเมนเฉพาะ) หรือแชร์เพื่อให้คนอื่นเข้ามาดูร่วมกันได้.

150
00:09:09,532 --> 00:09:12,859
ตอนนี้ใครที่มีลิงก์ก็เปิดดูได้. เยี่ยม.

151
00:09:12,859 --> 00:09:15,758
พอใจกับผลลัพธ์นี้แล้ว ไปต่อกันเลย.

152
00:09:15,758 --> 00:09:18,828
นี่คือวิธีสร้าง demo app จาก prompt.

153
00:09:18,828 --> 00:09:21,302
ต่อไป มาดูฟีเจอร์อื่นกันบ้าง.

154
00:09:21,302 --> 00:09:25,481
ในส่วนนี้ ผมจะสาธิตวิธีสร้าง demo จาก screenshot.

155
00:09:25,481 --> 00:09:29,574
คือเราจะนำภาพหนึ่งภาพมาแปลงเป็นโค้ดที่ใช้งานได้.

156
00:09:29,574 --> 00:09:30,671
ไปดูกัน.

157
00:09:30,671 --> 00:09:37,579
ในส่วนนี้ เราจะมาดูตัวเลือก recreate from screenshot (สร้างใหม่จากภาพหน้าจอ) กัน.

158
00:09:37,579 --> 00:09:42,099
สิ่งที่ผมจะทำก็คือเลือก screenshot ของแอปที่ผมมีอยู่.

159
00:09:42,099 --> 00:09:43,634
คุณอาจจำแอปนี้ได้.

160
00:09:43,634 --> 00:09:46,363
เราสร้างมันขึ้นมาเมื่อกี้นี่เอง.

161
00:09:46,363 --> 00:09:48,666
ตรงนี้คือ screenshot ของผม.

162
00:09:48,666 --> 00:09:52,248
ช่วยแปลงภาพนี้ให้เป็นแอปที่ใช้งานได้หน่อย.

163
00:09:52,248 --> 00:09:55,744
เอาล่ะ ไปเลย. เสร็จแล้ว. นี่มันสุดยอดมาก.

164
00:09:55,744 --> 00:09:58,729
มันแปลงภาพให้กลายเป็นโค้ดได้จริง ๆ.

165
00:09:58,729 --> 00:10:05,040
เหมือนเดิม คุณดูโค้ดได้ตรงนี้ และแก้ไขแบบเห็นภาพได้เหมือนที่ทำก่อนหน้านี้.

166
00:10:05,040 --> 00:10:08,366
แต่ครั้งนี้ผมอยากพูดถึงอีกฟีเจอร์หนึ่ง.

167
00:10:08,366 --> 00:10:12,801
คุณอาจสังเกตว่าแกลเลอรีภาพเหล่านี้ไม่แสดงภาพอะไรเลย.

168
00:10:12,801 --> 00:10:13,898
ทำไมน่ะเหรอ.

169
00:10:13,898 --> 00:10:18,077
ก็เพราะถ้าคุณดูตรงนี้ มันยังไม่ได้เพิ่มภาพเข้าไป.

170
00:10:18,077 --> 00:10:20,891
แต่เราทำได้แน่นอน. ไปแก้ไขกันเลย.

171
00:10:20,891 --> 00:10:24,047
ในการแก้ไข ผมสามารถเลือก element ได้.

172
00:10:24,047 --> 00:10:29,931
เช่น เลือกทั้งแกลเลอรีภาพคอมโพเนนต์นี้ แล้วสั่งว่า ช่วยเพิ่มภาพจริง ๆ

173
00:10:29,931 --> 00:10:33,684
ลงไปหน่อย. ง่ายแค่นั้น. แล้วมันจะไล่ดูในโค้ด

174
00:10:33,684 --> 00:10:36,242
และแทนที่ gradient placeholder

175
00:10:36,242 --> 00:10:38,460
(ตัวยึดตำแหน่งแบบไล่เฉดสี)

176
00:10:38,460 --> 00:10:41,104
ด้วยภาพวิลล่าและภาพวันหยุดจริง.

177
00:10:41,104 --> 00:10:42,809
ตรงตามที่เราต้องการ.

178
00:10:42,809 --> 00:10:45,624
พูดตามตรง ผมแทบไม่ได้สั่งอะไรเลย.

179
00:10:45,624 --> 00:10:48,864
แค่บอกว่าภาพ. มันอาจจะเป็นภาพแมวก็ได้.

180
00:10:48,864 --> 00:10:54,067
แต่ไม่ มันเข้าใจได้ทันทีว่าเราต้องการภาพวิลล่าและวันหยุดจริง.

181
00:10:54,067 --> 00:10:56,113
สุดยอด. ดูสิ เจ๋งแค่ไหน.

182
00:10:56,113 --> 00:10:59,269
เดี๋ยวนี้ demo ของเราดูดีขึ้นในทันที.

183
00:10:59,269 --> 00:11:02,083
ตอนนี้เราเปิดดูในหน้าต่างใหม่ได้.

184
00:11:02,083 --> 00:11:05,068
นี่คือหน้าตาที่มันจะเป็น. งดงามมาก.

185
00:11:05,068 --> 00:11:08,224
อีกอย่างที่ทำได้คือส่งออกไปยัง Figma.

186
00:11:08,224 --> 00:11:11,891
ตรงนี้คุณต้องมี Magic Patterns Figma plugin

187
00:11:11,891 --> 00:11:15,388
(ปลั๊กอิน) ซึ่งอยู่นอกขอบเขตของบทเรียนนี้

188
00:11:15,388 --> 00:11:18,799
แต่ปลั๊กอินมันมีอยู่จริง ถ้าคุณใช้ Figma

189
00:11:18,799 --> 00:11:22,637
อยู่ก็ใช้งานได้. หรือคุณจะคอมเมนต์บนนี้ก็ได้.

190
00:11:22,637 --> 00:11:29,459
เช่น คลิกตรงนี้แล้วเขียนว่าเปลี่ยนภาพนี้ ถ้าคุณใช้เครื่องมือนี้แบบร่วมกันหลายคน.

191
00:11:29,459 --> 00:11:34,065
หรือถ้าอยากจดโน้ตไว้ระหว่างประชุม demo ก็ได้เหมือนกัน.

192
00:11:34,065 --> 00:11:35,162
เยี่ยม.

193
00:11:35,162 --> 00:11:40,876
และถ้าอยากดูทั้งแอป ก็สลับมุมมอง แล้วจะเห็นเหมือนเปิดในเบราว์เซอร์.

194
00:11:40,876 --> 00:11:43,008
สุดยอด. ผมปลื้มกับมันมาก.

195
00:11:43,008 --> 00:11:49,148
ในส่วนนี้ เราจะมาสร้าง reusable components (คอมโพเนนต์ที่ใช้ซ้ำได้) กัน.

196
00:11:49,148 --> 00:11:52,901
ถ้าคุณไม่รู้ว่ามันคืออะไร เดี๋ยวจะได้รู้เอง.

197
00:11:52,901 --> 00:11:55,800
สุดท้ายนี้ ผมอยากโชว์อีกสิ่งหนึ่ง.

198
00:11:55,800 --> 00:12:02,197
สมมติว่าคุณเป็นบริษัทที่ทำแอปเยอะแยะมากมาย และอยากให้ทุกแอปหน้าตาเหมือนกัน.

199
00:12:02,197 --> 00:12:05,352
มีสไตล์เดียวกัน มีคอมโพเนนต์เดียวกัน.

200
00:12:05,352 --> 00:12:07,825
เครื่องมือนี้จะช่วยคุณได้มาก.

201
00:12:07,825 --> 00:12:11,919
คุณจะสร้าง design system (ระบบการออกแบบ) ขึ้นมา.

202
00:12:11,919 --> 00:12:14,904
ไปสร้าง design system แรกของเรากัน.

203
00:12:14,904 --> 00:12:18,230
ผมจะตั้งชื่อมันว่า villa design system.

204
00:12:18,230 --> 00:12:21,556
คุณเพิ่มโลโก้ได้ด้วยนะ ผมแนะนำให้เพิ่ม.

205
00:12:21,556 --> 00:12:24,626
แต่เอาล่ะ นี่แค่ demo เราข้ามไปก่อน.

206
00:12:24,626 --> 00:12:26,502
ผมจะเริ่มจากว่างเปล่า.

207
00:12:26,502 --> 00:12:29,317
แล้วสร้าง design system แรกของผม.

208
00:12:29,317 --> 00:12:31,449
จากนั้นก็เพิ่มคอมโพเนนต์.

209
00:12:31,449 --> 00:12:35,542
คุณเพิ่มคอมโพเนนต์จากภาพได้ ซึ่งมีประโยชน์มาก ๆ.

210
00:12:35,542 --> 00:12:41,598
เช่น ถ้าผมอัปโหลดภาพเดิมที่ใช้เมื่อกี้ ก็คือ screenshot ของที่พักของผม.

211
00:12:41,598 --> 00:12:44,412
แล้วผมจะเพิ่มข้อความเผื่อไว้ด้วย.

212
00:12:44,412 --> 00:12:50,297
เป็นคอมโพเนนต์ที่พัก ที่มีแกลเลอรีภาพ รายละเอียด และตารางเปรียบเทียบ.

213
00:12:50,297 --> 00:12:54,220
แล้วก็กดเลย. คอมโพเนนต์ของผมกำลังถูกสร้างขึ้น.

214
00:12:54,220 --> 00:12:58,995
และแน่นอน ผมสร้างคอมโพเนนต์ได้อีกมากมาย จากภาพอีกมากมาย.

215
00:12:58,995 --> 00:13:01,383
ซึ่งหมายความว่ามันใช้ซ้ำได้.

216
00:13:01,383 --> 00:13:05,477
ผมใช้คอมโพเนนต์วิลล่านี้กี่ครั้งก็ได้ตามต้องการ.

217
00:13:05,477 --> 00:13:10,253
อาจมีคอมโพเนนต์ header (ส่วนหัว) หรือปุ่มอยู่ตรงนี้ด้วย.

218
00:13:10,253 --> 00:13:12,556
ยิ่งมีคอมโพเนนต์เยอะยิ่งดี.

219
00:13:12,556 --> 00:13:15,285
แล้วคุณก็แค่นำมาใช้ต่อกันได้เลย.

220
00:13:15,285 --> 00:13:20,060
เอาล่ะ คลิกเข้าไปในคอมโพเนนต์ แล้วก็ตู้ม ได้ผลลัพธ์แล้ว.

221
00:13:20,060 --> 00:13:23,728
ผมจะเปิด preview (ตัวอย่าง) ในหน้าต่างใหม่.

222
00:13:23,728 --> 00:13:25,860
ดูสิ จากภาพเพียงภาพเดียว.

223
00:13:25,860 --> 00:13:29,356
คอมโพเนนต์นี้ใช้ซ้ำได้. คุณดูโค้ดได้ด้วย.

224
00:13:29,356 --> 00:13:32,768
แต่เอาล่ะ มันดูดีแล้วสำหรับผม. ผมชอบมาก.

225
00:13:32,768 --> 00:13:33,865
เยี่ยม.

226
00:13:33,865 --> 00:13:38,214
และแน่นอน คอมโพเนนต์ทั้งหมดของคุณจะถูกรวมไว้ที่นี่.

227
00:13:38,214 --> 00:13:42,052
คุณอัปโหลด style context (บริบทของสไตล์) ได้.

228
00:13:42,052 --> 00:13:46,998
มี typography (รูปแบบตัวอักษร) ให้ตั้งค่า ทั้งหัวข้อต่าง ๆ

229
00:13:46,998 --> 00:13:51,263
ที่อยากใช้ ตัวหนังสือเนื้อหา หรือการตั้งค่าโดยรวม.

230
00:13:51,263 --> 00:13:55,100
รวมถึงการกำหนดสิทธิ์ว่าใครเข้าถึงอะไรได้บ้าง.

231
00:13:55,100 --> 00:13:57,915
เยี่ยม. เอาล่ะ ขอบคุณมากที่รับชม.

232
00:13:57,915 --> 00:14:01,155
ผมหวังว่าคุณจะได้ประโยชน์จากวิดีโอนี้.

233
00:14:01,155 --> 00:14:04,908
และถ้ามีคำถามอะไร คอมเมนต์ไว้ด้านล่างได้เลย.

234
00:14:04,908 --> 00:14:07,040
ผมยินดีช่วยเหลือคุณมาก ๆ.