Figma Learnを読み解く ～フレームについて～

こんにちは！こんばんは！おはようございます！
突然ですが「説明書」って読みますか？

私は実際に使ってみて、わからなければ読むタイプです。ツールも同じで自分で触ってみて、やりたいことをするためにどうしたら解決できるのか調べます。

そこで直面するのは

• 説明書の中身が知らない用語だらけで進まない‥！

• 難しい言い回しが多いと感じる

という経験です。（私の理解力の問題もありますが…笑）

そこで今日はデザイナーが使用するツール「Figma」。その学習プラットフォームを読み解いていこうと思います！

前段が長くなりましたが、れっつらごー✨✨

フレームとは

まずはFigma Learnの内容を見てみましょう！

Figmaでは、レイヤーをキャンバスに直接追加できます。特定のデバイスや画面サイズに合わせてデザインする場合は、デザインのコンテナを作成することがあります。このような場合にフレームを利用できます。
デザインツールの使用経験があれば、アートボードをご存じでしょう。
フレームではアートボードと同様に、キャンバス上のエリアを選択して、その中でデザインを作成できます。従来のアートボートとは異なり、フレームを別のフレームの中にネストできます。これにより、より複雑な、連動するデザインを作成できます。フレームでは、レイアウトグリッド、オートレイアウト、製薬、プロトタイプ作成などの他の機能も利用できます。

アートボードね！なるほど！！！
ん？待てよ…ネスト…？オートレイアウト…？制約…？
私の知ってるアートボードではない…？？

となりませんか？
私は「使い方によって化けるグループ」だと思っています。
では、何ができるのか見ていきましょう～☝️

フレームで設定できる機能

などなど…
そのほかにも便利な機能が備わっており色んな使い方ができます。また、複数の機能を1つのフレームで利用することができます。これらを利用することで、Webデザインをするうえで考慮しなくてはならない様々な事象を✨楽✨に作業ができるようになるのです！

では機能をどのように使用していくのか？
個人的には主に2つのポイントを意識して機能を使用すると想定している動きに近づいていくなと感じています。

• 機能がどう動いているのか理解を深める

• 制作しているデザインのパターンを考える

この2つのポイントが機能を利用するうえで何がポイントなのか、という点に関しては今後の記事でひも解いていこうと思っていますのでお楽しみに…！！

フレームを飾る

機能の一部ではありますが、フレームに直接、塗や線、エフェクトをつけることができます。フレームの中に入っているオブジェクトはフレームより上のレイヤー(階層)にいるので位置関係を考えながら、どこに装飾をつけたいのかを整理して適用していきましょう～～

いかがでしたでしょうか？
今回はフレームが何ぞやというところだけを読み解いていきました。
次回以降はもっと詳しい機能について、読み解いていければと思います。

最後まで読んでいただきありがとうございました！
ではでは、またお会いしましょう～～👋👋

参照

Figma Learn「Figmaデザインのフレーム」
https://help.figma.com/hc/ja/articles/360041539473-Figma%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0