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

画像を挿入したい！ #Figma

今回は、画像の挿入を3つご紹介したいと思います！画像挿入その１画像を選択し、そのままフレームに移動。これで完成です。画像挿入その2手間はかかりますが、Fillからもできます。 1, 挿入したい画像を準備。 2, フレームを描き、右側のパネルからfillをクリック。新たなパネルが開いたら、Solidの右側にある矢印をクリックしImageを選択。 3, Choose Imageで用意した画像を選択。出来ました！画像挿入その3画像は用意するのがそもそも大変

矢印サークルを作ってみたい！ #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

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

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

ローディングアニメーションを作りたい！#figma

今回はfigmaを使ってローディングアニメーションを作ってみたいと思います。手順📝 1、円をつくる。円の右にある小さい丸を押す。センター方向にドラックし輪にする。 2、円をそめる。fill、angular。 3、2枚複製し、円を90度ずつずらす。 4、プロトタイプタブでアニメーションを設定。 ■After delay, 1ms ■Smart animate, Liner, 500ms 完成🥰！今回はここまでです！また次の記事でお会いしましょう～😉 Foll

グリッチエフェクトをやってみたい！ #figma

今回はfigmaを使ってグリッチエフェクトをやってみたいと思います。グリッチとは、画面が壊れたときに見える画像の乱れのことです。では早速作っていきましょう！手順📝 1、テキストで好きな文字を入れる 2、テキストを2つ複製 3、色を変える。上のレイヤー青0000FF、真ん中のレイヤー緑00FF00、下のレイヤー赤FF0000 4、fillの色をそれぞれexclusionにする。 5、レイヤーを少しずらし、完成🥰！今回はここまでです！また次の記事でお会い

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

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

画像を明るくしたい！#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