Figmaの役立つTips特集

Figmaで作ったデザイン、またはその一部だけをちょっと画像として他のところに貼り付けたい時ってありませんか？画面デザインをMiroやパワーポイントに貼り付けるときなど、いちいちエクスポート機能を使って書き出すと時間がかかります... そんな時には、画像としてコピーしたいレイヤーやグループ、フレームを選択した状態で『Command ⌘ Shift C』のショートカットを使うと、選択した部分をpng画像としてクリップボードにコピーすることができます！一つのレイヤーやグループだけ

ECサイトの商品一覧や動画視聴サービスの動画一覧画面など、Figmaに複数の画像を追加したいような場合、どのように追加していますか？一つずつレイヤーを選択して「塗り 画像」を選択したり、一度すべての画像をFigmaに追加してから配置を調整するといった方法を使う人も多いのではないでしょうか？ 今回紹介するショートカットは、そんな時に便利な「複数画像を埋め込み先のレイヤーを選択しながらFigmaに追加」できる『Command ⌘ Shift K』です！ このように、Figmaの画

Figmaに限らず、PC作業でコピー&ペーストを使うとき、「Command ⌘ C」と「Command ⌘ V」を使うのはもはや当たり前になっていますよね！ 毎日のように使うこのコピー&ペーストのショートカットですが、Figma上でコピーしたレイヤーやグループを「Command ⌘ V」で貼り付けると、フレームの外にペーストされてしまったり、予想外の場所にペーストされてしまう現象に悩まされるデザイナーも多いのではないでしょうか？ 実は、Figmaには「ここに貼り付け」という機

Figmaでデザインに画像を追加した後に、元画像の解像度を確認したり、画像を別ソフトで再編集したくなることはありませんか？ 実はFigmaには、Figmaのサーバーにアップロードされた元画像を開いてくれる機能があるのです。 使い方は、 画像のレイヤーを選択 「インスペクト」タブを開く 「インスペクト」タブの下の方にある画像の「ファイル名」リンクを選択 これによってブラウザで元画像を開くことができ、画像のサイズ確認やダウンロードをすることができます。 「インスペクト」内の機能で

Figmaでフレームやレイヤーを追加していくと「Rectangle 1」「Rectangle 2」のようにデフォルトの名前がつきますよね。それぞれのレイヤーに名前を付けて管理したい場合は「名前を変更」機能を使って名前を変えていくことが多いと思います。 場合によっては、複数のレイヤーに同じ名前を付けて管理したい場合もあるのではないでしょうか？今回は、そんな時に役立つFigma Tipを紹介します。 レイヤー名変更モーダルの使い方 名前を変更したい複数のレイヤーを選択 「コマンド

Figmaでフレームやレイヤーをエクスポートする際に「2x」「3x」など、フレームのサイズの倍数でサイズを指定できることはよく知られていると思います。 しかし、出力する画像のサイズをピクセル単位で指定することができることは意外と知られていないかもしれません。出力サイズをピクセル単位で指定する方法は以下のとおりです。 Figmaを開き、エクスポートしたいフレームやレイヤーを選択します。 右側の「デザイン」パネルの下部から「エクスポート」をクリックします。 「+」アイコンをクリッ

Figmaで作ったデザインに間違って変更を加えてしまわないようにするために便利なオブジェクトのロック機能。変更を加えたくない時は便利な一方、ロックされたオブジェクトはキャンバス上で普通に選択することができず、エクスポートしたい時やプロパティを確認したい時にはやや不便ですよね。Figma画面左の一覧パネルからロックされているオブジェクトを探した経験のあるひとも多いのではないでしょうか？ そんな時には、『Command ⌘』キーを押しながらロックされたオブジェクトの上を右クリック

Figmaでオブジェクトや画像の比率を揃えるのに手元で計算してませんか？ちょっとした作業ですが、何度も繰り返すのは手間ですよね。 そんなときは、プラグイン『Aspect Ratio』を使うと簡単に比率調整が可能です（同じ名前のプラグインが複数あるので、注意してください）。 使い方は、 オブジェクトを作成または画像を挿入 『Aspect Ratio』のプラグインを選択 比率を変更したいオブジェクトまたは画像を選択 WidthまたはHeightのうち、値が固定でない方を選択 任意

