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

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

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

Figmaの画像書き出し方法

Figmaの画像書き出し方法

作ったデザインをコーディングで実装していくときに必要な、Figmaでの画像エクスポートに関してまとめておきます。 基本の書き出し方 基本的には書き出したいオブジェクトを選択して、右下にある「Export」をクリックします。 あとは書き出し画像の設定を…

Figmaのプロトタイプ機能の基本|作成したデザインに実際に画面遷移を設定する

今回は作ったデザインを元にして、画面遷移やマイクロインタラクションを再現できるプロトタイプ機能についてまとめておきます。 プロトタイプ機能 Adobe XDやSketchにもある機能で、最近のデザインツールにはあって当然の機能です。 作ったデザインを…

Figmaで作ったスマホデザインを「Figma Mirror」を使ってリアルタイムに実機確認をする

Figmaで作ったスマホデザインを「Mirror」機能を使ってリアルタイムに実機確認をする

スマホのデザインを作るとき、実際にスマホに表示して見てみることが大切になります。 ボタンやフォントのサイズ感や、位置が本当にそこで押しやすいかどうかは、実際にスマホを持ってみることで気がついたりもするからです。 Figmaのスマホアプリにある「Mir…

Figmaでオブジェクトの整列をショートカットキーを使って効率的に行う方法

Figmaでオブジェクトの整列をショートカットキーを使って効率的に行う方法

デザインするとき、意外と多い操作が「整列」です。 要素を揃えるたびにマウスで手をプルプルさせながら調整するのはデメリットが多いです。 「揃える」という余計な部分に神経を持っていかれて疲れる スマートガイドがあるものの、マウス操作だとズレる可能性がある…

FigmaのSearch Menuを使用して必要なメニュー・コマンドをすばやく実行する

FigmaのSearch Menuを使用して必要なメニュー・コマンドをすばやく実行する

Figmaで「ショートカットキーが覚えられない」「目的の項目がどこのメニューにあるか忘れてしまう」という人は「Search Menu」を使うようにするとかなり快適になります。 Search Menu機能 command + /(スラッシュ)を押すと画…

Figmaのバージョン管理機能を使って、デザインの変更点を管理する

Figmaのバージョン管理機能を使って、デザインの変更点を管理する

IllustratorやPhotoshopなどのバージョン管理機能が存在しないデザインツールの場合は、作業前にファイルを別名保存する必要がありました。 しかしデザインデータはそこそこの容量がありますし、細かい差分を別ファイルにしていくのも面倒です(フ…

Figmaのコメント機能を利用してデザイン上のやり取りを円滑にする

Figmaのコメント機能を利用してデザイン上のやり取りを円滑にする

Figmaでデザイン作成時のコミュニケーションを円滑にする機能に「コメント機能」があります。 他のデザインツールや、プロトタイプ作成ツールにもコメント機能はあるのでそこまで珍しい機能ではありませんが、たいていのコメント機能は共有設定をしてからその上に…

Figmaでプラグインを使わずに複数のレイヤー名を一括変更する方法

デザインをしていると、レイヤーがだんだんごちゃごちゃしてきて気になってしまいます。 名称などは人によっては気にしないかもしれませんが、キレイに整理しておいて損をするものではありません。 レイヤー名を整理したいときにはプラグインを使わないのかと思いがち…

FigmaでAdobe XDやSketchのデータを開く方法

FigmaでAdobe XDやSketchのデータを開く方法

FigmaではAdobe XDデータ(.xdデータ)Sketchデータ(.sketchファイル)をインポートして開けます。 XDデータのインポート XDのデータはFigmaに対応していないので、少し特殊な方法で持ってくる必要があります。 XD2Ske…