オートレイアウト

FigmaのREST APIで取得したJSONデータから、FrameがAuto Layoutかどうかを判断するには、以下のフィールドをチェックします：

• layoutMode: このフィールドが存在し、値が "HORIZONTAL" または "VERTICAL" であれば、そのFrameはAuto Layoutが適用されています。

例えば、以下のようなJSON構造です：

1
2
3
4
5
6
7

{
  "id": "123",
  "name": "Frame 1",
  "type": "FRAME",
  "layoutMode": "HORIZONTAL",
  ...
}

この例では、layoutModeが "HORIZONTAL" なので、このFrameはAuto Layoutが適用されています。

ソース: Copilot との会話、 2024/9/19 (1) Figma オートレイアウトの使い方とうまくできないときの … - Designup. https://designup.jp/figma-auto-layout.html. (2) 【Figma】オートレイアウトの使い方完全ガイド（Auto Layout …. https://tagnote.net/figma/auto-layout/. (3) 【Figma】フレームの使い方マスター編 〜グループとの違いや …. https://implist.dev/entries/figma-frame-and-auto-layout-group. (4) Working with Auto Layout in Figma - a Self-Guided Tutorial. https://www.figma.com/community/file/1207414800398401244/working-with-auto-layout-in-figma-a-self-guided-tutorial. (5) FrameNode | Plugin API - Figma. https://www.figma.com/plugin-docs/api/FrameNode/.

Axis

FigmaのAuto LayoutにおけるprimaryAxisとcounterAxisは、レイアウトの方向と子要素の配置に関する重要な概念です。

Primary Axis

• Primary Axisは、Auto Layoutのメインの方向を指します。例えば、Auto Layoutが水平（HORIZONTAL）に設定されている場合、Primary Axisは左右の方向になります。垂直（VERTICAL）に設定されている場合は、上下の方向になります。
• Primary Axis Align Itemsは、子要素がPrimary Axisに沿ってどのように配置されるかを決定します。例えば、MIN、MAX、CENTER、SPACE_BETWEENなどの値があります²。

Counter Axis

• Counter Axisは、Primary Axisに対して垂直な方向を指します。水平レイアウトの場合、Counter Axisは上下の方向になり、垂直レイアウトの場合は左右の方向になります。
• Counter Axis Align Itemsは、子要素がCounter Axisに沿ってどのように配置されるかを決定します。例えば、MIN、MAX、CENTER、BASELINEなどの値があります¹。

これらの設定を使うことで、FigmaのAuto Layoutフレーム内の要素を柔軟に配置することができます。

他に質問があれば教えてくださいね！

ソース: Copilot との会話、 2024/9/19 (1) primaryAxisAlignItems | Plugin API. https://www.figma.com/plugin-docs/api/properties/nodes-primaryaxisalignitems/. (2) counterAxisAlignItems | Plugin API. https://www.figma.com/plugin-docs/api/properties/nodes-counteraxisalignitems/. (3) Chapter 4: コンポーネントとスタイル｜ふじけん / kenshir0f. https://note.com/fjkn/n/ne50d8b5f59d3.