Figma

Figmaでカラーのティントとシェードを簡単に作成するプラグイン

最終更新日:2024.08.30編集部
Figmaでカラーのティントとシェードを簡単に作成するプラグイン

みなさんはカラーのティントとシェードの作成はどのように行なっていますか?カラーパレットツールを利用したり、自分で調整して作成している方もいらっしゃると思います。

  • ティント: 純色に白を混ぜた色

  • シェード: 純色に黒を混ぜた色

今回ご紹介するのは、Figma上で1色指定するだけで簡単にかつ数学的に複数のティントとシェードを作成してくれるプラグイン『Tints and Shades』です。

Tints and Shades

このように、指定の色(Base)を中心にティントとシェードを5パターンずつ作成してくれます。

使い方は、

  1. オブジェクトを作成し、基準となる色を選択

  2. オブジェクトを選択したまま、『Tints and Shades』のプラグインを選択

  3. 「Create from Selected Rectangle」を選択

また、作成された色はカラーパレットとして保存されているため、利用も簡単です。

手作業で作るのが大変なティントとシェードも、このプラグインを使えば簡単に作成することができますね!

この記事の関連シリーズ
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

  • 「正解のない時代」の課題解決手法 欧州発「システミックデザイン」が日本でも広がるワケ
    デザイン思考2025.08.29
    「正解のない時代」の課題解決手法 欧州発「システミックデザイン」が日本でも広がるワケ
  • 理論を実務に活かす!ビジュアルデザインを形にする6つの視点
    Webデザイン2025.08.19
    理論を実務に活かす!ビジュアルデザインを形にする6つの視点
  • 圧倒的クオリティを生む「チームラボ」流・デザイン組織、働き方 採用チームリーダー・山田剛史氏に聞く
    インタビュー2025.08.07
    圧倒的クオリティを生む「チームラボ」流・デザイン組織、働き方 採用チームリーダー・山田剛史氏に聞く
  • AI時代に求められるUXデザイナーとは?オランダで活躍するデザインリーダーに聞く
    インタビュー2025.08.04
    AI時代に求められるUXデザイナーとは?オランダで活躍するデザインリーダーに聞く

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

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

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