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

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、上の２点を選択。 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

今回はテキストのアウトライン化をご紹介します！フォントは文字情報ですが、アウトライン化するとオブジェクト(図形)情報になります。ロゴを作るときなどに便利です！やり方📝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

今回はFigmaを使ってかわいい吹き出しを描いていきたいと思います！ 1.長方形を描く。角を15に。 2.長方形をダブルクリック。 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で矢印サークルを作ってみたいと思います。円を描く。ハンドルを持って回す。センターをクリックし円の外へドラック。 fillを消して、strokeを染め、センターに。コンポーネントにする。コンポーネントを複製(alt +Shift) 複製(ctrl + D)し90度ずらす。 7をさらに2回繰り返す。三角形を作り、コンポーネントに矢印になるように置く。 Union Selectionをクリック。色や矢印の長さを調整して完成！今

サークルスピナーを作ってみたい！#Figma

今回はFigmaのスマートアニメを使ってサークルスピナーを作ってみたいと思います。こちらが完成したものです👇 作り方 1,正方形のフレームを準備(100px) 2,スピナーを作る。正円(53px)を描き、fillはなし。 strokeを編集。太さ10、center、dash、dash1、gap20、dash capは一番右の丸みのあるものを選ぶ。 3, スピナーのstrokeを染める。 Angular。 4、新たなフレームを作成。中央に正円を置く。(32p

Variantsをやってみたい！#Figma

今回はFigmaのVariants(バリアンツ)を使ってみたいと思います！手順📝1, 好きな文字を書く。 2, shift + Aでフレームにする。 3, fillで好きな色に染める。フレームの角をとる。(今回は16) 4, Auto layout で文字をセンターに揃える。 5, フレームの名前を変える。(今回はbotton) 6, コンポーネントにする。(ctrl + Alt + K : Windoesのショートカット) 左側のアセットパネルを開くと、コンポーネン

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

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

スマートアニメをやってみたい！スライドアニメーション編 #Figma

今回はFigmaのスマートアニメを使ってスライドアニメーションを作ってみたいと思います。 1、イメージを３つ準備。 2、フレームを作成し、円を中央に置く。 3、イメージ３つを横に並べ、一番左のハンバーガーを円の上に配置。 4、フレームを複製し、今度はイメージ３つを左に平行移動しながら真ん中のドーナッツを円の上に配置。 5、さらにフレームを複製。４と同様平行移動しおすしを真ん中に配置。 6、フレームの外にあるイメージのPass throughを0％にする。 7、円