Figmaプラグイン 開発のすゝめ

Transcript

1. Figmaプラグイン
   開発のすゝめ
   Figmaプラグインで始めるWebアプリケーション開発
   Takanori Oki - 20210125
   

   View Slide

2. 自己紹介
   • Takanori Oki - 大木尊紀 - @takanorip
   • UI designer at ClassDo / Frontend developer
   • Organizer of Web Platform Study Group
   • takanorip.com
   

   View Slide

3. Figma
   • Webアプリケーションベースのデザインツール
   • チーム開発（コラボレーション）のための機能が充実
   • 共同編集
   • URLによる共有
   • コンポーネント管理機能
   • etc…
   

   View Slide

4. Figma Plugins
   • Figmaで利用できる拡張機能
   • Figmaのデザインデータにアクセス、編集ができる
   • Webフロントエンドと同じ技術スタックで開発できる
   • 審査に合格すればFigma Community上に公開することも可能
   • 補足：FigmaはWeb APIも公開しているがそちらは情報の取得のみで、
   編集などは一切できない
   

   View Slide

5. Figma Pluginsが
   アプリケーション開発入門に適している理由
   • UIとロジックを分離させる設計になっている
   • ローカルで動作を試せる（デプロイ必要ない）
   • TypeScriptで開発できるよう整備されている
   TODOリストより実践的だけど個人アプリ開発より手軽
   

   View Slide

6. UIとロジックを分離させる設計になっている
   ग़యɿFigma Developers
   

   View Slide

7. UIとロジックを分離させる設計になっている
   • サンドボックスはFigmaのAPIにアクセスできる
   • ブラウザ APIにはアクセスできない
   • iframeではFigma APIにアクセスできない
   • ブラウザの機能はだいたい使える
   • 外部Web APIへのアクセスも可能(POSTは出来ない)
   • サンドボックスとiframeはpostMessageでやりとりする
   

   View Slide

8. 責務の分離と
   セキュリティの確保のために
   こういった設計になってる
   

   View Slide

9. Webフロントエンド開発をいろいろ試せる
   • 公式でTypeScriptを用いた開発が推奨されてる
   • https://www.figma.com/plugin-docs/typescript/
   • サンプルも充実
   • https://github.com/figma/plugin-samples
   • パフォーマンスチューニングの題材としても良いかも
   • https://www.figma.com/plugin-docs/frozen-plugins/
   

   View Slide

10. 簡単な始め方
    • 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
    

    View Slide

11. JUST DO IT!
    

    View Slide