【スキルアップ】Figmaを極めろ!実践的なFigmaの使い方

今回は、Figmaをより使いこなすための、実践的な使い方や便利な機能について紹介しています😆❗️
🌱 Figmaの基本的な機能や操作に不安があるという方は、
まずはこちらの動画をチェックしてみてください🔽
• 【30分マスター講座】Figmaの基本と便利...
🗂 今回使用したFigmaのファイル 🗂
www.craft.do/s/JJenFS8mwpSWGy
🎥 この動画の目次 🎥
00:00 Figmaの実践的な使い方
00:56 Figmaの基本的な使い方
03:50 1. スタイルのコピペ
04:31 2. ナッジの変更
05:41 3. レイアウトグリッド
07:17 4. アウトライン表示
07:51 5. 要素の置き換え
08:26 6. 画像を配置
09:13 7. テキスト量に応じて変化させる
10:29 8. 固定&可変レイアウト
13:07 9. 要素を浮かせて配置する
13:44 10. 便利な3つの機能
14:30 10-1. テキストプロパティ
15:25 10-2. ブール値プロパティ
16:09 10-3. インスタンスの切り替え
17:12 11. 外枠をコンポーネント化
🤖 その他のAI動画 🔽
❶ ChatGPTとMidjourneyで作るWEBデザイン
• ChatGPTとMidjourneyで作る、...
❷ Midjourneyで写真を元に画像生成
• 【AIツール】Midjourney - ミッ...
❸ ChatGPTでWebサイトを作れるか?
• ChatGPTでコード生成、Webサイトを作...
❹ AI化するエクセル・パワポ
• 【ChatGPT】エクセルやパワポがAI化「...
❺ AdobeのAIツール"Firefly"で出来る24のこと
• 【Adobe アドビ】AIツール「Firef...
❻ GitHub Copilotで自動コーディング
• 【自動コーディング】GitHub Copil...
❼ Adobeの画像生成AI"Firefly"ベータ版使ってみた
• Adobeの画像生成AI「Firefly -...
⭐️ 自分でWebサイト作ってみませんか? ⭐️
誰でも、できる!Webサイト公開の流れ!
• 【10分でサイト公開】誰でもできる!Webサ...
✅ ご視聴いただきありがとうございます🙇‍♂️
この動画を気に入っていただけたら、ぜひチャンネル登録よろしくお願いします❗️
👇『HIROCODE.ヒロコード』をチャンネル登録する 👇
kzread.info?sub_c...
◆ Twitter. ツイッター
/ hirocodeweb
◆ Instagram. インスタグラム 👈 オススメ❗️
/ hirocodeweb
🔋 僕が使っている、おすすめのデバイス 🔋(アフィリエイト広告を使ってます!)
【 マウス 】
✅ ロジクール アドバンスド ワイヤレスマウス MX Master 3
amzn.to/34Zn5LH
" ボタンカスタマイズによって作業の効率化が図れます。アプリケーションごとにカスタマイズ可能です。 "
【 キーボード 】
✅ ロジクール アドバンスド ワイヤレスキーボード KX800 MX KEYS
amzn.to/38S1B4i
" 打ちやすく疲れにくく、タイピング音も静か。長時間コーディングする方にオススメ。 "
【 パソコン 】
✅ Apple Macbook Pro 16inch
amzn.to/2WXKtEN
" 画面サイズ大きいと作業が捗るので便利です。初期投資で良いパソコンの使用をオススメします。 "
【 周辺機器 】
✅ Apple AirPods Pro
amzn.to/3rAyU4u
" カフェでの作業や通勤時間など、ノイズキャンセリング機能で周りの雑音に影響されることなく集中できるようになります。他にApple機器を使用している方はAirPodsがオススメです。
✅ Apple iPad Pro 11インチ
amzn.to/3mZuvoo
" macに搭載されているSidecarという機能で、iPadをサブディスプレイとしての利用が可能です。 "
📕 おすすめ書籍 📕
【 デザイン 基礎編 】
✅ 1冊ですべて身につくHTML & CSSとWebデザイン入門講座
amzn.to/3o8vofO
" webデザインの基礎とコーディング(HTML/CSS)の基礎がわかる。入門者におすすめの一冊です。 "
✅ なるほどデザイン
amzn.to/2X48Z77
" デザイン全般について、図解で視覚的に分かりやすく説明がされている書籍。デザインに興味がある人にオススメです。 "
【 デザイン 思考編 】
✅ 誰のためのデザイン?
amzn.to/3o4gzun
" デザインにおける役割を理解できる。デザインをする上で何を考える必要があるのかが分かる本。 "
✅ IAシンキング Web制作者・担当者のためのIA思考術
amzn.to/2KETvEn
" デザイン以前のサイト設計における思考の方法を身につけるための一冊。 "
【 書籍デバイス 】
✅ キンドルペーパーホワイト Kindle Paperwhite
amzn.to/3n2AwRh
" 200冊あったビジネス書を処分してこちらを導入。一部デジタル化されていない書籍はありますが、紙の本に特別なこだわりのない方は電子書籍での読書をオススメします。
🎧 BGM 🎧
----------------------------------------------------------
Music Title: Happy And Joyful Children
Music Link: • Happy Children Backgro...
----------------------------------------------------------
#adobefirefly #chatgpt #画像生成ai

