この記事は最終更新日から1年以上が経過しています

  • 投稿日:2024/04/04
  • 更新日:2024/04/06
時短応援◎Figmaのオートレイアウト機能を使って効率よくデザインを作成しよう〜機能紹介編

時短応援◎Figmaのオートレイアウト機能を使って効率よくデザインを作成しよう〜機能紹介編

会員ID:g4HJ0Iyy

会員ID:g4HJ0Iyy

要約
WEBデザインツールFigmaの便利機能のひとつ「オートレイアウト」機能紹介と設定方法をまとめました。 画面キャプチャを使って、実際の画面を使い説明しています。 1記事に登録できる画像は枚数制限があるため、今回は機能紹介編としています。 設定編は別記事でご紹介します!

この記事はこんなひとにおすすめ!

✅ WEBデザイン作成ツールでFigmaを利用を始めた
✅ Figmaを勉強中の方
✅ Photoshop、Illustratorを使っていてFigmaを検討している人

記事の内容について

Figmaにはたくさんの機能がありますが、今回は私が実際に触って「おおお…なんと便利…!」と思ったオートレイアウト機能について解説しています。

私自身まだまだ勉強中ではありますが、機能をうまく使って効率よくデザイン作成ができるお手伝いになればと思います。

Figmaのオートレイアウト機能とは?

「フレーム」機能のひとつ。
PhotoshopやIllustratorを使われている方にとっては「アートボード」が近いでしょうか。
指定したフレームの中の要素(画像やテキストなど)を規則的に自動で並べることが出来る機能です。

縦並び、横並び、折り返しの有無、要素間の余白の設定などができるので、整列されたデザインを簡単に作ることが出来ます。

続きは、リベシティにログインしてからお読みください

ノウハウ図書館でできること
  • すべての記事の閲覧

  • ブックマーク

  • いいね・レビュー

  • 記事の投稿※応援会員(有料)のみ

  • ポイントの獲得※応援会員(有料)のみ

※会員登録には、新入生会員(初月30日無料)と応援会員(有料)があります

応援会員制度とは?
さらに!
  • リベシティの他の機能やサービスもご利用いただけます詳しく見る

ブックマークに追加した記事は、ブックマーク一覧ページで確認することができます。
あとから読み返したい時に便利です。

会員ID:g4HJ0Iyy

投稿者情報

会員ID:g4HJ0Iyy

トラ会員

この記事に、いいねを送ろう! 参考になった記事に、
気軽にいいねを送れるようになりました!
この記事のレビュー(2
  • 会員ID:XG4n46cU
    会員ID:XG4n46cU
    2024/05/04

    オートレイアウト便利ですね! 知らなかったのでとても参考になりました!ありがとうございます(^ ^)

    会員ID:g4HJ0Iyy

    投稿者

    2024/05/05

    レビューありがとうございます😊 エンジニアさんならFigmaは要件定義でも使えると思うので本当に万能ですよね。 慣れると便利なのでぜひぜひ使ってください!

    会員ID:g4HJ0Iyy

    投稿者

  • 会員ID:48RvLUZi
    会員ID:48RvLUZi
    2024/04/19

    お世話になっております。ちょうどFigmaを使ってデザインを考案しているところで、記事を見させて頂きました。私が全くの初学ですので、すごく勉強になります。ありがとうございました。

    会員ID:g4HJ0Iyy

    投稿者

    2024/04/19

    レビューありがとうございます!うれしいです😃 デザインする前のラフ段階でも使える機能なので、作業が楽になると思います! 私もまだまだ勉強中です。共に学んでいきましょう✨

    会員ID:g4HJ0Iyy

    投稿者