Figmaのコメントを確認すると、どの部分にコメントがついているのかわからないことはありませんか？ そんなときは、範囲指定してコメントをつけましょう。 使い方は、 左上のツールバーからコメントを選択 コメントしたいエリアをドラックする これで修正点などをより正確に伝えることができますね！

すでに公開されているWebページのデザインをFigma上で作りたいときはありませんか？ゼロから全て自分で作成するのは大変ですよね。 そんなときは『Builder.io（旧HTML to Figma）』を使うと自動で簡単にWebページをFigmaファイル化することができます。 使い方は、 『Builder.io』のプラグインを選択 Importタブを開く デザイン作成したいLPのURLを「URL to import」に入力 デザインの横幅を「Viewport Width」に設定

長いテキストを省略したいとき、自分でテキスト量を調整して「…」を打っていませんか？ Figmaでは、自動で簡単に「…」に変換することができます！ 作り方は テキストエリアを選択 デザインタブのテキストから「タイプの選択」を開く テキストを省略で「A…」を選択 これでテキストエリアよりテキスト量が多いとき、自動で「…」で省略されます。 フレームの大きさが変わったときに手動でテキスト量を調整しなくてよくなります。 ちょっとした作業でも簡単にできる方法を知っておくと、デザイン作業の

カラーパレットを作成するとき、みなさんはどんなツールを使っていますか？カラーパレットの作成もFimga内で完結できたら便利ですよね。 そんなときは、プラグイン『Color wheel palette generator』を使うと簡単にカラーパレットを生成できます。 使い方は、 『Color wheel palette generator』のプラグインを選択 複数のオプションを活用してカラーを調整 「Generate palette」をクリック オプションでは、6種類のパレット

Figmaで波線や曲線を作りたいときはありませんか？ そんなときは、プラグイン『Wave & Curve』が便利です！ 使い方は、 『Wave & Curve』のプラグインを選択 複数のオプションを活用して波線を作成 「Create」をクリック 次に、設定可能なオプションについて説明します。 波の大きさの調整 左：Height（振幅:px） 中央：Height Difference（振幅の高低差のランダム性） 右：Distance（波長:px） 波の形の調整 左の3要素：波線

みなさんはカラーのティントとシェードの作成はどのように行なっていますか？カラーパレットツールを利用したり、自分で調整して作成している方もいらっしゃると思います。 ティント: 純色に白を混ぜた色 シェード: 純色に黒を混ぜた色 今回ご紹介するのは、Figma上で1色指定するだけで簡単にかつ数学的に複数のティントとシェードを作成してくれるプラグイン『Tints and Shades』です。 このように、指定の色（Base）を中心にティントとシェードを5パターンずつ作成してくれます

Figmaでデザイン作成しているときに、文字を曲線にそって配置したりシェイプを曲線に配置したいことはありませんか？ そんなときは、プラグイン『To Path』が便利です。 使い方は、 『To Path』のプラグインを選択 沿わせたいテキストと曲線を選択し「Link」をクリック ちなみに、波線や曲線を作るプラグインは以下の記事で解説しています。 『To Path』では、複数のオプションによってデザインの調整が可能です。 Vertical Align：テキストと曲線の距離（0~1

Figmaでデザインするときに、FigmaのデザインファイルやFigJamを確認しながら作業したいときはありませんか？ そんなときは、2画面表示を活用しましょう！ 同じファイルを2画面表示したい場合 使い方は、 タブを右クリック 「分割タブで開く」を選択 異なるファイルを2画面表示したい場合 使い方は、 分割表示したいファイルを開く どちらかのタブをドラッグすると画面半分が薄紫になる ファイルを開きたい方にドロップする 2画面表示を解除したい場合は、再度タブを右クリックし「タ

