初心者向けFigmaの使い方：Webデザインをトレースしてみよう

[@tets0323]

とても実践的！　こういうコンテンツを探してましたありがとうございます　あとはひたすら繰り返します　ずっとお元気で

[@ストレートハッピーすとはぴ]

内容も分かりやすく、 話し方も自信がある感じで、 活舌もしっかりされていて、 これだけ長いのにあまり嚙まないで 素晴らしいと思います。 大変参考になりました。

[@MayukoSoga]

嬉しいお言葉ありがとうございます😊

[@intelligentdh]

終わり方が唐突でしたが、モックと同じものを作るという内容はわかりやすかったです。 今のデスクトップアプリと若干、表示などが違うのですが基本的な考え方みたいなものは伝わりました。

[@レモン-k4f]

とてもとても分かりやすかったです。なので最後まで完成できたのはとても嬉しかったです😊ありがとうございます。もっと早く仕上げられるように練習頑張ります

[@MayukoSoga]

最後まで完成すごいですね！実践ありがとうございます😊

[@tagatamenikimihanaku]

実践的なデザインレクチャーとショートカットキーのご教授、ありがとうございました！実務に即したやり方、大変ためになりました！！！

[@MayukoSoga]

よかったです！ショートカットキーをぜひ体になじませてみてください。作業が爆速します🙌

[@sumito1984]

figma は右も左も分からない状態でしたが、一緒に手を動かすことでイメージ掴めました。ありがとうございます！

[@MayukoSoga]

そう言っていただいて嬉しいです！

[@envii-nq3he]

実際にどうやって使っているのかやってみせているのが好感度高いです。応援しています。

[@果南-l1t]

最近figmaを勉強し始めました！とっても分かりやすく、声も聞き取りやすく、動画アップロードしてくださり感謝いたします🙇‍♀️ありがとうございます！がんばります！

[@MayukoSoga]

コメントありがとうございます。わかりやすいと言っていただけてよかったです！Figmaがんばってください✨

[@coz9691]

めっちゃいい声…

[@user-chiffoncake]

figmaの使い方がわからなかったのですごく参考になりました　ありがとうございます

[@familyfukumimi3995]

figma初心者です。知らないショートカットや機能がたくさん出てきて作業が効率的にできるようになってきました…！！本当にありがとうございます。

[@MayukoSoga]

嬉しいです！作業の効率化のお役に立ててよかったです✨

[@qoo6881]

おすすめでこの動画出てきたのがめちゃくちゃ助かりました〜。ありがとうございます〜！

[@MayukoSoga]

お役に立ててよかったです〜✨

[@ameneko091]

すごくクオリティの高いチュートリアル動画でとても参考になりました！ 他の動画も楽しみにしています！

[@MayukoSoga]

ありがとうございます！他の動画もぜひ作って行きたいと思います！

[@アボガド子]

初心者には早いのでスローにして視聴させていただきました。

[@つかもと-m1w]

とても勉強になりました。ありがとうございました！

[@MayukoSoga]

よかったです！ご感想ありがとうございます✨

[@NK-yo1zo]

とても分かりやすかったです。

[@MayukoSoga]

ご感想うれしいです！ありがとうございます。

[@つゆつゆみんみん]

そがさん 聞き取りやすく、ショートカットキーを駆使されていて非常にわかりやすかったです！ ありがとうございます。 １点質問なのですが、レイアウトグリッドを作成するときは、どういった基準で作成されているのでしょうか。 基本PC版は16列　SP版は４列なんでしょうか。

[@83cheaphero]

動画を参考に勉強させていただいています。 26:10あたりのレクタングルと3つのカードリストをオートレイアウトするとき、レクタングルもリストと同様にレイアウトし直されてしまい、上手く背景としてその場に残ってくれません。リストと同様に垂直方向や水平方向にレイアウトし直されてしまうという感じです。 私はWindows版のデスクトップアプリで作業していますが、オートレイアウトのショートカットキーは同様にShift+Aです。仕様が異なるのでしょうか？なにか考えられる問題点があれば教えていただきたいです。

