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

本

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

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

#フィグマ

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

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

スマートアニメをやってみたい！スプラッシュ画面編 #Figma

今回はFigmaのスマートアニメを使ってスプラッシュ画面作ってみたいと思います。こちらが完成したものです👇 準備とらと子どもの画像は、こちらのものを使用しました。 ■image 3d cny travel theme poster Premium Vector Erase bgで背景を切り取っています。作り方1、Blob(インクのしみのような形)を、Blobs で作成。 2、uiGradientsでグラデーションをつける。 3、フレームを作成しblobと画像

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

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

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

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

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

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