No video

【2024最新】30分マスター講座 Figmaの基本と便利な使い方! | WEBデザインツール

  Рет қаралды 75,486

HIROCODE.

HIROCODE.

Күн бұрын

WEBデザインツール「Figma(フィグマ)」の基本的な使い方・便利な機能について解説しています。😊♪
まだ使ったことがある方や、使い始めたばかりの方にオススメの内容です😆❗️
【※以前の動画内容を一部アップデートしたものです】
Figmaがもっと効率的に使える、プラグインの紹介動画はこちら 🔽
• Figmaのプラグイン10選 2022【拡張機能】
🎥 この動画の構成 🎥
00:00 Figma(フィグマ)の基本的な使い方
00:29 Figmaとは?
00:40 Figmaでできること
00:50 アカウントの作成
01:02 無料プラン・有料プラン
01:29 ログイン後の画面について
01:54 ファイルを作成する場所
02:04 チームとは?
02:32 下書きについて
03:01 新規デザインファイルを作成する
03:27 画面構成(デザイン画面)
03:58 ツール(ツールパネル)
06:47 ・フレーム
08:27 ・グループ
08:57 ・コンストレインツ
10:15 ・レイヤー
11:05 ・整列・並び替え
11:31 ・オートレイアウト
12:32 ・画像
13:39 ・スタイルの定義
15:28 ・バリアブル
15:58 ・コンポーネント / インスタンス
20:34 ・バリアント
22:45 ・プロトタイプ
24:18 ・共有
26:02 ・書き出し
✅ ご視聴いただきありがとうございます🙇‍♂️
この動画を気に入っていただけたら、ぜひチャンネル登録よろしくお願いします❗️
👇『HIROCODE.ヒロコード』をチャンネル登録する 👇
kzfaq.info?sub_c...
◆ Twitter. ツイッター
/ hirocodeweb
◆ Instagram. インスタグラム 👈 オススメ❗️
/ hirocodeweb
🔋 僕が使っている、おすすめのデバイス 🔋(アフィリエイト広告を使ってます!)
【 マウス 】
✅ ロジクール アドバンスド ワイヤレスマウス MX Master 3
amzn.to/34Zn5LH
" ボタンカスタマイズによって作業の効率化が図れます。アプリケーションごとにカスタマイズ可能です。 "
【 キーボード 】
✅ ロジクール アドバンスド ワイヤレスキーボード KX800 MX KEYS
amzn.to/38S1B4i
" 打ちやすく疲れにくく、タイピング音も静か。長時間コーディングする方にオススメ。 "
【 パソコン 】
---- パソコン ----
✅ 【 Apple 13インチMacBook Pro 2022 】
amzn.to/3bDPYmU
"最新M2チップ搭載!初期投資で良いパソコンの使用をオススメします。 "
【 周辺機器 】
✅ 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...
----------------------------------------------------------
#WEBデザイン #Figma #XD

