マガジンのカバー画像

【完全無料】デザインツール「Figma」マガジン

38
無料のデザインツール『Figma』のマガジンです!ちょっとした小技を初心者でも分かるように説明していきます!webで楽しく描いていきましょう😉
運営しているクリエイター

#Webデザイン

Google Drive のロゴを作りたい!#Figma

今回はFigmaを使って、文字をかっこよくカットしてみたい思います! こちらが完成したものです。 手順📝 1、長方形を描く。 2、長方形を2枚複製。一つを120度、もう片方を-120度傾ける。 3、右クリック→Flatten (ショートカット:Ctrl+E) 4、Edit Object 5、ペンツールをクリック 6、線を3本描く。写真の赤線参照。 7、不要を選択し消す。 8、残す個所は右上のPaint backetで色を染める。 9、黄色と青色で染める。

文字をかっこよくカットしたい!#Figma

今回はFigmaを使って、文字をかっこよくカットしてみたい思います! こちらが完成したものです。 手順📝 1、フレームに文字を書く。 2、ペンツールで台形を作る。 3、Strokeを消す。Fillでそめる。 4、文字とVectorを選択し、Subtract Selection。 5、Subtractを複製 6、Vectorを選択し、Edit object 7、上の2点を選択。 8、Shiftを押しながら上下反転させる。 9、上のSubtractを数ピクセル上

おしゃれに文字と人物を重ねたい!#Figma

今回はFigmaを使って、おしゃれに文字と人物を重ねたいと思います! 手順📝 1、画像を準備。RemoveBGで人物を切り抜く。 今回使用した写真はこちら👇 2、フレームの上に画像を置く。 3、文字を書く。ショートカット→t 4、文字を複製(Ctrl +d)。 文字→写真→文字のレイヤーにする。 5、上部の文字のFillをなし、strokeをそめる。 6、完成! 今回はここまでです!また次の記事でお会いしましょう~😉 Follow me here😊 Figm

文字に写真を入れたい!#Figma

今回はFigmaを使って、文字に写真を入れたいと思います! 手順📝 1、文字を入れる。 2、Flatten(Ctrl+E) 3、入れたい写真をVectorの上に置く。 4、画面上部のマスクを押す。 5、完成! Resource🎨 https://www.freepik.com/premium-photo/two-sunflowers-are-depicted-background-field-blue-sky-summer-close-up_5287386.ht

画像を挿入したい! #Figma

今回は、画像の挿入を3つご紹介したいと思います! 画像挿入 その1画像を選択し、そのままフレームに移動。これで完成です。 画像挿入 その2手間はかかりますが、Fillからもできます。 1, 挿入したい画像を準備。 2, フレームを描き、右側のパネルからfillをクリック。 新たなパネルが開いたら、Solidの右側にある矢印をクリックしImageを選択。 3, Choose Imageで用意した画像を選択。 出来ました! 画像挿入 その3画像は用意するのがそもそも大変

かわいい吹き出しを作りたい!#Figma

今回はFigmaを使ってかわいい吹き出しを描いていきたいと思います! 1.長方形を描く。角を15に。 2.長方形をダブルクリック。 3.ペンツールをクリック。左下3点をクリック。 4,③の点をシフトを押しながら下にドラック。 5.3点をクリックし、角を0に。 6. Bend Tool をクリック。 7.Altを押しながら左の点をドラックし曲線を作る。 8. Altを押しながら右側の点を外側にドラックし、形を調整する。 完成です! 補足1: 3点シフトを押しな

カードをフレームの外に出したい!#Figma

今回は「Clip Content」を使って、カードをフレームの外に出したいと思います。 Clip Contentはフレームをクリックすると、右側のパネルに出てきます。チェックが入っているので、このチェックを外す。 カードをフレームの外に出すことができました!😊 今回はここまでです!また次の記事でお会いしましょう~😉 Follow me here😊 Figma │Instagram | Twitter │Dribbble │Behance│ Linkedin | No

等間隔で円状に並べたい!#Figma

今回はFigmaを使って、円を等間隔で円状に並べたいと思います! 手順📝フレームを準備。(ショートカットはF) 円を一つ描く。(ショートカットはO) シフトキーを押しながらドラックすると正円ができます。 円を複製(ctrl +D)。真下に配置(ショートカットはAlt + H)。 グループ化(ctrl +G)。 グループを複製。Shiftをおしながら、グループを回す。 5を繰り返す。 完成です😊 こちらのカラーはFLAT UIを利用しました。 プラグイン円だけ

ローディングアニメーションを作りたい!#figma

今回はfigmaを使ってローディングアニメーションを作ってみたいと思います。 手順📝 1、円をつくる。円の右にある小さい丸を押す。センター方向にドラックし輪にする。 2、円をそめる。fill、angular。 3、2枚複製し、円を90度ずつずらす。 4、プロトタイプタブでアニメーションを設定。 ■After delay, 1ms ■Smart animate, Liner, 500ms 完成🥰! 今回はここまでです!また次の記事でお会いしましょう~😉 Foll

背景を切り抜きたい! #Figma

本日は画像の切り抜きをFigmaでやってみたいと思います!こちらの口紅を切り抜きます。 手順📝 1, 画像を置く。 2, ペンツールをクリック 3, 切り取りたいものを囲んでいきます。 4, 一周したら Done をクリック。 5, fillで染め、stroke を消す。 6, 左のパネルを確認。写真を上に、vectorを下に変える。 7, 真ん中の丸いボタン👇をクリック。 8, 完成🥰 こういったサイトを使っても切り抜きが可能です! Follow me

ニューモーフィズムをもっと知りたい!#figma

本日はニューモーフィズムのバリエーション2つに挑戦してみたいと思います。 先日投稿したこちら👇からまず始めてみてくださいね。 1、くぼんだオブジェクト まずはこちらのくぼんだオブジェクトに挑戦です。 1, 前回作った正方形を複製。(右下に配置しています) 2、複製した正方形をクリックし、Drop shadow 2つをどちらも Inner shadowにする。 3, 完成!へこみました! 2、オブジェクトを重ねる 今度はこちらのような重ねたデザインに挑戦です!

ニューモーフィズムをやってみたい!#figma

ニューモーフィズム(Neumorphism)とはこちら👇です! 今回もフィグマで描いていきますね~😉 手順📝 1, 四角形を描く 2, 四角形の色を背景と合わせる(今回はEBF3FF) 3、effectで1つ目のDrop shadow xを10、yを10、blurを20 色→B4C1D5 4, effectで2つ目のDrop shadow xを-10、yを-10、blurを20 色→FFFFFF 完成🥰 Follow me here😊 Website | In

画像を明るくしたい!#Figma

Figmaを使って画像を明るくしたいと思います。 手順📝1、イメージ画像をクリック 2、Exposure(露出)、Contrast、Highlightsを画像を見ながら調整する。 完成😊 動画📹設定画面📌

ボタンを固定したい!#Figma

今日はfigmaを使ってフローティングアクションボタン(FAB)を固定したいと思います。 手順📝 1、フローティングアクションボタン(FAB)をクリック 2、右側サイドメニューのconstraintsの『fix position when scrolling』をチェック 完成🥰