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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
YurufuwaKiyoshi
November 26, 2024
Design
320
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
「Figmaプラグイン開発してみた」@スタメンデザイナーオープン勉強会
YurufuwaKiyoshi
November 26, 2024
More Decks by YurufuwaKiyoshi
See All by YurufuwaKiyoshi
241214_StackNagoya_プレイングマネージャーのプレイングの時間の使い方
kiyoshifuwa
1
500
Designship2024 Panel Discussion インハウスデザイナーは 何をデザインしているか、するべきか で使用したスライドを公開します。
kiyoshifuwa
1
7.2k
240720_StackNagoya_デザイン組織運営 フェーズ別 大事にしたこととやったこと
kiyoshifuwa
0
560
Stack Nagoya vol.1 LT 「デザインチームツイッター運用のすすめ」
kiyoshifuwa
0
860
#コムデナ vol.2 「初めてのデザインカンファレンス協賛!共有したい3つのやらかし」
kiyoshifuwa
1
770
みんなで使うFigmaの環境づくり@名古屋Figma勉強会
kiyoshifuwa
3
1.2k
220828_なごデLTvol4.pdf
kiyoshifuwa
0
660
ロゴを作ったことないタイプのデザイナーが ロゴ制作に挑戦した話
kiyoshifuwa
2
1.3k
ビジネスとクリエイティブを そっと近付けたい話
kiyoshifuwa
2
590
Other Decks in Design
See All in Design
2026年の勢い / Momentum for 2026
bebe
0
470
なぜ、インサイトを貯めるのか?
tajima_kaho
2
2.1k
組織で働く大人が「知らないままにやってみる」を取り戻す方法とその意味〜企業で働く実務家による実践知の言語化を事例とした考察〜
chiemitaki
1
120
AIスライド生成を進化させるMDファイル
kenichiota0711
1
1.3k
怖くないアクセシビリティ -カウンターカルチャーとしてのアッカン東京-
securecat
1
200
CULTURE DECK/Frontend Engineer
mhand01
0
1.3k
ISO 9241-171:2025っていうのがあってな
shosira
1
190
空間アプリ開発のフィードバックをCodexにするための抽象的なデザインツールの模索
karad
0
150
PAMPHLET.pdf
mhand01
0
480
AIネイティブスタートアップにおけるプロダクト開発の新常識 / Product Development Tips in AI-Native Startups
saka2jp
2
1.3k
「使いやすさ」だけでは、「勝てる」サービスにはならない。〜KPIとUXの分断を埋める、サービス戦略という「指針」〜
nbkouhou
2
420
デザイナーとエンジニアで 同じ山に登ろう
moco1013
0
260
Featured
See All Featured
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
ryanjones
0
160
Designing for humans not robots
tammielis
254
26k
So, you think you're a good person
axbom
PRO
2
2.1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
2k
Agile Actions for Facilitating Distributed Teams - ADO2019
mkilby
0
210
Prompt Engineering for Job Search
mfonobong
0
350
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.5k
Building Flexible Design Systems
yeseniaperezcruz
330
40k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
25k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
uxyall
1
1.7k
Visual Storytelling: How to be a Superhuman Communicator
reverentgeek
2
560
More Than Pixels: Becoming A User Experience Designer
marktimemedia
3
440
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と出会う
自動化できるタスクは 全部自動化したい!
生産性を高めて 短期で爆デカ成果 あげようぜ!