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

[@same_midorimushi]

めちゃくちゃ分かりやすかったです！

[@hirocode]

そう言っていただけて嬉しいです😆❗️ありがとうございます🙇！

[@punz.3rd]

遅ればせながらFIgma需要の高まりに遅ればせながらやってますが、まあ本当に感謝！！！！本も学校も不要！ 無駄な言葉が全くない説明＆構成とチャプターでサクッと閲覧できるので、ホント参考書のように何度も見返せる。 説明に酔って『ここ分かりにくいんですけど』『繰り返しますが』などの感想ワード過多でA long time teaching動画ばかりの中、本当教えることに特化して、ユーザー目線に立てた構成と説明だと思います。安定した信頼感。時間の無駄にならない動画として本当、ブックマークです！

[@hirocode]

めちゃめちゃめちゃめちゃ嬉しいです😭ありがとうございます🙇‍♂️❗️

[@hoshinopecostar]

Figmaの触り方がなかなか頭に入らず困っていたので助かりました。ありがとうございました！

[@hirocode]

参考にしていただけたようでよかったです😆❗️コメントいただきありがとうございます🙇‍♂️❕

[@FH-ws7ig]

今から始めようと動画を拝見しましたが、説明も動画もとってもわかりやすくて参考になりました。 頑張ってfigma遣いになりたいと思います😂

[@hirocode]

ありがとうございます☺️♪ 頑張ってください😆❗️

[@noe9689]

こんな便利な解説動画が無料なのはありがたすぎる 当方Webデザイン知識は皆無のエンジニアですが、自作サイトを作る際にfigmaでワイヤー作ろうと思い色々調べてるうちにここの動画に行き着きました 公式の解説内容が一般的過ぎて分かりづらかったですが、この動画のおかげで基本的な操作や便利なショートカットが一通り理解できて大変助かりました （今まで案件でfigma見る際に毎回ツールバーからハンドに切り替えていたのが恥ずかしい・・・）

[@hirocode]

お役に立てたようでよかったです☺️♪嬉しいコメントいただきありがとうございます🙇❗️

[@user-tx9re5mg2x]

12:26が全く分からない。全然できません。レイヤーを見ると単に画像とテキストを並べているだけでも無さそうですね。まさにこれのやり方を具体的に伝授頂きたいです。オートレイアウトも回り込みになちゃって（＝この画面にはありませんが、曲線の矢印のものになります、アイコンがタイトルやテキストの左側に周り込んでるため）、この形式をオートレイアウトにするとPaddingが無くなってしまいます...。そこから各々が応用できるテクニックだなと思いました。

[@hirocode]

コメントありがとうございます🙇❗️ おっしゃる通りオートレイアウトまわり複雑な箇所あるのでその点動画にまとめてアップします❗️

[@sayamaru07]

ずっとXDを使用していて、そろそろFigmaに移行しなきゃなぁと逃げていた矢先にこの動画に出会いました。 すごく分かりやすいです。特にXDにはない機能が分かって良かったです。とても参考になりました。

[@hirocode]

ありがとうございます！僕もXDの期間結構ありましたが、Figma使い出してめちゃめちゃ便利なので是非使ってみてください😆❗️

[@developer65537]

Figmaの使い方というよりは、スライドのデザインから読み取れることの方が多かった。すごく参考になる

[@hirocode]

そう言っていただけて嬉しいです😭ありがとうございます🙇❗️

[@申恵晶]

とても分かりやすいです！ ありがとうございます😭

[@hirocode]

こちらこそ嬉しいコメントして下さってありがとうございます😭

[@MN-it6be]

非常にわかりやすかったです！ ありがとうございます！

[@hirocode]

こちらこそ嬉しいコメントいただきありがとうございます🙇‍♂️❕

[@lh-kn2kx]

感謝です❤❤❤❤❤❤❤❤❤❤

[@hirocode]

ありがとうございます😆😆😆❗️❗️