Пікірлер: 26

  • @punz.3rd
    @punz.3rd Жыл бұрын

    待ってましたっ🎵

  • @hirocode

    @hirocode

    Жыл бұрын

    嬉しいです😊♪ありがとうございます😆❗️

  • @SM-xy9ms
    @SM-xy9ms5 ай бұрын

    神動画すぎます!ありがとうございます!

  • @hirocode

    @hirocode

    5 ай бұрын

    嬉しいです😆❗️ありがとうございます🙇

  • @takari8419
    @takari84192 ай бұрын

    いつもためになる動画をありがとうございます 13:44からの内容はFigmaの画面が変わり初心者には難しいので新たに動画にして頂くとありがたいです

  • @7akarin
    @7akarin3 ай бұрын

    便利な使い方の方法を学べて助かります!🥹✨✨✨

  • @hirocode

    @hirocode

    3 ай бұрын

    嬉しいコメントいただきありがとうございます🙇❗️

  • @user-pr3dr8qh9f
    @user-pr3dr8qh9f9 ай бұрын

    素敵な動画をありがとうございます!WindowsでスタイルのコピペをしたいときはCtrl + Alt + Cでスタイルのコピー。Ctrl + Alt + Vでスタイルを反映出来ました!これから使っていきたいと思います!

  • @hirocode

    @hirocode

    9 ай бұрын

    嬉しいコメントと、Windowsの情報ありがとうございます😆❗️

  • @yukidaruma-ym8dv
    @yukidaruma-ym8dv11 ай бұрын

    無料で視聴させていただける内容じゃないです!有益な情報をたくさんありがとうございました!

  • @hirocode

    @hirocode

    11 ай бұрын

    嬉しいコメントいただきありがとうございます🙇❗️

  • @fumif2825
    @fumif2825 Жыл бұрын

    フレーム→オートレイアウトの作業は shift+aでオートレイアウト直接適用はよくよくよく使うので、おすすめです!(紹介されていなかったので) いつも勉強させてもらってます!

  • @hirocode

    @hirocode

    Жыл бұрын

    めちゃめちゃ有益な情報共有ありがとうございます😆❗️❗️

  • @fumin414
    @fumin414 Жыл бұрын

    いつも分かり易い説明ありがとうございます。これからもたくさん教えてください! さっそくFigmaの機能を試してみたいのですが、説明のときに使った材料を共有してもらうことはできないでしょうか。

  • @hirocode

    @hirocode

    Жыл бұрын

    ありがとうございます❗️ 概要欄にファイルのURL載せたので、そこからDLできます!😆 .figファイルはFigmaの画面にドラッグ&ドロップすれば開けます!

  • @fumin414

    @fumin414

    Жыл бұрын

    ありがとうございます!活用させていただきます❤

  • @user-gn6og5jx6n
    @user-gn6og5jx6n7 ай бұрын

    本物の神動画をありがとうございました🥹 ナッジを設定できるのも知らなかったですし、コンポーネントのプロパティ>インスタンスの入れ替え設定>応用でモーダルのコンポーネント の流れが凄すぎてぶっとびました。。。! 動画で作成したデザインを公開されてるのも、本気でありがたすぎます... 可能であればのリクエストなのですが、現在私はfigmaのレイヤーの命名規則(コーディングにそのまま応用させたい..けどどこまでどんな風に決めておくかのライン)で悩んでいます。 他にも、figma to vsCodeを使用するときなどに、コーディングしやすい作り方(スタイル設定、コンポーネントのバリエーションやカラー名の命名規則など)で、ヒロコード様のご見解があれば知りたいです! 興奮して沢山書いてすみません🙇今後も楽しみにしています!

  • @hirocode

    @hirocode

    7 ай бұрын

    そういっていただけてめちゃくちゃ嬉しいです😭ありがとうございます🙇 Figmaからコーディングにする流れについての動画検討してみます❗️❗️

  • @user-rz6zi4wc9j
    @user-rz6zi4wc9j3 ай бұрын

    最近figmaを使い始めていて参考にさせていただいてます。 質問なのですが、inspectのタブが表示されないのですが、無課金では使えないのでしょうか?

  • @hirocode

    @hirocode

    3 ай бұрын

    開発モード(インスペクト)は今年から有料になりました😱 テキストのコピーやフォントやサイズなどの情報は、閲覧権限で共有すれば確認することがでるようです🙇

  • @user-rz6zi4wc9j

    @user-rz6zi4wc9j

    3 ай бұрын

    @@hirocode ありがとうございます!

  • @10nTube
    @10nTube9 ай бұрын

    Figmaの素晴らしい内容の動画をいつも有難うございます! 「11. 外枠をコンポーネント化」のところをもう少し順序立てして詳しく、初心者用にご説明頂けると嬉しいです。 よろしくお願いします。

  • @hirocode

    @hirocode

    8 ай бұрын

    嬉しいコメントいただきありがとうございます😭 コンポーネントに関する動画作成してみます😆❗️❗️

  • @shibainu88887

    @shibainu88887

    2 күн бұрын

    @@hirocodeグループ化の後にコンポーネントして、テキストを拡大する流れの部分がなかなか理解できないので、是非コンポーネントについての動画を作成してください!

  • @user-tx9re5mg2x
    @user-tx9re5mg2x5 ай бұрын

    14:40 contentがないんですけど…バージョン変わったんですかね?泣(Windowsです) 15:47 レイヤー横にマークがないです(号泣)

  • @hirocode

    @hirocode

    5 ай бұрын

    コメントありがとうございます! contentなくなってますね😱テキストの項目の1番したに移動しています! また、レイヤーのマークについては、左サイドバーのレイヤーパネルでインスタンス(菱形のアイコン)を選択しているか確認してみてください🙇

Келесі