LOGzeudon with はてなブログ

名古屋で働いているWebデザイナーのブログです

FigmaでAuto Layoutを活用するとTrello風にオブジェクト操作できる

操作の様子

列の順番をドラッグして移動できます。また、コピペで列を増やせます。

カード内のテキストを編集すると、その文字数に応じてカードは伸縮します。カードをドラッグすれば、列の中の順序変更はもちろん、別の列の中への移動も可能です。

どうやっているか

次の構成です。

  1. Auto Layoutな背景
  2. Auto Layoutな列(幅固定)
  3. Auto Layoutなカード
  4. Auto Heightなテキスト

(1) Auto Layoutな背景

f:id:rokuzeudon:20200223002853p:plain

内包するオブジェクト(列)が横に並ぶようAuto Layout設定します。

  • Horizontal : 内包するオブジェクト(列)を横並びに
  • Auto Height : 高さを可変に

(2) Auto Layoutな列

f:id:rokuzeudon:20200223002907p:plain

横幅を固定してカードの操作を容易にしつつ、カードに応じて高さが可変するようAuto Layout設定します。

  • Vertical : 内包するオブジェクト(カード)を縦並びに
  • Fixed Width : 横幅を固定に

また、カードが下に向かって増えていくよう、Align Topも指定しておきます。

(3) Auto Layoutなカード

f:id:rokuzeudon:20200223002920p:plain

テキスト量に応じて下方向に伸びるようAuto Layout設定します。

  • Vertical : 内包するオブジェクト(テキスト)を縦並びに。
  • Auto Width : 幅を可変に。列で既にWidth固定済みなので、ここではFixedを選んでも良い。

(4) Auto Heightなテキスト

f:id:rokuzeudon:20200223005541p:plain

最後にテキストを Auto Height に。他の設定、Auto Width や Fixed Size にすると、テキスト量に応じてカードがAuto Layoutされなくなってしまいます。

終わりに

ざっくりとした状況共有だけなら、これを最も目にするページに配置してカードを管理すれば済むケースもあるかもしれません。

せっかくなのでテンプレートとして公開しようと思ったのですが、それはβ版のコミュニティ機能だと知りました。試しに申請してみたのですが、どうなるのか楽しみです。