$30 off During Our Annual Pro Sale. View Details »

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

takanorip
January 25, 2021

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

takanorip

January 25, 2021
Tweet

More Decks by takanorip

Other Decks in Technology

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