Figmaプラグイン開発のすゝめFigmaプラグインで始めるWebアプリケーション開発Takanori Oki - 20210125
View Slide
自己紹介• Takanori Oki - 大木尊紀 - @takanorip• UI designer at ClassDo / Frontend developer• Organizer of Web Platform Study Group• takanorip.com
Figma• Webアプリケーションベースのデザインツール• チーム開発(コラボレーション)のための機能が充実• 共同編集• URLによる共有• コンポーネント管理機能• etc…
Figma Plugins• Figmaで利用できる拡張機能• Figmaのデザインデータにアクセス、編集ができる• Webフロントエンドと同じ技術スタックで開発できる• 審査に合格すればFigma Community上に公開することも可能• 補足:FigmaはWeb APIも公開しているがそちらは情報の取得のみで、編集などは一切できない
Figma Pluginsがアプリケーション開発入門に適している理由• UIとロジックを分離させる設計になっている• ローカルで動作を試せる(デプロイ必要ない)• TypeScriptで開発できるよう整備されているTODOリストより実践的だけど個人アプリ開発より手軽
UIとロジックを分離させる設計になっているग़యɿFigma Developers
UIとロジックを分離させる設計になっている• サンドボックスはFigmaのAPIにアクセスできる• ブラウザ APIにはアクセスできない• iframeではFigma APIにアクセスできない• ブラウザの機能はだいたい使える• 外部Web APIへのアクセスも可能(POSTは出来ない)• サンドボックスとiframeはpostMessageでやりとりする
責務の分離とセキュリティの確保のためにこういった設計になってる
Webフロントエンド開発をいろいろ試せる• 公式でTypeScriptを用いた開発が推奨されてる• https://www.figma.com/plugin-docs/typescript/• サンプルも充実• https://github.com/figma/plugin-samples• パフォーマンスチューニングの題材としても良いかも• https://www.figma.com/plugin-docs/frozen-plugins/
簡単な始め方• CLI tool• https://github.com/yuanqing/create-figma-plugin• https://rsms.me/figplug/• UI Components for Figma Plugins (Unofficial)• https://github.com/thomas-lowry/figma-plugin-ds
JUST DO IT!