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

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

takanorip
January 25, 2021

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

takanorip

January 25, 2021
Tweet

More Decks by takanorip

Other Decks in Technology

Transcript

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

    designer at ClassDo / Frontend developer • Organizer of Web Platform Study Group • takanorip.com
  2. Figma Plugins • Figmaで利用できる拡張機能 • Figmaのデザインデータにアクセス、編集ができる • Webフロントエンドと同じ技術スタックで開発できる • 審査に合格すればFigma

    Community上に公開することも可能 • 補足:FigmaはWeb APIも公開しているがそちらは情報の取得のみで、 編集などは一切できない
  3. UIとロジックを分離させる設計になっている • サンドボックスはFigmaのAPIにアクセスできる • ブラウザ APIにはアクセスできない • iframeではFigma APIにアクセスできない •

    ブラウザの機能はだいたい使える • 外部Web APIへのアクセスも可能(POSTは出来ない) • サンドボックスとiframeはpostMessageでやりとりする
  4. 簡単な始め方 • 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