[@MayukoSoga]

背景の長方形の要素もセレクトしてしまっていませんか？ロック（command+shft+L）すれば大丈夫だと思いますのでお試しくださいませ。

[@marikot4207]

初めてfigmaでトレースしました。私にもできました！！

[@MayukoSoga]

よかったです！ご報告ありがとうございます！

[@torukurakawa]

素敵なデザインですね！

[@akialo7042]

デザインもfigmaも初学者です！ 参考になるので、見返したりしています。

[@MayukoSoga]

嬉しいです！参考になってよかったです✨

[@forrest6742]

最初のオートレイアウトの際に画像と黄緑のレクタングルが離れて変な並びになるのですが、解決策などはありますか？

[@seiichimatsuda]

参考になりました。仕事の範囲は何処までなのかと思いました。例えばReactに使えるコード生成とかです。

[@MayukoSoga]

参考になりよかったです。私はFigmaではデザインでしか使わないのでちょっとコード生成などはわかりませんね。。。

[@きむまさと]

グリッドの表示・非表示はshift + Gでした。

[@きむまさと]

Mac使ってるんですね。失礼しました。

[@MayukoSoga]

@@きむまさと 　MacはShftでもControlでもどっちでもいけるっぽいです！

[@yu_shirasaki]

とってもわかりやすくありがとうございます😊 ちなみに作成したものをsnsに、掲載しても大丈夫なのでしょうか？

[@MayukoSoga]

トレース作成したよ、ということでSNS掲載するということでしょうか？それでしたらこちらの動画へのリンクを貼っていただけると大丈夫です！

[@yu_shirasaki]

@@MayukoSoga ありがとうございます😊 載せる際はリンクも掲載させて頂きますね！

[@karkshibata918]

はじめましてエンジニアです。figmaを始めたばかりです。 Heroのところでcropして移動するとグレー部分も一緒に動くはずですが、Mayukoさんは動いていないので背景とか設定されているのでしょうか?

[@MayukoSoga]

はじめまして！Hero画像のFrameは背景も何も設定していません。写真のグレー部分も動いているはずですが、シンプルな写真なので、動いてないように見えるのかもしれません。。

[@hatiman_80000]

初めまして！ いつかwebデザインもコーディングも出来るフリーランスになりたいと思っている未経験者です！ この動画をみて同じものを模写しました。 次にコーディングもしてみたいと思っているのですが、コーディングしたものをポートフォリオに使用させていただく事は可能でしょうか？

[@MayukoSoga]

こんにちは！「Design: Mayuko Soga」と「こちらの動画のURL」をクレジットとしてポートフォリオに明記してくだされば大丈夫です！コーディング頑張ってください✨

[@airisaito4710]

コメント失礼します。 figmaのデスクトップバージョンをダウンロードすることができなくて困っております。 Macにダウンロードしたものを開こうとするとmove to applications folderと出てきて開くことができません。 改善方法を知っていれば教えていただきたいです。

[@MayukoSoga]

ダウンロードはできていますので、Macの「アプリケーション」フォルダーへFigmaのアイコンを移動させてください。

[@the_secret_m]

6:40 グループ作る

[@channelhibari7305]

WINDOWS版が欲しかったです

[@しるしさん]

レイヤーグリッドの設定は、なぜその数値なんでしょうか？

[@MayukoSoga]

私が普段使っているグリッドの数値で、これでないとダメというわけではありません。Googleマテリアルデザイン や他のデザインシステムと似たような感じにしています。デスクトップは12コラムが汎用性が高いので使っていますが、２、３や４コラムで初めていいと思います。真っ白のキャンバスにデザインしていくのは難しいので、ある程度このような基本のグリッドを設定してからデザインをし始めることをおすすめしています。

[@ありさI]

喋り方がわかりにくい