Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

78f5efc1e98c71e473cc7827de1c5db4?s=47 takanorip
January 25, 2021

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

78f5efc1e98c71e473cc7827de1c5db4?s=128

takanorip

January 25, 2021
Tweet

Transcript

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

  2. 自己紹介 • Takanori Oki - 大木尊紀 - @takanorip • UI

    designer at ClassDo / Frontend developer • Organizer of Web Platform Study Group • takanorip.com
  3. Figma • Webアプリケーションベースのデザインツール • チーム開発(コラボレーション)のための機能が充実 • 共同編集 • URLによる共有 •

    コンポーネント管理機能 • etc…
  4. Figma Plugins • Figmaで利用できる拡張機能 • Figmaのデザインデータにアクセス、編集ができる • Webフロントエンドと同じ技術スタックで開発できる • 審査に合格すればFigma

    Community上に公開することも可能 • 補足:FigmaはWeb APIも公開しているがそちらは情報の取得のみで、 編集などは一切できない
  5. Figma Pluginsが アプリケーション開発入門に適している理由 • UIとロジックを分離させる設計になっている • ローカルで動作を試せる(デプロイ必要ない) • TypeScriptで開発できるよう整備されている TODOリストより実践的だけど個人アプリ開発より手軽

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

  7. UIとロジックを分離させる設計になっている • サンドボックスはFigmaのAPIにアクセスできる • ブラウザ APIにはアクセスできない • iframeではFigma APIにアクセスできない •

    ブラウザの機能はだいたい使える • 外部Web APIへのアクセスも可能(POSTは出来ない) • サンドボックスとiframeはpostMessageでやりとりする
  8. 責務の分離と セキュリティの確保のために こういった設計になってる

  9. Webフロントエンド開発をいろいろ試せる • 公式でTypeScriptを用いた開発が推奨されてる • https://www.figma.com/plugin-docs/typescript/ • サンプルも充実 • https://github.com/figma/plugin-samples •

    パフォーマンスチューニングの題材としても良いかも • https://www.figma.com/plugin-docs/frozen-plugins/
  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
  11. JUST DO IT!