Figmaの役立つTips特集

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

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

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

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

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

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

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

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

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

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

長いテキストを省略したいとき、自分でテキスト量を調整して「…」を打っていませんか？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要素：波線の種類右の4要素：波形の種類Number waves：波の数矢印：リセッ

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

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

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

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

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

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

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

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

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

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

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