シリーズ目次

No items found.
トップ
/
/
【Figma】Wrap機能解説/レスポンシブなデータをFigmaで作成するチュートリアル【無料】
Figma

【Figma】Wrap機能解説/レスポンシブなデータをFigmaで作成するチュートリアル【無料】

2023
8
19
スキルを上げて、創造のための武器を手に入れよう
すべての動画閲覧には、メンバーシップ加入が必要です
メンバー登録について

Wrap機能を解説して、レスポンシブなデータを作成

Figma2023の新しい機能、おーとオートレイアウト「Wrap」を使ってレスポンシブなデータを作成するチュートリアルです。
誰でもできるのでぜひやってみてください〜!💡

Wrap機能自体の解説はこちら
https://youtu.be/6aJNTvDFAO0

トピック目次

※AIで生成したので若干の間違いはあります

  • 00:00 Wrap機能の実践編の紹介
  • 00:30 完成形の確認
  • 01:19 コンテンツブロックのラップ
  • 05:12 カードのコンポーネント化
  • 06:21 responsiveなwebページの作成
  • 06:54 テキストの設定
  • 10:20 上部ブロックの設定
  • 11:29 フレーム全体の動きの設定
  • 12:24 ヘッダーとコンテンツの設定
  • 14:44 メインコンテンツの余白の設定
  • 17:44 UI UX情報サイトの紹介とコンテンツの利用
  • 19:31 UI UXの初心者向けコースの紹介

AI要約🤖

この動画では、デザイナーがレスポンシブサイトのデザインにWrap機能を実践する方法が紹介されています。Wrap機能とオートレイアウトの設定に焦点を当てて解説されており、具体的な手順や設定方法が詳しく説明されています。

まず、動画ではコンテンツブロックをWrapさせるためにWrap機能を使用し、オートレイアウトのパネルで設定を行う方法が紹介されています。また、最小の横幅や縦幅の設定も重要であり、オブジェクトの最大と最小の設定を行うことが説明されています。

さらに、テキストのブロックにも幅での変化を加える方法も紹介されています。テキストの設定ボックスでオートハイトの設定を行うことで、テキストの自動調整を実現する方法が解説されています。

この動画は、レスポンシブデザインに興味がある方や、Wrap機能やオートレイアウトの活用方法について学びたい方におすすめです。レスポンシブなレイアウトやテキストの自動調整を実現するための手法が詳しく解説されており、デザインの知識やスキルを向上させるのに役立つでしょう。

使うFigmaデータはこちら

Wrap機能チュートリアルのデータ
https://www.figma.com/file/KjirlAjDnfJElPw54666hi/Wrap---Explain-for-Youtube?type=design&node-id=8%3A383&mode=design&t=MDsXlVdvtABgYsIc-1

Wrap機能を解説して、レスポンシブなデータを作成

Figma2023の新しい機能、おーとオートレイアウト「Wrap」を使ってレスポンシブなデータを作成するチュートリアルです。
誰でもできるのでぜひやってみてください〜!💡

Wrap機能自体の解説はこちら
https://youtu.be/6aJNTvDFAO0

トピック目次

※AIで生成したので若干の間違いはあります

  • 00:00 Wrap機能の実践編の紹介
  • 00:30 完成形の確認
  • 01:19 コンテンツブロックのラップ
  • 05:12 カードのコンポーネント化
  • 06:21 responsiveなwebページの作成
  • 06:54 テキストの設定
  • 10:20 上部ブロックの設定
  • 11:29 フレーム全体の動きの設定
  • 12:24 ヘッダーとコンテンツの設定
  • 14:44 メインコンテンツの余白の設定
  • 17:44 UI UX情報サイトの紹介とコンテンツの利用
  • 19:31 UI UXの初心者向けコースの紹介

AI要約🤖

この動画では、デザイナーがレスポンシブサイトのデザインにWrap機能を実践する方法が紹介されています。Wrap機能とオートレイアウトの設定に焦点を当てて解説されており、具体的な手順や設定方法が詳しく説明されています。