[@maasamartha]

凄く理解がなくて馬鹿なのですが、理解出来ました。最高の参考動画ありがとうございます(泣)

[@hirocode]

参考にしていただけて良かったです😆❗️こちらこそありがとうございます🙇❗️

[@tw20th]

すごくわかりやすかったです。 ありがとうございます♪

[@hirocode]

そう言っていただけてとっても嬉しいです😭 こちらこそありがとうございます🙇‍♂️❗️

[@misato1633]

助かりました😭✨

[@hirocode]

ありがとうございます🙇‍♂️❗️

[@veryr1ce]

webページのモックを作成するツールを探していて、この動画にたどり着きました。 ホバーした時のデザインも作成できるなんて、便利すぎますね！😂 利用してみます！

[@hirocode]

Figma優秀すぎてめちゃめちゃ便利です😊♪拡張機能もたくさんあるので色々試してみてください😆❗️

[@prokichi]

個人開発でアプリのモックを作ろうと考えていた際にこの動画に出逢いました！ とても聴きやすく内容もわかりやすいもので、さっそくインストールして使っています！ まとめてくださってありがとうございます😊

[@hirocode]

参考にしていただけたようで、こちらとしても作った甲斐がありました😊♪ 嬉しいコメントいただきありがとうございます🙇‍♂️‼️

[@cm1812y]

勉強を始めようとしているところだったので、とても助かりました！ありがとうございます✨

[@hirocode]

こちらこそ嬉しいコメントいただきありがとうございます😊❗️❗️

[@tora_bim]

僕はhtml,css,javascriptを学んでいる中学2年生なんですが、スマホのハイブリッドアプリをフレームワーク等を使って、html,css,javascriptで作ろうと思っています。 なので、できればスマホのデザインの動画を上げていただければ嬉しいです！！

[@hirocode]

中2でそのチャレンジ、本当に凄くて尊敬します😵❗️ ご要望いただきありがとうございます😊♪ スマホデザインの動画検討したいと思います❗️

[@ユーキ-p7y]

Figma使い始めたばかりなのでめっちゃ勉強になりました！ とても分かり易かったです！次の動画も楽しみにしてます☺

[@hirocode]

お役に立てたようでよかったです😊♪嬉しいコメントいただきありがとうございます❗️

[@tora_bim]

タイミングが神すぎます！ 本当にありがとうございます！

[@hirocode]

良かったです😊♪こちらこそありがとうございます🙇‍♂️❗️

[@masu4masu]

めちゃめちゃ、わかりやすかったです。　ありがとう！

[@hirocode]

嬉しいです😭 こちらこそ嬉しいコメントいただきありがとうございます🙇‍♂️❗️

[@ssgjkoo]

日本語対応されましたね😊

[@hirocode]

されましたね😆‼️これからもっとFigmaユーザー増えそうですね😊♪

[@ごん-t7v]

ありがとう…ありがとう…

[@hirocode]

こちらこそ、ありがとうございます🙇‍♂️

[@うちゃなちゃ]

それしか言葉が見つからない…

[@abebetaro]

XDを学ぼうと思ったらサービスが終了していたようで 今のトレンドからFigmaが今後のメインツールになっていくんでしょうかね。 Fireworksがなくなったり、こういうツールの移り変わりは結構あるんですかねえ。

[@hirocode]

今の所Figma一強な感じですね🤔 いろんなツールでもある程度基本操作とかが似たり寄ったりなのが救いですね☺️

[@hiram5358]

おせわになります、21:30頃にアイコンをドラッグして複製する様子がありますが、キー操作はどのようにしているのでしょうか？お手数かと思いますが、ご回答よろしくお願いします

[@hirocode]

コメントいただきありがとうございます😊♪ Optionキーを押した状態でオブジェクトをドラッグ&ドロップすると複製されます😆‼️

[@hiram5358]

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

[@naosue8290]

