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 Plugin開発は面白い!
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
出口 裕貴
September 18, 2024
Technology
1
200
Figma Plugin開発は面白い!
2024/9/18 に開催された、夏のクリエイター勉強会&大交流会Meetup! で発表したスライドです。
出口 裕貴
September 18, 2024
Tweet
Share
More Decks by 出口 裕貴
See All by 出口 裕貴
Tripo MCP × Cursorで始める 手軽な3Dモデル生成の世界
degudegu2510
0
360
はじめての自作キーボード制作
degudegu2510
0
32
社内を動かすアクセシビリティ戦略
degudegu2510
1
340
ダークテーマとアクセシビリティの融合したカラートークンの設計
degudegu2510
9
7.6k
最速で価値を届けるUXリサーチ
degudegu2510
5
1.4k
Qiitaアクセシビリティ史 ~ Qiitaの歩んできた道 ~
degudegu2510
0
2.9k
CSS Anchor Positioning のきほん!
degudegu2510
2
2.4k
ダークテーマとアクセシビリティ の融合したカラートークンの設計
degudegu2510
0
550
デザインテクノロジストが先導する プロダクト開発の世界
degudegu2510
2
680
Other Decks in Technology
See All in Technology
自動テストが巻き起こした開発プロセス・チームの変化 / Impact of Automated Testing on Development Cycles and Team Dynamics
codmoninc
3
1.2k
オンプレとGoogle Cloudを安全に繋ぐための、セキュア通信の勘所
waiwai2111
3
1.1k
Kiro のクレジットを使い切る!
otanikohei2023
0
120
8万デプロイ
iwamot
PRO
2
180
モブプログラミング再入門 ー 基本から見直す、AI時代のチーム開発の選択肢 ー / A Re-introduction of Mob Programming
takaking22
1
340
Eight Engineering Unit 紹介資料
sansan33
PRO
1
6.9k
EMからICへ、二周目人材としてAI全振りのプロダクト開発で見つけた武器
yug1224
5
470
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.4k
オレ達はAWS管理をやりたいんじゃない!開発の生産性を爆アゲしたいんだ!!
wkm2
3
350
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
6
72k
AI時代にエンジニアはどう成長すれば良いのか?
recruitengineers
PRO
1
150
男(監査)はつらいよ - Policy as CodeからAIエージェントへ
ken5scal
5
770
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
49
9.9k
Optimising Largest Contentful Paint
csswizardry
37
3.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.7k
Balancing Empowerment & Direction
lara
5
930
Statistics for Hackers
jakevdp
799
230k
The AI Search Optimization Roadmap by Aleyda Solis
aleyda
1
5.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.3k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
helenjbeal
1
140
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
69
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
helenjbeal
1
140
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
10k
Prompt Engineering for Job Search
mfonobong
0
180
Transcript
None
こんにちは、私はQiita株式会社の出口 裕貴です。 普段は、QiitaのPdM 兼 デザイングループのマネージャーをしています。 私は、デザイン, フロントエンドに関連する情報を中心に発信しているデザインテクノロジストとして活動しているので、よかったらXのフォローしていただけると嬉しいです。
本日は、「Figma Plugin開発は面白い」と題しまして、デザイナーが自分たちで業務を効率化するためにFigmaのPluginを開発した話をしようと思います。 早速ですが、みなさんはFigmaのpluginを使ってますか?
公開されているFigmaのpluginは便利なものが多いです! 画像やイラスト、Iconなどを挿入してくれるPluginやアクセシビリティをチェックしてくれるPluginなど、UIをつくるにあたって、とても便利です。
ただ、公開されている汎用性の高いpluginでは、実業務の課題を解決してくれるものは少なく、見つけるのが大変です。 また、pluginを効果的に使うために、UIの作成フローを変えることも必要になるでしょう。
そのため、Qiitaでは、UIを作成する時の課題を解決するために、Figmaのpluginを開発し、業務を進めています。
本日は、Qiitaで開発したFigmaのPluginを紹介しようと思います。
Qiitaで開発したPluginは、「Issue Syncer」というFigmaのファイルとGithub Issueを同期させるプラグインです。
Qiitaでは、GitHubのIssueで仕事を管理し、1つのissueで、1つのFigmaファイルを作成し、Figmaのサムネイルでissueのステータスを管理しています。
この「Issue Syncer」というプラグインでは、Figmaのテンプレートファイルの作成から、ステータスに合わせたサムネイルの変更とGithub Issueの管理をFigma側から行ってくれます。
この「Issue Syncer」というpluginを開発することにした背景・課題には、
「Issueに着手してから、UIの作成を始めるのに時間がかかること」と「Issueのステータスに合わせて、Figmaのサムネイルを変更し忘れること」というのがありました。
「Issueに着手してから、UIの作成を始めるのに時間がかかること」というのは、 Qiitaでは、Issueに着手して、Figmaファイルを作成するあたって、 やらないといけないことが多いことが原因です。 具体的には、 テンプレートファイルをコピーし、ファイルのタイトルを変更したりサムネイルにissue番号やタイトルを反映させたり GitHubのURLやドキュメントのURLをFigmaに反映されたりGitHubのissueに、FigmaのURLを貼ったりと、ファイルを管理するために、FigmaとGithubを行き来することが多かったです。
そのため、「Issue Syncer」では、ファイルを作成時、GithubのURLを入力し、ボタンを押すだけで、Figmaのテンプレートファイが作られ、GitHubのissueに合わせて、サムネイルが自動的に生成され、GithubにFigmaのURLをコメントしてくれる機能を開発しました。
「Issueのステータスに合わせて、Figmaのサムネイルを変更し忘れること」というのは、Qiitaでは、GitHubでissueを管理しているため、GitHubのissueはCloseしているのに、Figmaのサムネイルはデザイン中になり、エンジニアがFigmaのサムネイルをみて、開発できる状態なのかが判断できなくなっていました。
そのため、「Issue Syncer」でFigmaのサムネイルの変更とissueのCloseが同時にできる機能を開発しました。
他にも、「Issue Syncer」には、Figmaのサムネイルのステータスを変える機能があったり、UIのレビューをランダムな人に依頼する機能があったりと、QiitaのUI作成フローに合わせて、便利な機能が備わっています。
最後にまとめです。
FigmaのPluginを自作すると、自分たちの課題や業務に合ったプラグインを開発できます。 そのため、今までよりデザインに集中できる環境を作ることができます。 こういうPluginあったらいいなと思っていた方やこういうPluginないかなと検索した方は、ぜひFigmaのPluginを作ってみてはいかがでしょうか? Figma Plugin開発に関する記事は、僕がQiitaに記事を投稿しているので、興味がある方は、ぜひ記事もご覧ください。
ありがとうございました。