まず、動画ではコンテンツブロックをWrapさせるためにWrap機能を使用し、オートレイアウトのパネルで設定を行う方法が紹介されています。また、最小の横幅や縦幅の設定も重要であり、オブジェクトの最大と最小の設定を行うことが説明されています。

さらに、テキストのブロックにも幅での変化を加える方法も紹介されています。テキストの設定ボックスでオートハイトの設定を行うことで、テキストの自動調整を実現する方法が解説されています。

この動画は、レスポンシブデザインに興味がある方や、Wrap機能やオートレイアウトの活用方法について学びたい方におすすめです。レスポンシブなレイアウトやテキストの自動調整を実現するための手法が詳しく解説されており、デザインの知識やスキルを向上させるのに役立つでしょう。

使うFigmaデータはこちら

Wrap機能チュートリアルのデータ
https://www.figma.com/file/KjirlAjDnfJElPw54666hi/Wrap---Explain-for-Youtube?type=design&node-id=8%3A383&mode=design&t=MDsXlVdvtABgYsIc-1

Wrap機能を解説して、レスポンシブなデータを作成

Figma2023の新しい機能、おーとオートレイアウト「Wrap」を使ってレスポンシブなデータを作成するチュートリアルです。
誰でもできるのでぜひやってみてください〜!💡

Wrap機能自体の解説はこちら
https://youtu.be/6aJNTvDFAO0

トピック目次

※AIで生成したので若干の間違いはあります

  • 00:00 Wrap機能の実践編の紹介
  • 00:30 完成形の確認
  • 01:19 コンテンツブロックのラップ
  • 05:12 カードのコンポーネント化
  • 06:21 responsiveなwebページの作成
  • 06:54 テキストの設定
  • 10:20 上部ブロックの設定
  • 11:29 フレーム全体の動きの設定
  • 12:24 ヘッダーとコンテンツの設定
  • 14:44 メインコンテンツの余白の設定
  • 17:44 UI UX情報サイトの紹介とコンテンツの利用
  • 19:31 UI UXの初心者向けコースの紹介

AI要約🤖

この動画では、デザイナーがレスポンシブサイトのデザインにWrap機能を実践する方法が紹介されています。Wrap機能とオートレイアウトの設定に焦点を当てて解説されており、具体的な手順や設定方法が詳しく説明されています。

まず、動画ではコンテンツブロックをWrapさせるためにWrap機能を使用し、オートレイアウトのパネルで設定を行う方法が紹介されています。また、最小の横幅や縦幅の設定も重要であり、オブジェクトの最大と最小の設定を行うことが説明されています。

さらに、テキストのブロックにも幅での変化を加える方法も紹介されています。テキストの設定ボックスでオートハイトの設定を行うことで、テキストの自動調整を実現する方法が解説されています。

この動画は、レスポンシブデザインに興味がある方や、Wrap機能やオートレイアウトの活用方法について学びたい方におすすめです。レスポンシブなレイアウトやテキストの自動調整を実現するための手法が詳しく解説されており、デザインの知識やスキルを向上させるのに役立つでしょう。

使うFigmaデータはこちら

Wrap機能チュートリアルのデータ
https://www.figma.com/file/KjirlAjDnfJElPw54666hi/Wrap---Explain-for-Youtube?type=design&node-id=8%3A383&mode=design&t=MDsXlVdvtABgYsIc-1

No items found.
閉じる

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

0 Comments

Active Here: 0
Be the first to leave a comment.
Loading
Load Previous
Someone is typing...
No Name
Set
4 years ago
Moderator
(Edited)
This is the actual comment. It's can be long or short. And must contain only text information.
Your comment will appear once approved by a moderator.
Load Previous
No Name
Set
2 years ago
Moderator
(Edited)
This is the actual comment. It's can be long or short. And must contain only text information.
Your reply will appear once approved by a moderator.
Load More
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Load More