【Figma】AutoLayout、Componentの新機能解説

Redesigned auto layout

▼ パネルがリニュアール

パネル。まあまあ使いやすくなったぞ！

• パネルがリニューアル。配置が一部変更
• Frameの上下左右の余白が「左右」「上下」で変更できる
• マウスでオブジェクト間の余白を調整できる

‍

▼ より柔軟なAutoLayoutに

こいつはマジで使いやすくなったぞ！！！

• 文字をHeight指定して、文字数超えたら「...」にできる処理が可能に（コードライク！
• ブロックをAutoLayou内で自由に配置できるようになったぞ（Posision Absolute!

‍

▼ より細かい設定が可能に

‍

‍

‍

Component properties

▼ コンポーネントに「変数」の要素を持たせられる新機能

• Variantsを多く作らないといけなかった課題をクリア
• Variantsとは別にコンポーネントのLayer要素に可変要素を設定できる
• 例えばこんなことができる
• ボタンアイコンのオンオフ
• ボタンテキスト内容を入力できる
• より柔軟/シンプルにコンポーネント作成管理が可能になった

Redesigned auto layout

▼ パネルがリニュアール

パネル。まあまあ使いやすくなったぞ！

• パネルがリニューアル。配置が一部変更
• Frameの上下左右の余白が「左右」「上下」で変更できる
• マウスでオブジェクト間の余白を調整できる

‍

▼ より柔軟なAutoLayoutに

こいつはマジで使いやすくなったぞ！！！

• 文字をHeight指定して、文字数超えたら「...」にできる処理が可能に（コードライク！
• ブロックをAutoLayou内で自由に配置できるようになったぞ（Posision Absolute!

‍

▼ より細かい設定が可能に

‍

‍

‍

Component properties

▼ コンポーネントに「変数」の要素を持たせられる新機能

• Variantsを多く作らないといけなかった課題をクリア
• Variantsとは別にコンポーネントのLayer要素に可変要素を設定できる
• 例えばこんなことができる
• ボタンアイコンのオンオフ
• ボタンテキスト内容を入力できる
• より柔軟/シンプルにコンポーネント作成管理が可能になった

‍