シェア
こんにちは、アメリカ・シリコンバレー在住のSeikaです。 今回は初めてFigmaを使ってみる方向けに、 モバイルアプリを一緒にデザインしていこうと思います。 実際にFigmaを使いながら読んでみてくださいね。 それではやっていきましょう！ (2024年2月4日公開) 完成図 こちらの画面を作っていきます。 実際のファイルが見たい方はこちら👇より複製して使ってみてください。 手順📝 １、フレームを作る（ショートカット→F） ２、フレームを選ぶ 今回は最新のi
今回はFigmaを使って、アイコンをラスタライズしてみたい思います！ それではやっていきましょう！ (2023年2月4日公開) 手順📝 1、ラスタライズしたいアイコンを選択。 2、左上のfigmaをクリック。もしくはショートカット(CMD + /)。 虫眼鏡マークをクリック。 3、Rasterizeと入力して検索する。そしてクリック。 4、完成🌟 まとめてラスタライズする際は、Rasterize me!プラグインが楽かもしれません。 今回はここまでです！また
今回は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、画像を準備。 2、Remove BGを起動。人物を切る取る。 初めて使用する場合はAPI Keyをセットする必要があります。 https://www.remove.bg/ こちら👇でも切り取れます。 3、人物の上に、写真を置く。画面上部のマスクを押す。 4、完成！ Resource🎨 https://www.freepik.com/premium-photo/beautiful-you
今回は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を使って、巴を作りたいと思います！ 手順📝 1、フレーム作成(F)。800x800。 2、フレームに色を付ける 3、正円を作成(624x624)。 ショートカットO、シフトを押しながらドラックすると正円ができます。 4、小さい正円を作成(240x240)。 5、4の円を合計4つ作る。 6、中くらいの大きさの円(384x384)を描く。 7 、中くらいの円をさらに３つ増やし、上下左右に配置する。 8、円を全て選択しFlatten(ctrl +E
今回はアウトラインの表示方法をご紹介します！隠れたレイヤーの選択、調整が簡単になります。 ツールバーの右上にある［ズーム／表示オプション］メニューをクリック。 Show Outlines をクリック。 非表示のレイヤーを含めたい場合はInclude hidden layersを、 オブジェクトの境界線を含めたい場合はInclude object boundsを選択。 ショートカットはこちらです。 ⌘ Command / ControlY Shift+O 👇
今回はFigmaを使って、円を等間隔で円状に並べたいと思います！ 手順📝フレームを準備。(ショートカットはF) 円を一つ描く。(ショートカットはO) シフトキーを押しながらドラックすると正円ができます。 円を複製(ctrl +D)。真下に配置(ショートカットはAlt + H)。 グループ化(ctrl +G)。 グループを複製。Shiftをおしながら、グループを回す。 5を繰り返す。 完成です😊 こちらのカラーはFLAT UIを利用しました。 プラグイン円だけ
今回はFigmaを使って直角三角形を作りたいと思います！ 長方形を描く。 図形をダブルクリック。 角の点をクリックして削除。 ペンツールに切り替え、他の3点をつなぐ。 完成！ 今回はここまでです！また次の記事でお会いしましょう～😉 追伸：Figmaにフリーソースを投稿しました！ぜひ使ってみてください。 Follow me here😊 Instagram | Twitter │Dribbble│Linkedin | Figma | Website
今回はfigmaを使ってプログレスリングを作ってみたいと思います。 手順📝 1、円を描く。 2、Strokeにあるプラスを押す。好きな色を入れ、太さを40、位置をinsideからcenterに。fillは消す。 3、この円を複製。 4、二つの円を重ねる。右側の白い丸をクリック。 5、クリックしたまま動かす。 6、今度は真ん中の白い丸をクリック。 7、クリックしたまま外へ移動。 8、後ろの円の色を変更。20％にしました。 9、前方の円をクリック。Storok
今回はfigmaを使って３Dのモックアップを作ってみたいと思います。 手順📝 1、Vectary 3D ElementsのPluginをインストール。 2、モックアップに映したいイメージを準備。 3、イメージを選択し、先ほどインストールしたVectary 3D Elementsを開く。好きなモックアップを選択し、右下のLoad Frameをクリック。 モックアップに選択したイメージが映りました！ 4、Export Imageでエクスポート。完成です🥰 今回はここ
本日は画像の切り抜きをFigmaでやってみたいと思います！こちらの口紅を切り抜きます。 手順📝 1, 画像を置く。 2, ペンツールをクリック 3, 切り取りたいものを囲んでいきます。 4, 一周したら Done をクリック。 5, fillで染め、stroke を消す。 6, 左のパネルを確認。写真を上に、vectorを下に変える。 7, 真ん中の丸いボタン👇をクリック。 8, 完成🥰
本日はニューモーフィズムのバリエーション２つに挑戦してみたいと思います。 先日投稿したこちら👇からまず始めてみてくださいね。 1、くぼんだオブジェクト まずはこちらのくぼんだオブジェクトに挑戦です。 1, 前回作った正方形を複製。(右下に配置しています) 2、複製した正方形をクリックし、Drop shadow 2つをどちらも Inner shadowにする。 3, 完成！へこみました！ 2、オブジェクトを重ねる 今度はこちらのような重ねたデザインに挑戦です！
