Service logo

    ジョブボード

    有益なデザイン情報をメールでお届けします。

    お役立ちのデザイン情報のみをお送りします。メールは多くとも週に一回で、もちろんスパムメールはありません。

    ツール
    • Figma
    Figma
    • プラグイン
    • 機能
    インスピレーション
    • ポートフォリオ
    • デザイン記事
    • ジョブボード

    Designpedia © 2025 / Trademarks, names, terms and IPs are property of their respective owners unless otherwise stated

    Legal Information

    Figma プラグイン

    Figma 機能

    figma logo

    Figma 画像などを任意の形に切り抜く

    画像などを任意の形に切り抜く

    1. Figma
    2. 機能
    3. ツールバー
    4. マスク
    eyecatch image

    概要

    画像などを任意の形に切り抜きます。実際には切り抜いてはおらず、前面のオブジェクトの、背面の図形からはみ出た部分を隠すことで、切り抜いたように見せます。これを「マスク」といいます。 どちらのオブジェクトも変形などはしていないため、後から中のオブジェクトを編集したり、マスクをかける範囲を、それぞれ簡単に変更することができます。

    方法

    2通りの方法があります。 ・ツールバー中央のマスクマークを選択する ・メインメニュー > オブジェクト > マスクとして使用 を選択する

    【マスクをかけるショートカット】

    Mac:Option + Command + M

    Win:Ctrl + Alt + M

    マスクをかける

    人の形をした図形を、SNSのアイコンのように切り抜いてみます。 人の図形を用意したら、背面に円を作成します。

    mask_image01.jpg

    人型と円の2つを選択すると、ツールバー中央に三日月のようなマークが出るので、それをクリックします。(またはメインメニュー > オブジェクト > マスクとして使用 を選択)

    mask_image02.jpg

    すると、人の図形の、円をはみ出た部分が隠され(マスクがかけられ)、SNSのアイコンのように切り抜かれたようになります。 レイヤーパネルを見ると、マスクが適用されたレイヤーには、マスクのマークがついています。

    mask_image03.jpg

    マスクを解除する

    マスクを解除するにはマスクのアイコンがついたレイヤーを選択し、再度ツールバーのマスクアイコンをクリック(またはメインメニューより同じ操作を)します。

    mask_image04.jpg

    mask_image05.jpg

    mask_image06.jpg

    author icon

    Designpedia Team

    2024年1月11日(木) 公開