Figma

Figmaでサイズを指定して画像をエクスポートする方法

最終更新日:2024.02.11編集部
Figmaでサイズを指定して画像をエクスポートする方法

Figmaでフレームやレイヤーをエクスポートする際に「2x」「3x」など、フレームのサイズの倍数でサイズを指定できることはよく知られていると思います。

しかし、出力する画像のサイズをピクセル単位で指定することができることは意外と知られていないかもしれません。出力サイズをピクセル単位で指定する方法は以下のとおりです。

  1. Figmaを開き、エクスポートしたいフレームやレイヤーを選択します。

  2. 右側の「デザイン」パネルの下部から「エクスポート」をクリックします。

  3. 「+」アイコンをクリックして、新しいエクスポート設定を追加します。

  4. サイズ指定のドロップダウンに直接書き出したいサイズの縦幅、または横幅を指定します。

縦幅を指定したい場合は、「300h」「600h」のように数字の後に「h」をつけて指定します。横幅を指定したい場合には、「200w」「500w」のように数字の後に「w」をつけます。

ちなみにこのドロップダウンメニューの中で四則演算を行うことも可能で、例えば「200*4w」入力すると「800w」になり、「600+40h」と入力すると「640h」になります。四則演算の記号は以下のとおりです。

  • 足し算「+」(例 1+1)

  • 引き算「-」 (例 2-1)

  • 掛け算「」(例 54)

  • 割り算「/」(例 6/3)

unprintedの『Figmaの役立つTips特集』では、他にも知っておくと便利なFigmaのショートカットやTipsを紹介していますので、ぜひチェックしてみてください。

この記事の関連シリーズ
Figma

関連記事

Related Articles

  • Figma Config 2025キーノートレポート!これまでにない速さで"アイデアをプロダクトに"できる世界に
    Figma2025.05.08
    Figma Config 2025キーノートレポート!これまでにない速さで"アイデアをプロダクトに"できる世界に
  • Figmaのオートレイアウトの基本的な使い方
    Figma2024.10.16
    Figmaのオートレイアウトの基本的な使い方
  • Figmaで画面遷移図やフローチャートをつくる方法
    Figma2024.10.10
    Figmaで画面遷移図やフローチャートをつくる方法
  • Figmaのコンポーネント化を解除してフレームに戻す方法
    Figma2024.10.08
    Figmaのコンポーネント化を解除してフレームに戻す方法

最新の記事

Latest Articles

  • 「育児と仕事の両立」を支える「ヘルプチーム」を結成 有名マンガアプリを手がけるand factoryの育児支援
    育児支援2025.06.06
    「育児と仕事の両立」を支える「ヘルプチーム」を結成 有名マンガアプリを手がけるand factoryの育児支援
  • “また使いたくなる“を生み出す「ゲームフルデザイン」の極意 セガ エックスディー COO・伊藤 真人氏に聞く
    UXデザイン2025.05.13
    “また使いたくなる“を生み出す「ゲームフルデザイン」の極意 セガ エックスディー COO・伊藤 真人氏に聞く
  • メンタル乱れる夜も。自分の機嫌は自分とAIでとる時代?
    エッセイ2025.05.09
    メンタル乱れる夜も。自分の機嫌は自分とAIでとる時代?
  • Figma Config 2025キーノートレポート!これまでにない速さで"アイデアをプロダクトに"できる世界に
    Figma2025.05.08
    Figma Config 2025キーノートレポート!これまでにない速さで"アイデアをプロダクトに"できる世界に

デジタルデザインの最新情報をお届け!

unprintedのメールマガジンにご登録いただくと、デジタルデザインの最新情報をメールで受け取ることができます。今までに配信したバックナンバーも公開中!

※登録ボタンを押すと利用規約に同意されたものとします。