マガジンのカバー画像

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

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

記事一覧

【Microsoft Designer】AIとFigmaでかっこいいロゴを作ってみたい!

こんにちは。アメリカ・シリコンバレー在住のSeikaです。 今回はMicrosoft DesignerとFigmaでかっこいいロゴを作ってみたいと思います。 (2024年5月6日公開) 1. Microsoft Designerで画像を作るMicrosoft Designerでロゴとなる画像を作ります。 今回は以下のプロンプトで作りました。 こちらのシェアリンクからもご確認ができます。 何度か生成して気に入ったロゴをダウンロードします。 2. Figmaで編集ダウ

【初心者向け】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、画像を準備。RemoveBGで人物を切り抜く。 今回使用した写真はこちら👇 2、フレームの上に画像を置く。 3、文字を書く。ショートカット→t 4、文字を複製(Ctrl +d)。 文字→写真→文字のレイヤーにする。 5、上部の文字のFillをなし、strokeをそめる。 6、完成! 今回はここまでです!また次の記事でお会いしましょう~😉 Follow me here😊 Figm

人物の中に写真を入れたい!#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

今回はテキストのアウトライン化をご紹介します!フォントは文字情報ですが、アウトライン化するとオブジェクト(図形)情報になります。ロゴを作るときなどに便利です! やり方📝1、テキストを書いて、選択。 2、右クリック。Outline Strokeを選択。 3、ダブルクリックをして編集。 ショートカットはこちらです。 Shift ↑+ ⌘ +O Ctrl +Shift +O 今回はここまでです!また次の記事でお会いしましょう~😉 Resource🎨 https://

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

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

画像を挿入したい! #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