質問があります！13:41頃の画像をコピペしてシェイプに張り付けてる方法ですが、操作方法がわかりません！よければ教えて頂きたいです！

[@hirocode]

コメントいただきありがとうございます😊♪ command + option + c でスタイルのコピーができて、 command + option + v でスタイルの貼り付けができます😆❗️

[@kinako_food_boyfriend-love]

いつも参考にさせて頂いております！ リンクのURLをクライアントに共有したのですが、 デザインは見られるけどコメントがつけられないと言われ 調べても原因が分からず頭を抱えまくっています。 動画どうりに共有しているつもりなのですが… ただ共有するだけではダメなのでしょうか？😭

[@hirocode]

コメントありがとうございます☺️❗️ 匿名でコメントすることができないので、コメントする側もFigmaのアカウントを作る必要があります❗️

[@user-yc5ci4tn2b]

はじめまして！ 最近figmaを使い始めて、全く仕組みがわからず困っていたのですが、この動画は実践しながらチャレンジできるのでとっても感謝しています☺️ 質問があるのですが、バリアント説明の21:36のところでアイコンを複製し、インスタンスを作成したのですが、プロパティパネルに"これらのバリアントのプロパティと値が結合しています。この問題を解決するには、このバリアントに適用されている値を変更してください"と出てきてしまい、プロパティ名とバリアント名が表示されないのですが、何が問題なのでしょうか… わかりにくくて申し訳ないですが、ご教授頂けたら助かります、、🥲🙏

[@hirocode]

こちらこそ見ていただきありがとうございます😊❕ おそらくバリアント名（この動画でいう、黒、青）の名前が重複してるのかと思われます！それぞれの名前を変更したら直るかと思います😆❕

[@user-yc5ci4tn2b]

@@hirocode なるほど！解決しました！ ご丁寧にありがとうございます☺️！ これからも色々と参考にさせて頂きます🙏

[@七草あんこ]

わかりやすい解説ありがとうございます。 動画で使用しているフォント名がわかれば教えてください。

[@hirocode]

ありがとうございます😆❗️フォントいくつか使っていますが、見出しで使用しているフォントは、「コーポレート・ロゴ」というフリーフォントです😊♪

[@ペッペ-q5t]

解説ありがとうございます。 figmaでミスした際にミス前の状態に戻るにはどうすれば良いのでしょうか？ 戻るボタンが見当たらず、大変困っています…。 また、プレゼンテーションボタンを押すと『プロトタイプには一つ以上のフレームが必要です』と表示され、一向に完成形を見ることができません。 フレームはiPhone14を選択しているにも関わらずです。 もし可能でしたらわかる範囲でご教示いただけないでしょうか。 よろしくお願いします。

[@hirocode]

こちらこそご視聴いただきありがとうございます😊♪ 作業を戻すには command + z で1つ戻すことができます❕ フレームについて 画面左上にある # みたいなツールを選択した上で、 アートボード上をクリック、または、右側サイドバーのフレームのテンプレートをクリックすると、アートボード上に白い四角ができます。 これがフレームです。 これを作れば見れるようになるはずです！ また不明点あればなんでも聞いてください😄❕

[@ペッペ-q5t]

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

[@かし-o1x]

現在、XR領域でのUnityエンジニアとして仕事しているのですが、そこでのプロトタイプ作成でfigmaは相性良さそうですか？

[@hirocode]

コメントありがとうございます🙇❗️ インターフェースが平面であればFigmaでも問題なさそうですが、立体とかになってくるとblendarとかの方が良さそうです😆❗️

[@pappy1980]

ちょっと興味が湧いたので拝見しました。 Adobe歴20年なので、ショートカットなど感覚的に操作できないとしんどいなと思っていましたが、結構似てるところあるのでAdobe使いも移行しやすいですね。

[@hirocode]

Adobe歴すごいですね😵❗️おっしゃる通り、結構近いショートカットも多いのでAdobe使ったことある方であれば比較的すんなり使えるかと思います😆❕

