Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
「Figmaプラグイン開発してみた」@スタメンデザイナーオープン勉強会
Search
YurufuwaKiyoshi
November 26, 2024
Design
340
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
530
Designship2024 Panel Discussion インハウスデザイナーは 何をデザインしているか、するべきか で使用したスライドを公開します。
kiyoshifuwa
1
8.3k
240720_StackNagoya_デザイン組織運営 フェーズ別 大事にしたこととやったこと
kiyoshifuwa
0
590
Stack Nagoya vol.1 LT 「デザインチームツイッター運用のすすめ」
kiyoshifuwa
0
920
#コムデナ vol.2 「初めてのデザインカンファレンス協賛!共有したい3つのやらかし」
kiyoshifuwa
1
800
みんなで使うFigmaの環境づくり@名古屋Figma勉強会
kiyoshifuwa
3
1.2k
220828_なごデLTvol4.pdf
kiyoshifuwa
0
680
ロゴを作ったことないタイプのデザイナーが ロゴ制作に挑戦した話
kiyoshifuwa
2
1.4k
ビジネスとクリエイティブを そっと近付けたい話
kiyoshifuwa
2
610
Other Decks in Design
See All in Design
Typographie et intégration web
goetter
0
170
noteらしさを織り込むハーネスエンジニアリング
uto
0
2.3k
もっともらしさ生成器と暮らす – AI懐疑派の試行錯誤
sekiguchiy
0
200
ポートフォリオ_あやの
ngyenmazt1412
0
2k
Bet AI Day 2026丨デザインハーネス:専門職の判断基準をコードのように運用する
layerx
PRO
6
7.4k
LP制作のための熱量ハーネス -人の熱量を、AIとの制作につなぐ-
niccy
0
1.8k
個人理念(自分の言葉)の言語化ワークショップ
kakukoki
1
420
図書館書架のオンライン閲覧サービス 「honbaco library」の開発 Code4Lib JAPAN カンファレンス 2026
sugi2000
0
120
デザインワークフローの最前線。 ログラスでのAI活用の現在地
ukaoli
1
3.5k
富山デザイン勉強会_デザイン思考.pdf
keita_yoshikawa
2
240
このスロップ時代に良きデザインをつくるには? / good-design-in-the-slop-era
kgsi
1
1.1k
Where Imagination Ends AI Begins
r5ni4
0
470
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
274
21k
The #1 spot is gone: here's how to win anyway
tamaranovitovic
4
1.2k
Git: the NoSQL Database
bkeepers
PRO
433
67k
Statistics for Hackers
jakevdp
799
230k
Mind Mapping
helmedeiros
1
400
Mobile First: as difficult as doing things right
swwweet
225
10k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
akademiya2063
PRO
1
410
Scaling GitHub
holman
464
140k
Believing is Seeing
oripsolob
1
250
svc-hook: hooking system calls on ARM64 by binary rewriting
retrage
2
630
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
inesmontani
PRO
3
3.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
3k
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と出会う
自動化できるタスクは 全部自動化したい!
生産性を高めて 短期で爆デカ成果 あげようぜ!