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

Figmaのスタイル入門|何度も使い回す色や文字スタイルを管理する方法

Figmaのスタイル入門|何度も使い回す色や文字設定を管理する方法

オブジェクトに設定できる「色」や「文字設定」は、デザイン中に何度も使用します。 そのような何度も使う設定は「スタイル」という機能を使って保存をしておけば、あとから簡単に呼び出せます。 スタイルの登録 設定できるスタイルの種類は下記の3つです。 カラー…

FigmaのAuto Layout入門|コンテンツに応じて変化させたり、繰り返しのレイアウトをラクに作れる

FigmaのAuto Layout入門|繰り返しのレイアウトやコンテンツに応じて横幅可変するボタンをラクに作る

FigmaにはAuto Layoutという機能があります。 このAuto Layoutを利用すると、コンテンツに合わせて変化するフレーム(アートボード)が作れます。 Auto Layoutとは 「Auto Layout」とは、コンテンツに応じて変化す…

FigmaのVariants機能でコンポーネントの状態を管理する

FigmaのVariants機能でコンポーネントの状態を管理する方法

Figmaでコンポーネントを作るとき、例えばボタンのデフォルト状態やホバー状態、disabled状態など複数の状態を別コンポーネントとして作る必要がありました。 しかしVariants機能を使うと、すべて同じコンポーネントにして、その中の状態違いとい…