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

本

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

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

#UIデザイナー

文字に写真を入れたい！#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

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

かわいい吹き出しを作りたい！#Figma

今回はFigmaを使ってかわいい吹き出しを描いていきたいと思います！ 1.長方形を描く。角を15に。 2.長方形をダブルクリック。 3.ペンツールをクリック。左下３点をクリック。 4,③の点をシフトを押しながら下にドラック。 5．3点をクリックし、角を0に。 6. Bend Tool をクリック。 7.Altを押しながら左の点をドラックし曲線を作る。 8. Altを押しながら右側の点を外側にドラックし、形を調整する。完成です！補足1: 3点シフトを押しな

等間隔で円状に並べたい！#Figma

今回はFigmaを使って、円を等間隔で円状に並べたいと思います！手順📝フレームを準備。(ショートカットはF) 円を一つ描く。(ショートカットはO) シフトキーを押しながらドラックすると正円ができます。円を複製(ctrl +D)。真下に配置(ショートカットはAlt + H)。グループ化(ctrl +G)。グループを複製。Shiftをおしながら、グループを回す。 5を繰り返す。完成です😊 こちらのカラーはFLAT UIを利用しました。プラグイン円だけ

Variantsをやってみたい！#Figma

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

スマートアニメをやってみたい！スプラッシュ画面編 #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、Strokeにあるプラスを押す。好きな色を入れ、太さを40、位置をinsideからcenterに。fillは消す。 3、この円を複製。 4、二つの円を重ねる。右側の白い丸をクリック。 5、クリックしたまま動かす。 6、今度は真ん中の白い丸をクリック。 7、クリックしたまま外へ移動。 8、後ろの円の色を変更。20％にしました。 9、前方の円をクリック。Storok

3Dのモックアップを作りたい！#figma

今回はfigmaを使って３Dのモックアップを作ってみたいと思います。手順📝 1、Vectary 3D ElementsのPluginをインストール。 2、モックアップに映したいイメージを準備。 3、イメージを選択し、先ほどインストールしたVectary 3D Elementsを開く。好きなモックアップを選択し、右下のLoad Frameをクリック。モックアップに選択したイメージが映りました！ 4、Export Imageでエクスポート。完成です🥰 今回はここ