[@ayumunagae8567]

18:46　どうやってインスタンスの画像のみを変更してるのかわかりませんでした。

[@hirocode]

ここの挙動で説明すると、まずこの画面には写っていませんが、あらかじめ犬の画像をfigma上に挿入します。 犬の画像を選択した状態で、command + option + c でスタイルをコピーすることができます。 インスタンスの画像を選択した状態で、今度は command + option + v でスタイル（犬の写真（塗り））をペーストすることができます😆❗️

[@ayumunagae8567]

@@hirocode ありがとうございます！！！！出来ました！感動！！ メンターに聞いたら、「そんなのは出来ない」って言われたのに、直後にヒロコードさんから返信が来てできてしまった笑笑

[@staygold0801]

グラフィックデザイン中心に活動してきて、 今更ながらFigmaに着手。 ひじょ〜に助かりました！ありがとうございます！ ショートカットとかイラレに近くて助かります笑 （買収されてどうなるだろう・・？）

[@hirocode]

結構ショートカット同じのあるのでありがたいですよね😆❗️今の所は買収されてからの影響なさそうです🧐

[@TT-mp6sr]

タップしたら♡に色がついたり 自動で背景の画像がスライドされたりを作りたいのですが、無料プランだと厳しいですか？

[@hirocode]

無料プランで全然大丈夫です❗️ 動画を埋め込んだり、複雑に条件分岐させたりする場合に有料プランが必要になる感じです☺️

[@TT-mp6sr]

@@hirocode お返事ありがとうございます！ もし、可能ならそういった細かい指示の動画見てみたいな〜と思います🙇‍♂️

[@さや-x9g]

レイアウト画面を増やそうとすると(3つ目)、アップグレードの画面が出てきてしまいます。 画面を追加するには、お金をかけないといけないということですよね？😢

[@hirocode]

コメントいただきありがとうございます😊♪ ・無料でファイル数の制限なく使用したい場合は、下書き（Drafts）の状態で利用する必要があります。 ・チームやプロジェクト配下のファイルには、ファイル数3つ・ページ数３ページの制限が生まれます。 ・1ページに大量のページデザインを作っていくことはフレームを増やすことで可能です。 上記でわかりますでしょうか、もし不明点あれば再度コメントください🙇‍♂️❗️❗️

[@さや-x9g]

ご丁寧に教えて頂きありがとうございます🙇‍♀️ プロジェクト配下で作業をしているので、制限があるのですね💦 まだ、動画を全て視聴することが出来ていなくて申し訳ないのですが、、 フレームを増やすというのは、ページ(画面)を増やすこととは違うのでしょうか？🙇‍♀️

[@hirocode]

すみません、わかりにくい表現してました🙇❗️ figmaのpageは、いわゆるスプレットシートで言うシートのようなもので、1つのファイル内に、page（シート）を増やすことができます。pc画面用のpage、mobile用のpage、パーツを管理するpageなど分けることができます！ プロジェクト配下だと、このpageの作成に制限があります。 で、デザインしていくページ（画面）、いわゆるお問い合わせページや記事一覧ページ、お知らせのページなど、これらはpage上にフレームを複数配置して、いくつでも作れるって感じです😆❗️❗️

[@さや-x9g]

@@hirocode なるほどです😭😭 理解することが出来ました😭！ 優しく教えて下さり、ありがとうございました🥲！ またすぐ動画拝見させて頂きます！！ 応援しています⚐ﾞ

[@中村-s7g]

figmaを使うと、難しいHTML.CSSなどを書かなくてもweb制作が完成するていうことでしょうか？？

[@vvcc2105]

最近figma使い始めたんですけど、キャンバスの背景色毎回変えてますか？毎回毎回変えるのが面倒すぎて、なにか方法があるのでしょうか…

[@hirocode]

