Figma Plugin公開までの壁を乗り越える

『Figmaお楽しみトーク Vol.2』の登壇資料です

Create Figma Plugin https://yuanqing.github.io/create-figma-plugin/

Transcript

1. Figma Plugin/Widget
   
   公開までの壁を乗り越える
   Figmaお楽しみトーク vol.2 @mottox2
   

   View Slide

2. @mottox2
   

   View Slide

3. Japanese Font Mixer
   Plugin
   

   View Slide

4. Simple Markdown Notes
   Widget
   

   View Slide

5. 初プラグインを公開するまでに
   
   お蔵入りになったものがある
   公開だけがゴールではないけど・
   ・
   ・
   

   View Slide

6. Figmaプラグイン開発どこまでやった？
   C プラグインを利用してい1
   C プラグイン開発を試したことがあ1
   C プラグインで機能を実装したことがあ1
   C プラグインを公開したことがある
   

   View Slide

7. Figmaプラグイン開発どこまでやった？
   C プラグインを利用してい1
   C プラグイン開発を試したことがあ1
   C プラグインで機能を実装したことがあ1
   C プラグインを公開したことがある
   自分はずっと実装止まりだった
   

   View Slide

8. Figmaプラグイン開発どこまでやった？
   C プラグインを利用してい1
   C プラグイン開発を試したことがあ1
   C プラグインで機能を実装したことがあ1
   C プラグインを公開したことがある
   ここのハードルが高い
   

   View Slide

9. プラグイン公開への
   
   ハードルを下げるヒント
   今日話すこと
   

   View Slide

10. 前提
    9 FigmaPluginやWidgetの機能は実装してい
    9 大きなものではなく小さなツール的なものを作っている
    

    View Slide

11. なにがハードルになっているのか？
    1. 開発環境の設定
    
    2. UIの整備
    
    3. ストア掲載情報の準備
    

    View Slide

12. 開発環境の設定
    a デスクトップアプリから作るテンプレートは最初の一歩と
    してはいいが、
    作り続けていくうちに辛くな$
    a `@figma/create-widget`がいい感じのものを吐き出す
    が、
    プラグイン向けに同等のものはない
    

    View Slide

13. UIの整備
    QドキュメントによるとFigmaとの一貫性を保つことが推奨
    されていE
    Q 紹介されているCSS/JSはあまり使い勝手がよくない
    https://www.figma.com/plugin-docs/figma-components
    

    View Slide

14. ストア掲載情報の準備
    % 最初の設定が単純にめんどくさ2
    % アイコンとカバー画像が必F
    % プラグインの出来がよくないとやる気がでない
    

    View Slide

15. 1. 開発環境の設定
    
    2. UIの整備
    

    View Slide

16. 解決策
    Create Figma Pluginを使う
    

    View Slide

17. Create Figma Pluginとは
    W 作者はShopifyのデザイナー@yuanqing9
    W Figmaプラグイン開発におけるテンプレートの展開、
    ビル
    ド周りの整備、
    UIコンポーネント、
    ユーティリティ集を含む
    総合的なツールキット
    https://yuanqing.github.io/create-figma-plugin/
    

    View Slide

18. Demo
    

    View Slide

19. DEMO
    A npx create-figma-plugi9
    A npm install; npm run watch2
    A Figma側で生成されたmanifest.jsonをimportす
    A プラグインの実装を行う
    

    View Slide

20. @create-figma-plugin/build
    S PluginもWidgetも同じCLIから作れs
    S Preact前提でエントリーポイントが隠蔽されていて、
    ui.tsx
    でexport defaultしたコンポーネントがマウントされs
    & 余計なものが見えないのでシンプルに扱える
    

    View Slide

21. @create-figma-plugin/build
    基本的なテンプレートだとファイルはこれだけ

    余計なものに目がいかなu
    R src/ui.tsx iframe側のエントリーポインf
    R src/main.ts sandbox側のエントリーポインf
    R package.jsoP
    R tsconfig.jsoP
    R README.md
    

    View Slide

22. @create-figma-plugin/ui
    # Preact製のUIコンポーネントライブラf
    # Storybookのページが公開されていb
    # https://yuanqing.github.io/create-figma-plugin/
    storybook
    

    View Slide

23. View Slide

24. @create-figma-plugin/utilities
    ( Figmaプラグイ
    ン開発に使えるUtilityが用意されていF
    ( Events, Node, Color, Settings系はよくつか
    ( 特にEvent系Utilityはお気に入り
    

    View Slide

25. 3. ストア掲載情報の準備
    

    View Slide

26. おまけ: ストア情報を揃える
    u ストア情報を入力するので一番大変なのは画像づくE
    u スクショをうまく使って作るのが7
    u Communityの先人の知恵をお借りするのがよさそS
    u 気に入らなくてもストア情報の更新は後からでもできる
    

    View Slide

27. おわりに
    H Create Figma Pluginに乗っておけば公開までに迷うこと
    が減$
    H ストアは先人の知恵を借りてある程度楽にな$
    H あとは気持ち次第
    

    View Slide

28. Thank you!
    

    View Slide