アイキャッチはFigmaで簡単に作れる！

DevelopersIOの著者陣を対象にしたブログ執筆に関するノウハウや知見の共有、執筆者陣の執筆スキル及び質量の向上を目的とした『DevelopersIO ブログ勉強会2023』の第5回デザイナー会で登壇しました！フリープランもあって始めやすいFigmaを題材にアイキャッチを作る際のポイントについて紹介しています。

Transcript

1. Kubo Sayaka - 2 02 3 . 1 1 . 8 Figma # 2023 1
2. 2 CX Delivery
3. Index Figma Figma 3
4. Figma 4
5. Figma 5 💻 👩💻 🤑 💡
6. 💻 Figma 6
8. 8 1 . ( 12 00 × 630 px) 2 . 3 . (PNG )
9. 1. (w 1 2 0 0 h 6 3 0 ) 9
10. 1. 10 [ _ _w 1 2 0 0 h 63 0 ] 👈
11. 2. 11
12. ⚠ ⚠ 12 1. 2. 2. - SVG( ) PNG( ) JPEG( )
13. 2. - Figma 13 Mac ⾒ Finder Figma
14. 2. - 1 14
15. 2. - 2 15 👈 👆 👆
16. 2. - 2 16
17. 3. PNG 17 👈
18. 3. PNG - 18 PNG 👇 ☝
19. 🎉 🎉 19
21. ? 😱 21
22. 😎 22
23. 2 23 🧐
24. 1. 2. 24
25. 1. 25
26. 1. - 26
27. 4. - 2 27 2
28. 28 160px 1. - 160px
29. 1. - 160px 29
30. 1. - 30
31. 31 🤔
32. 32 A.
35. 2. 35
36. 36 2. -
37. 37 2. -
38. 38 2. -
39. 39 2. -
40. 40 2. -
41. 41 Good 👍 2.
42. 2. - 42 https://dev.classmethod.jp/articles/placement/#toc- 1
43. 🤓 43
44. 44 3 Figma
45. 45 💡 💡
46. 🦄 46
47. 47 ⾒
48. 48 ⾒
49. 49 ⾒ Noto Sans JP Univia Pro 48px
50. 50 designstrip unDraw
51. 51 illustAC
53. #help-design @g-cx-design-team 53
54. 54 😉
55. Thank you ! 55