「Figmaプラグイン開発してみた」＠スタメンデザイナーオープン勉強会

Transcript

1. スタメンデザイナーオープン勉強会 Figmaプラグイン 開発してみた

2. #スタメンオープン勉強会 初めて触った デザイン関連ソフトは なんですか？

3. Wikipediaより引用

4. スタメンデザイナーオープン勉強会 Figmaプラグイン 開発してみた

5. Demo

6. 嘘つけ！ コード書けないだろ！

7. そうです

8. 何周か学習はしたけど 実務で自分がコードを 書いたことはほぼない！

9. None

10. じゃあどうやってつくったん？

11. None

12. きっかけ

13. Figmaプラグインってどうやって作るん ですか？

14. Figmaプラグインってどうやって作るん ですか？ Figmaプラグインを作るのは、プログラミン グの経験が少しあればそれほど難しくありま せん。特にJavaScriptに慣れていればス ムーズに進められます。

 Figmaプラグインは、Figmaが提供してい るPlugin APIを使って開発します。 


15. ざっくり手順

16. None
17. None
18. None
19. None
20. None
21. None
22. None
23. None
24. None
25. None
26. None
27. None
28. None

29. もちろん いろんなことに つまづく

30. ど゛う゛し゛て゛だ゛よ゛ぉ゛ぉ゛!゛!゛

31. エラーのサマリと対処法を教えて このファイルあんまいじらない方がいいっぽいから極力編集 せずやってみて このディレクトリ構成で合ってるよね？（写真添付） うまくいく自信は何%?理由は？ うまく指示・質問をして前に進める

32. このカラーコード変えたから次出力するために覚えておいて レイアウトはこんな感じで！ 本当に正しい？ハルシネーションはやめてね ほかにもこんな指示をしたよ

33. なぜ楽しくやれた？

34. わたしの2大苦手ポイント

35. わたしの2大苦手ポイント 説明書読めない コマンドラインこわい

36. None

37. これを対処でき、 知識や経験などのハードスキルもAIで補えば あとは作るだけ！楽しい！

38. 気をつけたこと

39. 「何をしているか」は 理解しておく

40. コマンドの意味とか語源をわかりやすく教えて さっきからnpm run buildを何回もさせられてるけど何やっ てるの？やらないとどうなるの？ それってデザイナー業界で置き換えるとなに？ スマートオブジェクトってこと？

41. ツールのクセを理解する

42. None

43. やってみて 気づいたこと

44. このやり方で必要なのは、ある程度の前提知識と

45. このやり方で必要なのは、ある程度の前提知識と 問題解決力と質問力

46. ビジネスマンなら、誰でも 挑戦してみることはできる！

47. 世の中にプラグインはすでにたくさんあるが、 自分たちのかゆいところは 自分たちでしかかけない！

48. これから

49. もっとうまく付き合える AIと出会う

50. 自動化できるタスクは 全部自動化したい！

51. 生産性を高めて 短期で爆デカ成果 あげようぜ！