WebDesigner's Memorandumウェブデザイナーの備忘録

デザインツール「Figma」の基本的な使い方

デザインツール「Figma」を初めて使う人もある程度操作ができるように、アプリのインストールから基本的なひと通りの使い方を解説していきます。

ブラウザ上で動作するデザインツール「Figma」のアカウント作成から必要最低限の設定

ブラウザ上で動作するデザインツール「Figma」のアカウント作成から必要最低限の設定

いまやデザインツールはAdobe XD、Sketch、Figmaの3つが主流となっています。 自分のそれぞれの使用状況は下記の通りです。 Sketch:業務でも使っていて、1番よく使うデザインツール Adobe XD:たまに業務でも触ることがあって、…

Figmaでデザインを作成するときの基本的な操作方法

Figmaのアカウントを作成したら、次は基本操作についてです。 まだアカウントを作成していない人は前回の記事をご覧ください。 また、今後は基本的にブラウザ上ではなく、アプリをインストールしています。 画面も操作も同じですが、記事内のスクリーンショット…

Figmaに独自のショートカットキーを割り当てる方法

Figmaに独自のショートカットキーを割り当てる方法

Figmaにはショートカットキーを変更する環境設定がありません。 そんなFigmaにショートカットキーを割り当てる方法は下記の2つです。 Macの[システム環境設定]→[キーボード]→[ショートカット]→[アプリケーション]から設定する Keyboa…

Figmaのテキスト周りの操作

Figmaのテキスト編集周りの基本操作|テキストの追加方法からグラデーション設定や縦書き、アウトライン化

今回はFigmaのテキスト関連の操作についてまとめておきます。 テキスト追加の基本 まずはツールバーから選択するか、Tを押して、テキストツールに切り替えます。 あとはテキストを追加したい位置をクリックすると、黒い線が表示されるので、キーボードで文字を…

Figmaの図形周りの基本操作|図形の作成方法から図形ごとの細かい特徴まで

Figmaの図形周りの基本操作|図形の作成方法から細かい設定項目まで

今回はFigmaの図形関連の操作についてまとめておきます。 図形描画系のツール 図形描画系のツールは下記の4つになります。 ツール名 キー 内容 長方形ツール (Rectangle) R 長方形の作成ができる 楕円ツール (Ellipse) O 楕円…

Figmaのパス周りの基本操作|基本的な描画方法からペンツールと直線ツールの細かい違いまで

Figmaのパス周りの基本操作|基本的な描画方法からペンツールと直線ツールの細かい違いまで

今回はFigmaのパス関連の操作についてまとめておきます。 パス描画系のツール パス描画系のツールは下記の4つになります。 ツール名 キー 内容 ペンツール (Pen) P ベジェ曲線を使用したパスの作成ができる 鉛筆ツール (Pencil) shi…

Figmaの画像周りの基本操作|画像の追加方法や色補正、切り抜きやマスク方法まで

Figmaの画像周りの基本操作|画像の追加方法や色補正、切り抜き方法まで

今回はFigmaの画像関連の操作についてまとめておきます。 画像配置の基本 画像を配置する方法は下記の3つあります。 ドラッグアンドドロップで追加 画像ツール(shift + command + K)で追加 画像ツールで図形マスクをする形で追加 Fi…

Figmaのレイヤー周りの基本操作

Figmaのレイヤー周りの基本操作|グループ化やマスク、オブジェクトのロックや表示切り替えなどのレイヤーでできること

いままでテキスト、図形、パス、画像とひと通りFigmaで使用するオブジェクトの基本操作をまとめてきました。 今回はそれらがまとまって表示されているレイヤーパネルの見方や操作についてまとめておきます。 レイヤーパネルの概要 レイヤーパネルにはまず1番に…

Figmaのコンポーネント入門

Figmaのコンポーネント入門|コンポーネントの作成方法から特徴まで

Figmaには「コンポーネント」と呼ばれる機能があり、この機能を使うと複数のオブジェクトが集まったグループをテンプレート化できます。 作ったコンポーネントをいろんな場所に配置したり、そのまま配置するだけでなく色や文字のみ上書きして使えます。 そうする…