マガジンのカバー画像

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

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

2022年4月の記事一覧

矢印サークルを作ってみたい! #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のスマートアニメを使ってスプラッシュ画面作ってみたいと思います。 こちらが完成したものです👇 準備 とらと子どもの画像は、こちらのものを使用しました。 ■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、イメージを3つ準備。 2、フレームを作成し、円を中央に置く。 3、イメージ3つを横に並べ、一番左のハンバーガーを円の上に配置。 4、フレームを複製し、今度はイメージ3つを左に平行移動しながら真ん中のドーナッツを円の上に配置。 5、さらにフレームを複製。4と同様平行移動しおすしを真ん中に配置。 6、フレームの外にあるイメージのPass throughを0%にする。 7、円