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

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

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

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

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

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

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

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

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