マガジンのカバー画像

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

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

#UXデザイン

黄金比を使った巴を作りたい!#Figma

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

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

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

円の中に人物を入れたい!#Figma

今回はFigmaのマスク機能を使って円の中に人物を入れてみたいと思います。 手順📝 1、円の中に入れたい写真を準備 2、円を二つ作る。 3、写真の下に円を配置する。 4、Figmaの上部にあるマスクを押す 5、写真や円を移動し、微調整 6、完成! 今回はここまでです!また次の記事でお会いしましょう~😉 Follow me here😊 Website | Instagram | Twitter │Dribbble│Linkedin

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

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

ふんわりした影の設定が知りたい! #figma

今回はふんわりした影の設定についてまとめてみました。 影の設定は、右側のパネルのEffectsで行います。 デフォルトの影はこちらです👆メリハリがあります。より柔らかくしてみましょう。 Yを16、Blur(ぼかし具合)を40に。 さらに柔らかくしました。 Xを4、Yを24、Blurを60、色を6D8DADに。 オブジェクトを自体を影にすることもできます。 右側のパネル Effect Layer blurを選択。 オブジェクトの色をLinerでグラデーションにす

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

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

多角形を描きたい!#Figma

今回はFigmaで多角形を描いてみたいと思います! 手順📝 1, 三角形を描く。 2, 三角形をクリック。 右下の count3をクリック。 3, ドラック。count4になり、四角形完成。 4, ドラックを続ける。count8で八角形完成。 完成🥰 同じ要領で星型多角形もできますよ⭐🌟✨ Follow me here😊 Youtube│Instagram│Twitter│Dribbble│Linkedin│Behance│Notion│Portfolio│F

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

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

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

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

キーボードをスッと上げる動きをさせたい #figma

今日は、プロトタイプにてキーボードをスッと上げる『モーダルウィンドウ・アニメーション』のやり方です。 1、プロトタイプをクリック 2、Interaction detailsをこのように設定しましょう。 ⭐On click ⭐Open overlay ⭐Bottom center ⭐✅Close when clicking outside ⭐✅Add background behind overlay ⭐黒 000000 40% ⭐↑ 完成😆

ハートを作りたい!#Figma

今日は、Figmaを使ってとっても簡単にハートを作りたいと思います😉 1、正方形をかく。 2、正方形の中に正円をかく。 3 、正円を半径分右にずらす。 4、新たに同じサイズの正円をかき、上に半径分移動。正方形と正円2つの計3つをグループ化。 5、45度動かす。 6、すべて選択し、Union selectionをクリック。 7、そめる。 💙💚💛🧡完成💙💚💛🧡 今回はここまでです!また次の記事でお会いしましょう~😉 Follow me here😊 Figma