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

【初心者向け】Figmaでアプリのデザインをしてみたい！

こんにちは、アメリカ・シリコンバレー在住のSeikaです。今回は初めてFigmaを使ってみる方向けに、モバイルアプリを一緒にデザインしていこうと思います。実際にFigmaを使いながら読んでみてくださいね。それではやっていきましょう！ (2024年2月4日公開) 完成図こちらの画面を作っていきます。実際のファイルが見たい方はこちら👇より複製して使ってみてください。手順📝 １、フレームを作る（ショートカット→F）２、フレームを選ぶ今回は最新のi

Google Drive のロゴを作りたい！#Figma

今回はFigmaを使って、文字をかっこよくカットしてみたい思います！こちらが完成したものです。手順📝 1、長方形を描く。 2、長方形を2枚複製。一つを120度、もう片方を-120度傾ける。 3、右クリック→Flatten (ショートカット：Ctrl+E) 4、Edit Object 5、ペンツールをクリック 6、線を3本描く。写真の赤線参照。 7、不要を選択し消す。 8、残す個所は右上のPaint backetで色を染める。 9、黄色と青色で染める。

文字をかっこよくカットしたい！#Figma

今回はFigmaを使って、文字をかっこよくカットしてみたい思います！こちらが完成したものです。手順📝 1、フレームに文字を書く。 2、ペンツールで台形を作る。 3、Strokeを消す。Fillでそめる。 4、文字とVectorを選択し、Subtract Selection。 5、Subtractを複製 6、Vectorを選択し、Edit object 7、上の２点を選択。 8、Shiftを押しながら上下反転させる。 9、上のSubtractを数ピクセル上

おしゃれに文字と人物を重ねたい！#Figma

今回はFigmaを使って、おしゃれに文字と人物を重ねたいと思います！手順📝 1、画像を準備。RemoveBGで人物を切り抜く。今回使用した写真はこちら👇 2、フレームの上に画像を置く。 3、文字を書く。ショートカット→t 4、文字を複製(Ctrl +d)。文字→写真→文字のレイヤーにする。 5、上部の文字のFillをなし、strokeをそめる。 6、完成！今回はここまでです！また次の記事でお会いしましょう～😉 Follow me here😊 Figm

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

今回はFigmaを使って、人物の中に写真を入れたいと思います！手順📝 1、画像を準備。 2、Remove BGを起動。人物を切る取る。初めて使用する場合はAPI Keyをセットする必要があります。 https://www.remove.bg/ こちら👇でも切り取れます。 3、人物の上に、写真を置く。画面上部のマスクを押す。 4、完成！ Resource🎨 https://www.freepik.com/premium-photo/beautiful-you

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

今回は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を使って直角三角形を作りたいと思います！長方形を描く。図形をダブルクリック。角の点をクリックして削除。ペンツールに切り替え、他の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、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