コメントありがとうございます😊♪ 毎回というのは新規デザインファイル作成時ということでしょうか？？ それであれば現状設定できないようです💦

[@KentaroxKondo]

とても有益でした。ありがとうございます！ ところで、Figmaではルーラーを表示して、フレームの中央に目印として配置したりする機能があると思いますが、フレームを等分（1/2）するのではなく、4分割するガイド線を表示するにはどうしたら良いでしょうか。いちいち計算をして、適切な数値の場所にルーラーの線を引かないといけないですか？ 等分地点はルーラー線が自動的にガチっとハマるポイントがあったので調整が楽だったのですが・・・🤔

[@hirocode]

嬉しいです！ありがとうございます😊♪ フレームを選択した状態で、右側サイドバーにあるレイアウトグリッドを追加します。アイコンを押して、グリッドとなっているところを列に変更、数を4、ガターを0にすれば、4分割のガイドが引かれます😆❗️

[@KentaroxKondo]

@@hirocode おおお！いつもありがとうございます！！やってみます！！

[@GN20080411]

WebデザインツールということはHTMLを書き出すのかと思ったらそうではないんですかね? 基本的なところも説明して欲しいです

[@hirocode]

基本的な説明できてなくて申し訳ないです💦 一般的な流れとしては、WEBデザインツール（Figma、AdobeXD、Sketchなど）でWEBデザインを制作します。そのデザインに沿ってコードエディタ（VSCode、Atomなど）を使ってコード化してサイトを構築していきます🙇

[@GN20080411]

@@hirocode うーんなるほど…しかしWebデザインツールで見た目だけ作ったものはHTML書く段階になったら捨ててしまうのでしょうか? 昔はWYSWYGのHTMLエディタがありましたが、最近はその方向は諦めているのでしょうかね…

[@hirocode]

おっしゃる通り、ホームページビルダーやDreamweaverが主流の時代はありましたが、レスポンシブの到来とともにかなり廃れてしまいました💦 現在は、PC Mobile共に同じコードで完結させるのが主流なので、画面サイズによるレイアウト変更がなかなかコード化するのが難しいようです。 ただ、直近ノーコード開発が比較的成長してきていることもあり、WEBデザインがそのままコード化される未来もそう遠くないかもしれません😊♪

[@user-jw5sn5qx1r]

共有されたファイルを開いたら、画面右側のパネルが、Comment Inspect Export となっているのですが、 Designや Prototypeを表示するにはどうすれば良いですか⁇

[@hirocode]

コメントいただきありがとうございます😊❗️ その状態だと、閲覧権限で共有されているので、デザインやプロトタイプを触ることはできません。 ファイルの保有者に、編集権限でファイルに招待してもらう必要があります😆❗️24:41この辺参考にしてみてください🙇‍♂️

[@user-jw5sn5qx1r]

@@hirocode そういうことでしたか！ありがとうございます！初めてfigma触ったのですが調べても分からずで。助かりました🙇‍♂️

[@forrest6742]

figmaウェブ上ではなくアプリとしてダウンロードしてつかいたいのですが、ダウンロードしようとすると、Chromeを入れているのにもかかわらず、Chromeをダウンロードしろとの指示が来ます！そしてそこから先が進まずなかなかダウンロード出来ません！解決策わかる方いれば是非教えてください！

[@hirocode]

www.figma.com/ja/downloads/ こちらでそのようになる状態でしょうか？ 僕の環境（mac）では問題なくDL & インストールを行えました🤔

[@名も無き小市民-u5g]

どういう事がしたい時にこれ使ったらいいよとかをもっと分かりやすく解説して。

[@ポカブ-i3f]

0:56 ここで言ってますよ。笑

[@名も無き小市民-u5g]

パソコン全然知らん俺からしたら後半早いし用語もわからんから全然ついていけへんかった

[@神埼蓮]

なぜみた

[@kanam430]

とてもわかりやすかったです、ありがとうございます！✨

[@hirocode]

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