Пікірлер: 52
@real_document
@real_document 6 ай бұрын
待ってましたー! あとでじっくり見ますー!🛴
@hirocode
@hirocode 6 ай бұрын
ありがとうございまする🙇❗️オートレイアウトの詳細とか追ってアップする予定です!
@rinrinrinrinringooooo
@rinrinrinrinringooooo 5 ай бұрын
めっちゃ勉強になります!ありがとうございます!
@hirocode
@hirocode 5 ай бұрын
嬉しいです!ありがとうございます😆❗️
@tomcho7698
@tomcho7698 4 ай бұрын
とっても分かりやすかったです!
@hirocode
@hirocode 4 ай бұрын
ありがとうございます😆❗️
@jisui__083
@jisui__083 4 ай бұрын
最近figma使って勉強してるので わかりやすかったです!ありがとうございます♪
@hirocode
@hirocode 4 ай бұрын
嬉しいコメントいただきありがとうございます🙇❗️❗️❗️
@ch-if7my
@ch-if7my 2 ай бұрын
大変わかりやすかったです、
@hirocode
@hirocode 2 ай бұрын
嬉しいです😭❗️ありがとうございます🙇❗️
@user-ki9ck5cx8o
@user-ki9ck5cx8o 2 ай бұрын
よくわかります。やってみます。ありがとうございました。
@hirocode
@hirocode 2 ай бұрын
よかったです😆ありがとうございます🙇❗️
@user-vw8gu5nk3n
@user-vw8gu5nk3n Ай бұрын
1番わかりやすい動画✨
@hirocode
@hirocode 25 күн бұрын
ありがとうございます😭‼️
@user-jw4oh9jo8p
@user-jw4oh9jo8p 3 ай бұрын
簡潔で分かりやすい!ちょっとアプリ作りたいので助かりました。
@hirocode
@hirocode 3 ай бұрын
嬉しいコメントいただきありがとうございます😆❗️
@otoka179
@otoka179 4 ай бұрын
さくっと概要や使い方知るのにちょうといい!サンドイッチ勉強で使うにもちょうどいいサイズ。めっちゃ助かりました!
@hirocode
@hirocode 4 ай бұрын
嬉しいです😭ありがとうございます🙇❗️
@NnN-si4lg
@NnN-si4lg 6 ай бұрын
助かる。
@hirocode
@hirocode 6 ай бұрын
ありがとうございます😆❗️
@Azurite00F
@Azurite00F Ай бұрын
神!
@hirocode
@hirocode Ай бұрын
ありがとうございます😆❗️
@kurapon2010
@kurapon2010 6 ай бұрын
待ってたぜー 続編!
@hirocode
@hirocode 6 ай бұрын
ありがとうございます😂❗️すみません💦 一応続編というより以前の動画の古くなった部分修正したものになってます🙇❗️
@kurapon2010
@kurapon2010 6 ай бұрын
@@hirocode オートレイアウト含めて、ページの構造について、触れてほしいです!
@hirocode
@hirocode 6 ай бұрын
@@kurapon2010 今度オートレイアウトの動画上げる予定あるので、そっちが参考になるかもです😆‼️
@user-ld4rw5xk5l
@user-ld4rw5xk5l 3 ай бұрын
わかってても、見てみると自分が使ってない機能があってありがたい。
@hirocode
@hirocode 3 ай бұрын
嬉しいコメントいただき、ありがとうございます😆❗️
@user-so1yq1ny3o
@user-so1yq1ny3o 10 күн бұрын
非常にわかりやすいです、ありがとうございます。あととても気になるのが、投影している画面上の資料のフォントはなんでしょうか?新ゴ系ですか??かっこいいです。
@hirocode
@hirocode 9 күн бұрын
嬉しいコメントいただきありがとうございます😆❗️スライドで使ってるフォントは基本、コーポレート・ロゴとMOBOを使ってます😊♪
@user-qv8pv8be4b
@user-qv8pv8be4b 4 ай бұрын
Figmaの使い方が分かりやすく説明されていて参考になります。これからも、30分マスター講座を続けてください。心待ちにしています。 😀💘🐾🗾Thank you!!🍎🍏🍐🍑 Figma最高!!😆☺🎉💕 そう思えるようになりました!!感謝しています。😼😻😸
@hirocode
@hirocode 4 ай бұрын
そう言っていただけてとっても嬉しいです😭他にも動画出せるように頑張ります🙇❗️
@user-sb7nv3yg9j
@user-sb7nv3yg9j 5 ай бұрын
恥ずかしながらFigma初心者です😅 Figmaで作成したデザインをhtmlに変換したくて色々調べ、Figma to HTMLにたどり着きました。が、自分なりにプラグインやってみましたがうまくいきません😭
@hirocode
@hirocode 5 ай бұрын
コメントありがとうございます☺️♪ HTMLへの変換はなかなか難しいです💦特に、オートレイアウト辺りを理解した上で正しく組んであげなきゃというハードルがあるので、最初は自分でHTML書くのがベターです❗️
@user-sb7nv3yg9j
@user-sb7nv3yg9j 5 ай бұрын
@@hirocode コメントありがとうございます! やはりHTML変換は難しいんですね😅コーディングがんばります!
@user-wf8bi4wt1s
@user-wf8bi4wt1s 3 ай бұрын
とても分かりやすくて勉強になります。 13:37の画像を塗りとしてシェイプにコピーする際にショートカットキーなどを使用されていますでしょうか? 塗りとしてコピー出来ず困っております・・・・ 初歩的な質問で申し訳ありませんが、ご教授いただけると幸いです。
@hirocode
@hirocode 3 ай бұрын
嬉しいです!ありがとうございます😆❗️cmd + opt + c でコピーして、cmd + opt + vでペーストできます❗️
@user-wf8bi4wt1s
@user-wf8bi4wt1s 3 ай бұрын
極めろの動画でスタイルのコピーについて載せて下さっているのを発見いたしました。 ありがとうございました。 これからも参考にさせていただきます!
@ayanehiragana1303
@ayanehiragana1303 Ай бұрын
めっちゃわかりやすいけど、まぁす⤴️の言い方がめっちゃ気になる😂
@hirocode
@hirocode Ай бұрын
ありがとうございます!それ改めて自分で見てみても気になります😅
@user-kl4mp7fe5b
@user-kl4mp7fe5b 8 күн бұрын
文字を入力するとたまに入力ができない時やクリックした後にクリックを解除したのにハイライトが勝手についてくるあるのですが何か理由があるのでしょうか?
@hirocode
@hirocode 7 күн бұрын
コメントありがとうございます❗️僕の環境だとFigma使っていてそういった症状が出たことないので、おそらく使用環境が影響してる可能性が高そうです🤔
@staygold0801
@staygold0801 6 ай бұрын
オートレイアウト難しいですね。。
@hirocode
@hirocode 6 ай бұрын
今度オートレイアウトについての動画挙げる予定あります❗️❗️
@staygold0801
@staygold0801 6 ай бұрын
@@hirocode 期待してます!✨
@JRZh
@JRZh 5 ай бұрын
わかりやすかった ありがとうございました。
@hirocode
@hirocode 5 ай бұрын
嬉しいです😭❗️コメントありがとうございます🙇
@cm1812y
@cm1812y 4 ай бұрын
短時間で重要な機能が勉強できてよかったです! ありがとうございます🤲 また、実務でどの様にfigmaでやりとりしているのか、無料版では仕事は出来ないのか?なども知れると嬉しいです>< ※まだ実務で使用した事がないド初心者(ドラフトからプロジェクトにファイルを移動でつまづいているぐらいです)です...すみません
@hirocode
@hirocode 4 ай бұрын
仕事の流れとか動画にしても面白そうですね😆❗️コメントいただきありがとうございます🙇❗️
@happaaa88
@happaaa88 Ай бұрын
初心者には専門用語が多すぎてついていけませんでした😅
@hirocode
@hirocode 25 күн бұрын
全体的にざっくりな使い方で申し訳ないです💦
@pionyu2639
@pionyu2639 Ай бұрын
説明遅えのにショートカットキー使ってどんどん進めないで欲しい
【20分マスター講座】Figmaオートレイアウト機能!
17:11
HIROCODE.ヒロコード
Рет қаралды 12 М.
Little girl's dream of a giant teddy bear is about to come true #shorts
00:32
50 YouTubers Fight For $1,000,000
41:27
MrBeast
Рет қаралды 207 МЛН
Secret Experiment Toothpaste Pt.4 😱 #shorts
00:35
Mr DegrEE
Рет қаралды 34 МЛН
【スキルアップ】Figmaを極めろ!実践的なFigmaの使い方
18:54
HIROCODE.ヒロコード
Рет қаралды 35 М.
【2時間で理解する!】Webデザイナー向けfigma初心者講座
1:55:15
動画でWebデザインにtorikumu
Рет қаралды 15 М.
【2024年最新版】副業Webデザイナー必須ノーコードツールSTUDIOの基本使い方徹底解説
1:15:44
【完全版】Canvaで出来る25の事・使い方
21:05
mikimiki web スクール
Рет қаралды 186 М.
Little girl's dream of a giant teddy bear is about to come true #shorts
00:32