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

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

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

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

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

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

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

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

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

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

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

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