【Figma】Figma Slide のプラグインは何ができるの？

はじめに

みなさんは、Figma Slide 使っていますか？

最近、デザインレビューや社内発表などでも、スライドをFigmaで作る人が増えていると感じます。
私もFigmaの中で完結できる手軽さや、チームで同時編集できる便利さがあったり、最近は、Figma Slideで作ることが多いです。

そんなFigma Slideですが、実はPluginを作れるのを知っていますか？
Figma Design や Figjam と同じように作れるようになりました

ただ、Figma SlideのPluginに「できること」「できないこと」があるので
この記事では、その違いや作り方などを紹介しようと思います。

スライドのプラグインと他のプラグインの違い

Figma Slide用のNode Types

Figma Slideで使えるNode Typesが4つあります。

• SLIDE: 1つのSlideを定義するNode Types
  • サイズは、1920px x 1080pxに固定されています

interface SlideNode extends
  BaseNodeMixin, SceneNodeMixin, ChildrenMixin,
  ContainerMixin, GeometryMixin, CornerMixin,
  RectangleCornerMixin, BlendMixin, ConstraintMixin,
  LayoutMixin, ExportMixin, FramePrototypingMixin,
  ReactionMixin {
    readonly type: 'SLIDE'
    clone(): SlideNode
}

• SLIDE_ROW: スライドの行を定義するNode Types

interface SlideRowNode extends
  BaseNodeMixin, SceneNodeMixin, ChildrenMixin {
  readonly type: 'SLIDE_ROW'

  children: Array<SlideNode>
  appendChild(child: SlideNode): void
  insertChild(index: number, child: SlideNode): void
}

• SLIDE_GRID: スライドの最上位コンテナを定義するNode Types

interface SlideGridNode extends
  BaseNodeMixin, SceneNodeMixin, ChildrenMixin {
  readonly type: 'SLIDE_GRID'

  children: Array<SlideRowNode>
  appendChild(child: SlideRowNode): void
  insertChild(index: number, child: SlideRowNode): void
}

• INTERACTIVE_SLIDE_ELEMENT: スライドで使えるインタラクティブ要素を定義するNode Type

interface SlideNode extends BaseNodeMixin, SceneNodeMixin {
  readonly type: 'INTERACTIVE_SLIDE_ELEMENT'
  readonly interactiveSlideElementType: 'POLL' | 'EMBED' | 'FACEPILE' | 'ALIGNMENT' | 'YOUTUBE'
}

追加機能

• グリッドビューとシングルビューを切り替えることができる

const mode: 'grid' |  'single-slide' = figma.viewport.slidesMode
figma.viewport.slidesMode = 'grid' // or 'single-slide'

グリッドビュー	シングルビュー

• フォーカスしているスライドにアクセスできる

const focusedSlide: SlideNode | null = figma.currentPage.focusedSlide
figma.currentPage.focusedSlide = slideNode

• スライドグリッドを読み取ることができる

const grid = figma.getSlideGrid()

• スライドを並び変えることができる

figma.setSlideGrid([...rest, firstRow])

スライドトランジション

トランジションのスタイル・トランジション時間・イージング、トランジションタイミングを取得・指定できる

{
  style: 'NONE' | 'DISSOLVE' | 'SLIDE_FROM_LEFT', // etc.
  duration: number, // 0.01 - 10 seconds
  curve: 'EASE_IN' | 'EASE_OUT' | 'LINEAR', // etc.
  timing: {
    type: 'ON_CLICK' | 'AFTER_DELAY',
    delay?: number // 0-30 seconds
  },
}

slideNode.getSlideTransition() // トランジションを取得する
slideNode.setSlideTransition(slideTransition: SlideTransition) //トランジションを変更する

スライドのプラグインでできないこと

• Components
• Styles
• Variables
• Libraries
• createConnector()
• createCodeBlock()
• createSection()
• createLinkPreviewAsync()
• setFileThumbnailNodeAsync()

スライドのプラグインのセットアップ方法

こちらの内容を参考に、プラグインをセットアップしてください。

Figma Design の Pluginとの差分は、manifest.jsonのeditorTypeにslideを追加するだけです。

manifest.json

{
  ...
  "editorType": [
    "slides"
  ],
  ...
}

まとめ

この記事では、Figma SlideのPluginで使えるようになった機能を紹介しました。

Figma DesignやFigJamとは異なる部分もあり、
スライド特有のNode Typeやトランジション制御など
色々Pluginでコントロールできそうです！

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。