【Figma】使い方講座#6:YoutubeUIをつくる!! - コンポーネント、ロゴ、アイコンを使ってヘッダーUIをデザインする

Поделиться
HTML-код
  • Опубликовано: 24 янв 2025

Комментарии • 43

  • @寿司好きのまほ
    @寿司好きのまほ 2 дня назад

    はじめましてFigmaの勉強にカイクンさんの動画を利用させていただいています。
    20:45のグレーのRectangleを見えなくするという点ですが、Fillの目👁のアイコンを閉じさせるというやり方で合っていますでしょうか?
    また、画面上ではAppearanceとFillをそれぞれ目のアイコンを閉じさせたときで大差が無いのですが、ほかの作業をする上でこの二つがどのように変わってくるのかご教授いただけますでしょうか。

    • @bono-oo
      @bono-oo  2 дня назад +1

      レイヤーで非表示にすると物体そのものがなくなる判定処理になります⇒ 要素として消えたものになる
      右パネルのFillなどは物質自体はある状態でその中身をいじってることになります

    • @寿司好きのまほ
      @寿司好きのまほ 2 дня назад

      @@bono-oo 早速の返信ありがとうございます。あちこちいじりながらなんとかお手本通りのものを完成させることが出来そうです!
      今後ともよろしくお願いします!

  • @1108gamma
    @1108gamma 2 года назад

    めちゃくちゃわかりやすいです。ありがとうございます!

    • @bono-oo
      @bono-oo  2 года назад

      ありがとうございます!

  • @rosemary-7897
    @rosemary-7897 Год назад

    とても分かりやすい動画をありがとうございます。
    アイコンを配置する所で長方形を一つ作成し、コピペしていましたがどのようにコピペできるのでしょうか?
    グループ化もバナー作成ではたまたまうまく出来たのですが、今回アイコンと背景となる四角のグループ化とアイコン全部を選択する事ができず、グループ化が出来ません。
    初心者の質問で恥ずかしいのですが、細かい部分を教えていだだけると助かります

    • @rosemary-7897
      @rosemary-7897 Год назад

      解決しました。
      紫の線の囲いを移動させたらグループ化出来ましたし、コピペも出来ました。
      紫の線の囲いが三個位出来てるのですが、大丈夫ですか?

    • @bono-oo
      @bono-oo  Год назад

      実物見ないと何ができてて、何ができてないか、把握できないです!

  • @megaropia
    @megaropia 3 года назад +2

    物凄く丁寧に教えて頂き感謝致します!
    ブランドリソースやMaterial iconの情報なども入れて下さっていて、本っ当に最高です!

    • @bono-oo
      @bono-oo  3 года назад +1

      ありがとうです!

  • @yukoyoshihara9656
    @yukoyoshihara9656 3 года назад

    まじで勉強になります!Figmaシリーズ全部見させていただく予定です!
    ありがとうございます。

    • @bono-oo
      @bono-oo  3 года назад

      あざまーす!

  • @ktaka224
    @ktaka224 3 года назад

    日本語化はどうすれば良いですか?

  • @damalish_ch
    @damalish_ch 4 года назад +2

    ネット検索からのFigmaに移動する際に、横スライドでスムーズに画面が切り替わっていますが、そこを教えて欲しいです!

    • @bono-oo
      @bono-oo  4 года назад +1

      ↓これのことですか?これはMacbookの機能です
      ruclips.net/video/LH3mTMcmVxI/видео.html

  • @海本雅之
    @海本雅之 4 года назад +2

    いつも楽しく動画を見ております!
    動画内の操作について、1点質問がございます。
    今回、ヘッダーのコンポーネントをコピー&ペーストされていますが、実際にやってみたところ、枠のみがコピーされ、なかのBackや電池残量などの要素がコピーされていない状況です。
    どのようにコピーをすれば中の要素を維持した上でコピーができるのでしょうか。
    今回概要欄に貼っていただいたリンク先からFigmaでコンポーネントのファイルを開くと、view onlyとなっているため、中の要素までコピーすることが出来ないようになっているのでしょうか。
    初歩的なご質問になるかと思いますが、ご教示いただけますと幸いです。

    • @bono-oo
      @bono-oo  4 года назад

      ありがとうございます!
      おそらく「Flame」を選択してないからだと思います!
      ViewOnlyでも丸ごとコピペできます。(僕も動画内は同じです)
      左のレイヤーで「# flame」というものを選択してるか確認して、コピペしてみてください!

    • @海本雅之
      @海本雅之 4 года назад

      @@bono-oo
      早々にご教示いただき、ありがとうございます。
      動画のように画像からFrameを選択することができなかったため、左にある各要素の一覧からFrameを選択したところ、コピー&ペーストが出来ました!

  • @am-l9
    @am-l9 3 года назад

    お疲れ様です!
    15:30あたりからのmaterial iconについて質問です。
    アイコン4つのうち、左の2つはmaterial iconの「Video Call」「Cast」を使用していると思ったのですが、用意していただいていた「Figma - ヘッダー素材」にあるicon素材とデザインが少々異なっていました。(白抜きのところが、黒塗りなっていたりします。)
    こちらはsvgをダウンロードして、Illustratorで一部変更したのでしょうか?
    教えていただけると助かります!よろしくお願いいたします。

    • @bono-oo
      @bono-oo  3 года назад +1

      足りない場合はこちらからこちらから使えるので見てみてください〜
      www.figma.com/community/file/878585965681562011/Material-Design-Icons
      ちなみにFigmaでもSVGは編集できます。
      よろしくです!

    • @am-l9
      @am-l9 3 года назад

      material iconの1番上のメニュー、
      「outlined」「Filled」「Rouned」「Sharp」「Two tone」で切り替えられること今気づきました…😮!
      リンクありがとうございます!
      svgも編集できるんですね👀!今度試してみます💪🏻

    • @bono-oo
      @bono-oo  3 года назад

      ファイトです!

  • @川崎正登
    @川崎正登 2 года назад

    自分のスマホがandroidのため、android版で作成しているのですが、android版のマテリアルアイコンが見当たりません。Googleのマテリアルアイコンとも若干違うようで、どこからダウンロードできるかが分からないのですが、教えて頂けませんか?

    • @bono-oo
      @bono-oo  2 года назад

      OSでマテリアルアイコンは変わりません。Googleのマテリアルアイコン=マテリアルアイコンだと思ってます。ので、それ以外だと僕には答えられないかなーと思います!

    • @川崎正登
      @川崎正登 2 года назад

      @@bono-oo わかりました!ありがとうございました。

  • @ぐりゅっくりっひ
    @ぐりゅっくりっひ 2 года назад

    丁寧で分かりやすい説明ありがとうございます!
    一つ質問させていただきたいのですが、
    ヘッダーをコンポーネントからコピーして自分の作業領域に貼り付けた際に、
    左側のレイヤーの文字が紫色になっています。
    カイクンさんのを見ると黒文字なのですが、何か違いはありますか?
    どちらに設定した方が良いなどありますか?

    • @bono-oo
      @bono-oo  2 года назад


      ・コンポーネント化しているパーツになります
       ー親が定義してあり、使いまわせる状態になってます
       ー親が変わると、紫色のものはリンクしていて、全て変更できます
      => 最初は扱いづらいと思うので、その場合は右クリック「Detach Instance」で解除できます!

    • @ぐりゅっくりっひ
      @ぐりゅっくりっひ 2 года назад

      @@bono-oo
      分かりやすい解説ありがとうございます!

  • @林健太郎-u3s
    @林健太郎-u3s 3 года назад

    現在テストエンジニアをしていてUI/UXデザインへの幅を広げるため動画を拝見させていただいております。
    実際に操作していてわからなかった部分がありますので質問させてください。
    要素(<BackやHot air Ballon)を選択した際に、画面右側のDesignタブ内の表示が非活性になっており、サイズ変更などができない状態になってます。また要素を選択して移動しようとすると選択した要素以外のものも動いてしまいます(グループ化されてるイメージ)。実際にヘッダを作る部分では問題ないのですが、今後のトラブル回避のためにご教示いただけますと幸いです。

    • @bono-oo
      @bono-oo  3 года назад

      1個目は紫に色になっている場合はコンポーネント化されていて、親のパーツいじらないと編集できなくなってます(パーツの共通化機能がfigmaにあります。コンポーネントで調べてみてください)
      グループの解除を右クリックか、⌘/Control+Shift+Gでグループ解除してみてください

    • @林健太郎-u3s
      @林健太郎-u3s 3 года назад

      @@bono-oo
      回答ありがとうございます!!Detach Instanceでコンポーネント解除したらできました。
      迅速な回答ありがとうございました!!

    • @bono-oo
      @bono-oo  3 года назад

      押忍!

  • @giboken
    @giboken 3 года назад +1

    コメント失礼します!
    とてもわかりやすく、何度も練習するべく見直しをしているのですが、一つだけうまくいかない部分があり、Material iconsを配置する際に30px×30pxの四角形を配置後、見えない様にされて、各iconたちとグループ化されたと思うのですが、その後、iconを操作しようとしても見えない様になった30pxの四角がアイコンで選ぶことができず、、カイクンの動画だと容易に指定することができる様になっていたので、なぜだろうと思っています。。(レイヤーを画像よりも上に四角をしてもできません)説明がわかりづらいかもですが、もしご回答いただける内容であればご教授いただけると幸いです、、!

    • @giboken
      @giboken 3 года назад

      正しいのかわかりませんが、見えない様にせずに、背景白にしたら選択できる様になりました!

    • @bono-oo
      @bono-oo  3 года назад

      完成ファイルと自分のものを見比べてみてくださいー!
      www.figma.com/file/i0PMMa8PC2TYcjgBqtqcrD/figma%E8%AC%9B%E5%BA%A7?node-id=101%3A83

  • @yt9275
    @yt9275 3 года назад

    こんにちは。丁寧な解説動画ありがとうございます。
    動画のようにコピーしてペーストすると、ボードが背景色の灰色に変わるだけで全くコピペできません。どうして良いか教えて欲しいです。よろしくお願いします。

    • @bono-oo
      @bono-oo  3 года назад

      どこのコピペ動作か知りたいので秒数、具体操作教えてもらえると助かります〜!

    • @yt9275
      @yt9275 3 года назад

      解決しました。
      返事遅くなり申し訳ないです!

  • @なぎりん-y8d
    @なぎりん-y8d 2 года назад

    いつも見てます!!
    質問なのですが、小さなアイコンを作る時、ピクセルごとでしか大きくならず、
    また整列で全部中央にしたいのに、アイコンの周りに四角の線(パスではない)がでてきて、綺麗に並ばなかったりします、、
    どうすれば綺麗に整列されますか??😭😭

    • @bono-oo
      @bono-oo  2 года назад

      >また整列で全部中央にしたいのに、アイコンの周りに四角の線(パスではない)がでてきて、綺麗に並ばなかったりします
      ・アイコンを置きたいブロック範囲のサイズ

      ・アイコンのそのもののサイズ

      ピクセルが合ってないのが理由かなと思います。
      伝えづらいですが!
      逆に綺麗に並んでるアイコンのサイズを元にして、参考に調整してみてください!

  • @uxlordsimplifyingdesignpro5544
    @uxlordsimplifyingdesignpro5544 4 года назад +1

    I had fun watching this, thanks!

    • @uxlordsimplifyingdesignpro5544
      @uxlordsimplifyingdesignpro5544 4 года назад

      fyi 目次 flame -> frame :D

    • @bono-oo
      @bono-oo  4 года назад

      ありがとうございます!!(誤字も🙏
      Figma vs Framer 面白かったです!
      1年後とかにまた覇権変わる可能性ありそうですね〜