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

本

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

運営しているクリエイター: Seika_USA

#チュートリアル

おしゃれに文字と人物を重ねたい！#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

今回はテキストのアウトライン化をご紹介します！フォントは文字情報ですが、アウトライン化するとオブジェクト(図形)情報になります。ロゴを作るときなどに便利です！やり方📝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つご紹介したいと思います！画像挿入その１画像を選択し、そのままフレームに移動。これで完成です。画像挿入その2手間はかかりますが、Fillからもできます。 1, 挿入したい画像を準備。 2, フレームを描き、右側のパネルからfillをクリック。新たなパネルが開いたら、Solidの右側にある矢印をクリックしImageを選択。 3, Choose Imageで用意した画像を選択。出来ました！画像挿入その3画像は用意するのがそもそも大変

スマートアニメをやってみたい！ダークモード編 #Figma

今回はFigmaのスマートアニメを使ってダークモードのアニメーションを設定してみたいと思います。 1、フレームを準備。フレームと同じ長方形を作り、フレームの上に置く。 2、文字を入れて、スイッチを角をとった長方形と円で作成。 3、長方形を複製し、黒に染める、一番下のレイヤーにする。 4、フレームを複製。黒の長方形を、白の長方形の上に配置。文字も黒から白。スイッチの色も変更し、円を右端に配置。 5、プロトタイプのタブへ。スマートアニメを設定する。完成です⭐✨

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

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

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

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