マガジンのカバー画像

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

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

#デザイン

【初心者向け】Figmaでアプリのデザインをしてみたい!

こんにちは、アメリカ・シリコンバレー在住のSeikaです。 今回は初めてFigmaを使ってみる方向けに、 モバイルアプリを一緒にデザインしていこうと思います。 実際にFigmaを使いながら読んでみてくださいね。 それではやっていきましょう! (2024年2月4日公開) 完成図 こちらの画面を作っていきます。 実際のファイルが見たい方はこちら👇より複製して使ってみてください。 手順📝 1、フレームを作る(ショートカット→F) 2、フレームを選ぶ 今回は最新のi

ラスタライズをやりたい!#Figma

今回はFigmaを使って、アイコンをラスタライズしてみたい思います! それではやっていきましょう! (2023年2月4日公開) 手順📝 1、ラスタライズしたいアイコンを選択。 2、左上のfigmaをクリック。もしくはショートカット(CMD + /)。 虫眼鏡マークをクリック。 3、Rasterizeと入力して検索する。そしてクリック。 4、完成🌟 まとめてラスタライズする際は、Rasterize me!プラグインが楽かもしれません。 今回はここまでです!また

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、画像を準備。 2、Remove BGを起動。人物を切る取る。 初めて使用する場合はAPI Keyをセットする必要があります。 https://www.remove.bg/ こちら👇でも切り取れます。 3、人物の上に、写真を置く。画面上部のマスクを押す。 4、完成! Resource🎨 https://www.freepik.com/premium-photo/beautiful-you

文字に写真を入れたい!#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

今回はFigmaを使って、巴を作りたいと思います! 手順📝 1、フレーム作成(F)。800x800。 2、フレームに色を付ける 3、正円を作成(624x624)。 ショートカットO、シフトを押しながらドラックすると正円ができます。 4、小さい正円を作成(240x240)。 5、4の円を合計4つ作る。 6、中くらいの大きさの円(384x384)を描く。 7 、中くらいの円をさらに3つ増やし、上下左右に配置する。 8、円を全て選択しFlatten(ctrl +E

隠れたレイヤーが見たい! #Figma

今回はアウトラインの表示方法をご紹介します!隠れたレイヤーの選択、調整が簡単になります。 ツールバーの右上にある[ズーム/表示オプション]メニューをクリック。 Show Outlines をクリック。 非表示のレイヤーを含めたい場合はInclude hidden layersを、 オブジェクトの境界線を含めたい場合はInclude object boundsを選択。 ショートカットはこちらです。 ⌘ Command / ControlY Shift+O 👇

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

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

直角三角形を作りたい! #Figma

今回はFigmaを使って直角三角形を作りたいと思います! 長方形を描く。 図形をダブルクリック。 角の点をクリックして削除。 ペンツールに切り替え、他の3点をつなぐ。 完成! 今回はここまでです!また次の記事でお会いしましょう~😉 追伸:Figmaにフリーソースを投稿しました!ぜひ使ってみてください。 Follow me here😊 Instagram | Twitter │Dribbble│Linkedin | Figma | Website

プログレスリングを作りたい!#figma

今回はfigmaを使ってプログレスリングを作ってみたいと思います。 手順📝 1、円を描く。 2、Strokeにあるプラスを押す。好きな色を入れ、太さを40、位置をinsideからcenterに。fillは消す。 3、この円を複製。 4、二つの円を重ねる。右側の白い丸をクリック。 5、クリックしたまま動かす。 6、今度は真ん中の白い丸をクリック。 7、クリックしたまま外へ移動。 8、後ろの円の色を変更。20%にしました。 9、前方の円をクリック。Storok

3Dのモックアップを作りたい!#figma

今回はfigmaを使って3Dのモックアップを作ってみたいと思います。 手順📝 1、Vectary 3D ElementsのPluginをインストール。 2、モックアップに映したいイメージを準備。 3、イメージを選択し、先ほどインストールしたVectary 3D Elementsを開く。好きなモックアップを選択し、右下のLoad Frameをクリック。 モックアップに選択したイメージが映りました! 4、Export Imageでエクスポート。完成です🥰 今回はここ

背景を切り抜きたい! #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、オブジェクトを重ねる 今度はこちらのような重ねたデザインに挑戦です!