シェア
こんにちは、アメリカ・シリコンバレー在住のSeikaです。 今回は初めてFigmaを使ってみる方向けに、 モバイルアプリを一緒にデザインしていこうと思います。 実際にFigmaを使いながら読んでみてくださいね。 それではやっていきましょう！ (2024年2月4日公開) 完成図 こちらの画面を作っていきます。 実際のファイルが見たい方はこちら👇より複製して使ってみてください。 手順📝 １、フレームを作る（ショートカット→F） ２、フレームを選ぶ 今回は最新のi
今回はFigmaを使って、文字をかっこよくカットしてみたい思います！ こちらが完成したものです。 手順📝 1、長方形を描く。 2、長方形を2枚複製。一つを120度、もう片方を-120度傾ける。 3、右クリック→Flatten (ショートカット：Ctrl+E) 4、Edit Object 5、ペンツールをクリック 6、線を3本描く。写真の赤線参照。 7、不要を選択し消す。 8、残す個所は右上のPaint backetで色を染める。 9、黄色と青色で染める。
今回はFigmaを使って、文字をかっこよくカットしてみたい思います！ こちらが完成したものです。 手順📝 1、フレームに文字を書く。 2、ペンツールで台形を作る。 3、Strokeを消す。Fillでそめる。 4、文字とVectorを選択し、Subtract Selection。 5、Subtractを複製 6、Vectorを選択し、Edit object 7、上の２点を選択。 8、Shiftを押しながら上下反転させる。 9、上のSubtractを数ピクセル上
今回はFigmaを使って、おしゃれに文字と人物を重ねたいと思います！ 手順📝 1、画像を準備。RemoveBGで人物を切り抜く。 今回使用した写真はこちら👇 2、フレームの上に画像を置く。 3、文字を書く。ショートカット→t 4、文字を複製(Ctrl +d)。 文字→写真→文字のレイヤーにする。 5、上部の文字のFillをなし、strokeをそめる。 6、完成！ 今回はここまでです！また次の記事でお会いしましょう～😉 Follow me here😊 Figm
今回はFigmaを使って、人物の中に写真を入れたいと思います！ 手順📝 1、画像を準備。 2、Remove BGを起動。人物を切る取る。 初めて使用する場合はAPI Keyをセットする必要があります。 https://www.remove.bg/ こちら👇でも切り取れます。 3、人物の上に、写真を置く。画面上部のマスクを押す。 4、完成！ Resource🎨 https://www.freepik.com/premium-photo/beautiful-you
今回はアウトラインの表示方法をご紹介します！隠れたレイヤーの選択、調整が簡単になります。 ツールバーの右上にある［ズーム／表示オプション］メニューをクリック。 Show Outlines をクリック。 非表示のレイヤーを含めたい場合はInclude hidden layersを、 オブジェクトの境界線を含めたい場合はInclude object boundsを選択。 ショートカットはこちらです。 ⌘ Command / ControlY Shift+O 👇
今回は、画像の挿入を3つご紹介したいと思います！ 画像挿入 その１画像を選択し、そのままフレームに移動。これで完成です。 画像挿入 その2手間はかかりますが、Fillからもできます。 1, 挿入したい画像を準備。 2, フレームを描き、右側のパネルからfillをクリック。 新たなパネルが開いたら、Solidの右側にある矢印をクリックしImageを選択。 3, Choose Imageで用意した画像を選択。 出来ました！ 画像挿入 その3画像は用意するのがそもそも大変
今回はFigmaで矢印サークルを作ってみたいと思います。 円を描く。 ハンドルを持って回す。 センターをクリックし円の外へドラック。 fillを消して、strokeを染め、センターに。 コンポーネントにする。 コンポーネントを複製(alt +Shift) 複製(ctrl + D)し90度ずらす。 7をさらに2回繰り返す。 三角形を作り、コンポーネントに矢印になるように置く。 Union Selectionをクリック。 色や矢印の長さを調整して完成！ 今
今回はFigmaのスマートアニメを使ってスプラッシュ画面作ってみたいと思います。 こちらが完成したものです👇 準備 とらと子どもの画像は、こちらのものを使用しました。 ■image 3d cny travel theme poster Premium Vector Erase bgで背景を切り取っています。 作り方1、Blob(インクのしみのような形)を、Blobs で作成。 2、uiGradientsでグラデーションをつける。 3、フレームを作成しblobと画像
今回はふんわりした影の設定についてまとめてみました。 影の設定は、右側のパネルのEffectsで行います。 デフォルトの影はこちらです👆メリハリがあります。より柔らかくしてみましょう。 Yを16、Blur(ぼかし具合)を40に。 さらに柔らかくしました。 Xを4、Yを24、Blurを60、色を6D8DADに。 オブジェクトを自体を影にすることもできます。 右側のパネル Effect Layer blurを選択。 オブジェクトの色をLinerでグラデーションにす
本日は画像の切り抜きをFigmaでやってみたいと思います！こちらの口紅を切り抜きます。 手順📝 1, 画像を置く。 2, ペンツールをクリック 3, 切り取りたいものを囲んでいきます。 4, 一周したら Done をクリック。 5, fillで染め、stroke を消す。 6, 左のパネルを確認。写真を上に、vectorを下に変える。 7, 真ん中の丸いボタン👇をクリック。 8, 完成🥰
本日はニューモーフィズムのバリエーション２つに挑戦してみたいと思います。 先日投稿したこちら👇からまず始めてみてくださいね。 1、くぼんだオブジェクト まずはこちらのくぼんだオブジェクトに挑戦です。 1, 前回作った正方形を複製。(右下に配置しています) 2、複製した正方形をクリックし、Drop shadow 2つをどちらも Inner shadowにする。 3, 完成！へこみました！ 2、オブジェクトを重ねる 今度はこちらのような重ねたデザインに挑戦です！
ニューモーフィズム(Neumorphism)とはこちら👇です！ 今回もフィグマで描いていきますね～😉 手順📝 1, 四角形を描く 2, 四角形の色を背景と合わせる(今回はEBF3FF) 3、effectで１つ目のDrop shadow xを10、yを10、blurを20 色→B4C1D5 4, effectで２つ目のDrop shadow xを-10、yを-10、blurを20 色→FFFFFF 完成🥰 Follow me here😊 Website | In
今日は、Figmaを使ってとっても簡単にハートを作りたいと思います😉 1、正方形をかく。 2、正方形の中に正円をかく。 3 、正円を半径分右にずらす。 4、新たに同じサイズの正円をかき、上に半径分移動。正方形と正円2つの計3つをグループ化。 5、45度動かす。 6、すべて選択し、Union selectionをクリック。 7、そめる。 💙💚💛🧡完成💙💚💛🧡 今回はここまでです！また次の記事でお会いしましょう～😉 Follow me here😊 Figma
