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

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers.
Avatar for takanorip takanorip
January 25, 2021

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

Avatar for takanorip

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