【Figma】初心者向け。何もないけどヨロシク。MENUCATEGORYコーディングWEBデザイングラフィックデザインディレクションARCHIVES202320222021202020192018【Figma】初心者向け。オートレイアウトフレームの機能その2.スクロールまとめはじめに今回はFigmaの基礎「フレーム・グループ・オブジェクト」についての解説です。オブジェクトとグループはAdobeのIllustratorやPhotoshopのオブジェクト要素とグループとほぼ同じ概念ですが、Figmaのフレームには便利な機能がたくさんありAdobeでいうアートボードとは異なります。フレームを使いこなせるようになると、表現の幅も広がり、作業効率も上がると思うので、「フレーム・グループ・オブジェクト」の特徴をそれぞれ解説し、フレームのここが便利だよ。ところまで書いていきたいと思います。楽天市場調べ-詳細)Amazon楽天市場Yahooショッピングフレーム・グループ・オブジェクトの関係それぞれを解説する前にフレーム・グループ・オブジェクトの関係を説明します。基本的には下のような関係が表現できます。オブジェクトちなみにグループの中にフレームを入れることも出来ます。理解しやすいようにオブジェクト・グループ・フレームの順で説明します。あり、デザインを構成する最小単位の要素です。それぞれのオブジェクトには、変形、配置、スタイル(色やフォントなど)の操作を行うことができます。基本的な形状を作成できるテキストを入力し、フォントや文字サイズ、色などを調整できる画像ファイルを挿入し、サイズや位置を調整できるペンツールやブラシツールを使用して、自由な形状を描画できるリサイズや回転、スケールアップなどの図形の変形ができるグループとはグループは複数のオブジェクトをまとめることでデザインを整理するための要素です。複数のグループをさらにグループ化し階層構造を作ることも出来ます。配置、変形、スタイルなどの操作を一括で行うことができます。プロパティの適用ができるフレームとはフレームは複数のオブジェクトやグループをまとめることでインタラクティブなデザインを作成するための要素です。グループと似ていますがフレーム内のオブジェクトまたはグループを自動で整列させたりすることが出来ます。プロトタイプを作成するときにアニメーションやスクロールビューなどのインタラクティブな動きに対し可変するエリアを表現することが出来ます。フレームができること複数のオブジェクトやグループを配置することができるフレーム内に配置されたオブジェクトやグループは、グループ化と同じようにまとめて移動や変形などの操作ができるスクロールビューを作成することができますオートレイアウト(自動的に配置や整列)が設定できる可変するインタラクティブな動き対応することができる初心者【話題のFigmaでWEBデザイン。知れる作れる!】難しい説明よりも現役デ...Figmaって最近よく耳にする。知りたいけどホームページの説明を読んだりして勉強するのもどうかな、すぐに知りたい。導入に二の足の方はぜひ実際にツールを触ってみてください。アートボード」と思いがちですが全然別物です。フレームには、スクロール、タブ、アコーディオンなどのインタラクティブなUIを表現することが出来ます。フレームの中にフレームを入れるような使い方が出来ます。いうか頻繁に使います。オートレイアウトオートレイアウト機能はフレームに配置したオブジェクトの整列を数値で設定することが出来ます。下記のようなカード式のデザインで横に繰り返し配置するレイアウトを作るとき、各カードのマージン(間隔)や上下左右の余白の数値を設定して並べることが出来ます。オートレイアウトを設定したフレームに新しいオブジェクトを追加すると自動的に設定した数値のルールに準じて横に並んでいきます。隣り合う要素との間隔オートレイアウトの左右の余白オートレイアウトの上下の余白オートレイアウトとプロトタイプでアコーディオンを作るオートレイアウトを設定すると親フレームは設定した余白の数値に合わせるため高さや横幅は自動で可変するようになります。この特性を利用するとプロトタイプでインタラクティブな表現が可能になります。アコーディオンのアニメーションを含めたデザインを作成したとします。その際に、アコーディオンの開閉時に合わせフレームサイズが可変することが可能になります。サンプル下記はサンプルの設定です。オートレイアウトで各アコーディオンを10pxの間隔で縦に整列しています。親フレーム(ここではAccordion)の横幅と高さがオフになり、そのかわり「ハグ(子要素のサイズにフィットする)」設定に切り替わります。楽天市場調べ-詳細)Amazon楽天市場Yahooショッピングフレームの機能その2.スクロールスクロール機能はスクロールを設定したフレーム内の子要素スクロールをすることが出来ます。今度は、下記のようなスマホでよく見る横スライド式のカードUIを表現したい時にフレームのスクロール機能を活用します。サンプル設定方法はスクロールさせたい要素の親フレームにプロトタイプタブから「オーバーフロースクロール」でスクロールする方向を設定します。オーバーフロースクロール設定項目スクロールなし横スクロール縦スクロール横スクロールと縦スクロール上記のように、フレームには、グループにはない独自の機能があり、デザインをより効率的かつスマートに作成することができます。初心者から始めるアプリデザイン<UI/UXデザインをFigmaで学ぼう!>Webデザインに...高品質なUIデザインにはルールがある!Figmaの基本的な使い方はもちろん、AppleのAppデザインを忠実に再現する応用編。インタラクティブなデザインで表示形式が可変するときや、複数のグループ、オブジェクトを配置し、整体としてデザインを作成したいときまとめいかがでしたか?初心者向けということで、オブジェクト・グループ・フレームの基礎機能を簡単に説明しました。良ければこちらも合わせて読むと理解が更に深まると思います。CloudのページからXDがなくなって、Figmaの注目度がさらに上がりました。そこでFigmaに乗り換えようか検討中の人に向けてデザインツール別にメリット・デメリットをまとめてみました。何もないけどヨロシク。楽天市場調べ-詳細)Amazon楽天市場Yahooショッピング2023年02月27日WEBデザインnanimonaiプログラム書く方が楽しいデザイナーです。デザイン事務所→フリーランス→スタートアップ入社→フリーランス(現在)。更新しないのでブログは向いてないと思いつつなんとかやってます。よければTwitterのフォローもお願いします。(初月無料)PREV【Figma】乗り換えを迷っている人向け、デザインツール別比較まとめWEBデザイン【Figma】初心者向け。