Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
「Figmaプラグイン開発してみた」@スタメンデザイナーオープン勉強会
Search
YurufuwaKiyoshi
November 26, 2024
Design
1
230
「Figmaプラグイン開発してみた」@スタメンデザイナーオープン勉強会
YurufuwaKiyoshi
November 26, 2024
Tweet
Share
More Decks by YurufuwaKiyoshi
See All by YurufuwaKiyoshi
241214_StackNagoya_プレイングマネージャーのプレイングの時間の使い方
kiyoshifuwa
1
380
Designship2024 Panel Discussion インハウスデザイナーは 何をデザインしているか、するべきか で使用したスライドを公開します。
kiyoshifuwa
1
3.8k
240720_StackNagoya_デザイン組織運営 フェーズ別 大事にしたこととやったこと
kiyoshifuwa
0
440
Stack Nagoya vol.1 LT 「デザインチームツイッター運用のすすめ」
kiyoshifuwa
0
750
#コムデナ vol.2 「初めてのデザインカンファレンス協賛!共有したい3つのやらかし」
kiyoshifuwa
1
700
みんなで使うFigmaの環境づくり@名古屋Figma勉強会
kiyoshifuwa
3
1k
220828_なごデLTvol4.pdf
kiyoshifuwa
0
570
ロゴを作ったことないタイプのデザイナーが ロゴ制作に挑戦した話
kiyoshifuwa
2
1.2k
ビジネスとクリエイティブを そっと近付けたい話
kiyoshifuwa
2
520
Other Decks in Design
See All in Design
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
3.9k
Ana Cortes Visual Development Portfolio 2025
haruanleb
0
120
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
920
役立つシステムを作るためのAI活用
kanzaki
0
110
BXデザイン組織が挑んだスクラム 〜ブランドを育み、デザイナーを解放する変革の物語〜(Scrum Fest Mikawa 2025)
tadashiinoue
0
370
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
860
逆向きUIの世界 〜iOSアプリのRTL言語対応〜
akatsuki174
1
260
Portfolio 齋藤明敏 Hiroyuki Saito
crearedesign
0
110
「稼ぐ」だけでなく 「還す」ためのデザイン / Designship2025
culumu
1
370
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
320
Illustrator×Firefly 生成したイラストをベースにドット絵を作ってみよう!
connecre
1
140
企画を動かすデザイナーの思考!「広げて絞る」アプローチ。
hikidakan
0
190
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
20
1.2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
33
2.3k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Optimizing for Happiness
mojombo
379
70k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Transcript
スタメンデザイナーオープン勉強会 Figmaプラグイン 開発してみた
#スタメンオープン勉強会 初めて触った デザイン関連ソフトは なんですか?
Wikipediaより引用
スタメンデザイナーオープン勉強会 Figmaプラグイン 開発してみた
Demo
嘘つけ! コード書けないだろ!
そうです
何周か学習はしたけど 実務で自分がコードを 書いたことはほぼない!
None
じゃあどうやってつくったん?
None
きっかけ
Figmaプラグインってどうやって作るん ですか?
Figmaプラグインってどうやって作るん ですか? Figmaプラグインを作るのは、プログラミン グの経験が少しあればそれほど難しくありま せん。特にJavaScriptに慣れていればス ムーズに進められます。 Figmaプラグインは、Figmaが提供してい るPlugin APIを使って開発します。
ざっくり手順
None
None
None
None
None
None
None
None
None
None
None
None
None
もちろん いろんなことに つまづく
ど゛う゛し゛て゛だ゛よ゛ぉ゛ぉ゛!゛!゛
エラーのサマリと対処法を教えて このファイルあんまいじらない方がいいっぽいから極力編集 せずやってみて このディレクトリ構成で合ってるよね?(写真添付) うまくいく自信は何%?理由は? うまく指示・質問をして前に進める
このカラーコード変えたから次出力するために覚えておいて レイアウトはこんな感じで! 本当に正しい?ハルシネーションはやめてね ほかにもこんな指示をしたよ
なぜ楽しくやれた?
わたしの2大苦手ポイント
わたしの2大苦手ポイント 説明書読めない コマンドラインこわい
None
これを対処でき、 知識や経験などのハードスキルもAIで補えば あとは作るだけ!楽しい!
気をつけたこと
「何をしているか」は 理解しておく
コマンドの意味とか語源をわかりやすく教えて さっきからnpm run buildを何回もさせられてるけど何やっ てるの?やらないとどうなるの? それってデザイナー業界で置き換えるとなに? スマートオブジェクトってこと?
ツールのクセを理解する
None
やってみて 気づいたこと
このやり方で必要なのは、ある程度の前提知識と
このやり方で必要なのは、ある程度の前提知識と 問題解決力と質問力
ビジネスマンなら、誰でも 挑戦してみることはできる!
世の中にプラグインはすでにたくさんあるが、 自分たちのかゆいところは 自分たちでしかかけない!
これから
もっとうまく付き合える AIと出会う
自動化できるタスクは 全部自動化したい!
生産性を高めて 短期で爆デカ成果 あげようぜ!