Figmaで作成したページをグルーピングして管理したいときはありませんか？ そんなときは、区切り線（Divider）を使うと便利です。 使い方は、 Pagesセクションの「＋」を押してページを作成 ページ名に「---」または「*」を入力 これによって空ページを区切り線（Divider）に変換することができます。 ただし、ページ内にオブジェクトがある場合は区切り線に変換されないので注意してください。 また、右クリックで区切り線（Divider）の複製と削除をすることができます。

Figmaでデザインする際、コンテンツの横幅を揃えたり配置を整える基準が欲しい時がありますよね。その際に活用すると良いのがレイアウトグリッドです。 レイアウトグリッドは3つの要素で構成されています。 赤：Column（カラム：列） 緑：Margin（マージン：余白） 青：Gutter（ガター：溝） 設定方法は レイアウトグリッドの「＋」をクリック グリッドを編集 列を選択 カラムの数、余白、ガターを設定 また、レイアウトグリッドはグリッドスタイルとして保存して置くことで、簡単

Figmaのプロトタイプでカルーセルを作成するときなど、横スクロールさせたいときはありませんか？ 今回は横スクロールの設定方法を簡単に紹介します。 横スクロールさせたい要素をフレーム化 フレームをスクロールさせたい範囲に調整する プロトタイプ スクロールの動作 オーバーフローにて水平を選択 プロトタイプで挙動を確認 フレームではなくグループ化をしてしまうと、大きさを調整する際に中の要素も一緒に拡大縮小してしまうので間違えないように注意しましょう。 このプロトタイプを活用すると

Figmaでデザインする際にグループとフレームの使い分けに迷ったことはありませんか？ 本記事ではそれらの大きな違いと使い分けのポイントを解説します。 グループとフレームの使い分けについて、Figmaの公式記事では以下のように記されています。 次の場合にグループを使用します: 複数のオブジェクトを1つの管理可能なレイヤーにまとめたい 拡大縮小しても固定関係が維持される要素をグループ化したい場合（例：複数の図形で構成されたロゴやシンボル） グループ内のオブジェクトのサイズを変えた

Figmaでテキストを縦書きにしたい時はありませんか？ 本記事では、テキストを縦書きにする方法を解説します。 フォントは日本語フォントを使用 フォントサイズ（Font Size）とテキストオブジェクトの幅（Width）と行間（Line height）を同じ大きさにする テキストのオプション -詳細設定からVertical alternatesにチェックをつける テキストを縦にするだけでは長音符（ー）や句点・句読点（、。）などが横書きの方向になってしまいますが、Vertical

Figmaでコンポーネントを解除したい時やインスタンスをフレーム化して編集したい時はありませんか？ 実はコンポーネントを直接解除する方法はありません。しかし間接的に解除することはできるため、本記事ではその方法を解説します。 コンポーネントには、マスターコンポーネントとインスタンスが存在します。 マスターコンポーネント（Master Component）：スタイルを編集・変更できる インスタンス（Instance）： マスターコンポーネントのスタイルが自動で同期される（スタイル

Figmaでデザインをした際に、画面遷移図を作成したい時はありませんか？ そんなときは、プラグイン「Autoflow」を使うと簡単に作成が可能です。 使い方は、 オブジェクトを作成 Autoflowのプラグインを選択 Shiftを押しながら矢印の始点→終点の順でオブジェクトを選択 また、プラグインで矢印の太さなどの調整や説明テキストを追加することが可能です。 ちなみに、プラグインを使わなくてもFigJamから矢印をコピー&ペーストしてフローチャートを作ることも可能です。 Fi

Figmaには複数の要素をまとめる方法に「グループ」と「フレーム」が存在します。今回解説するオートレイアウトは、「フレーム」の中の要素を整列させたり、配置・間隔を自動で調整する機能です。 使いこなせるととても便利な機能なので、まずは基本から習得しましょう！ 最初に、オートレイアウトの適用方法を説明します。 適用の仕方は、 複数の要素を選択 右メニューから「オートレイアウト」を選択（shift+A） 次に、要素の間隔、周りの余白（パディング）を指定する方法を説明します。 ① 要