本文へスキップ
hdknr blog
戻る

Figma

更新日:

オートレイアウト

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

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

{
  "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におけるprimaryAxiscounterAxisは、レイアウトの方向と子要素の配置に関する重要な概念です。

Primary Axis

Counter Axis

これらの設定を使うことで、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.



前の記事
さくらのレンタルサーバー
次の記事
Shopify