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
出口 裕貴
September 18, 2024
Technology
1
150
Figma Plugin開発は面白い!
2024/9/18 に開催された、夏のクリエイター勉強会&大交流会Meetup! で発表したスライドです。
出口 裕貴
September 18, 2024
Tweet
Share
More Decks by 出口 裕貴
See All by 出口 裕貴
社内を動かすアクセシビリティ戦略
degudegu2510
1
300
ダークテーマとアクセシビリティの融合したカラートークンの設計
degudegu2510
7
6.2k
最速で価値を届けるUXリサーチ
degudegu2510
5
1.3k
Qiitaアクセシビリティ史 ~ Qiitaの歩んできた道 ~
degudegu2510
0
2.8k
CSS Anchor Positioning のきほん!
degudegu2510
2
1.9k
ダークテーマとアクセシビリティ の融合したカラートークンの設計
degudegu2510
0
500
デザインテクノロジストが先導する プロダクト開発の世界
degudegu2510
2
580
Scroll-driven AnimationsとCSSの進化
degudegu2510
1
830
デザイナーがデザインエンジニアとして役割を拡大した話
degudegu2510
1
140
Other Decks in Technology
See All in Technology
お問い合わせ対応の改善取り組みとその進め方
masartz
1
290
Road to SRE NEXT@仙台 IVRyの組織の形とSLO運用の現状
abnoumaru
0
380
技術好きなエンジニアが _リーダーへの進化_ によって得たものと失ったもの / The Gains and Losses of a Tech-Enthusiast Engineer’s “Evolution into Leadership”
kaminashi
0
200
Amazon EKS Auto ModeでKubernetesの運用をシンプルにする
sshota0809
0
110
View Transition API
shirakaba
1
920
みんなで育てるNewsPicksのSLO
troter
4
1.1k
ウェブアクセシビリティとは
lycorptech_jp
PRO
0
250
セマンティックレイヤー入門
ikkimiyazaki
8
2.5k
ソフトウェアプロジェクトの成功率が上がらない原因-「社会価値を考える」ということ-
ytanaka5569
0
120
Explainable Software Engineering in the Public Sector
avandeursen
0
340
OPENLOGI Company Profile for engineer
hr01
1
22k
移行できそうでやりきれなかった 10年超えのシステムを葬るための戦略
ryu955
2
200
Featured
See All Featured
Music & Morning Musume
bryan
46
6.4k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Being A Developer After 40
akosma
90
590k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Side Projects
sachag
452
42k
How GitHub (no longer) Works
holman
314
140k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
Building Applications with DynamoDB
mza
94
6.3k
KATA
mclloyd
29
14k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
For a Future-Friendly Web
brad_frost
176
9.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
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に記事を投稿しているので、興味がある方は、ぜひ記事もご覧ください。
ありがとうございました。