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

    概要

    コンポーネントとはオブジェクトのテンプレートのようなものです。同じデザインのオブジェクトを量産するときに活用します。 最初にコンポーネントにしたオブジェクトを「メインコンポーネント」と言い、メインコンポーネントをコピー&ペーストなどで複製したものを「インスタンス」と呼びます。

    コンポーネントの非常に便利な特徴は、メインコンポーネントに加えた編集がファイル内にあるすべてのインスタンスに反映されることです。つまり、ファイル内にある同じオブジェクトを一気に編集することができるということです。 またインスタンスは、他のインスタンスに影響を与えることなく、個別に内容を編集することができます。例えばボタンの言葉違いや色違いを作るなどが容易にできます。通常、インスタンスに加えた変更はメインコンポーネントや他のインスタンスには反映されませんが、サブメニューでインスタンスで行った編集をメインコンポーネントに反映させることもできます。メインコンポーネントが変わると、全てのインスタンスも変わります。

    方法

    コンポーネントにしたいオブジェクトを選択します。 ●メインメニュー > オブジェクト > コンポーネントの作成 ●ツールバー中央のコンポーネントの作成 のいずれかを選択します。

    create-component_image01.png

    コンポーネントが作成されます。 レイヤーパネルにもコンポーネントのマークがつきます。

    create-component_image02.png

    すべてのインスタンスをまとめて編集する

    インスタンスは、白抜きのダイヤマークで表されます。 メインコンポーネントを編集すると、その変更がすべてのインスタンスに反映されます。

    create-component_image03.png

    create-component_image04.png

    特定のインスタンスのみ編集する

    インスタンスに加えた変更は、メインコンポーネントや他のインスタンスには適用されません。

    create-component_image05.png

    create-component_image06.png

    インスタンスからメインコンポーネントに変更を反映する

    以下のいずれかの方法で、インスタンスに行った変更をメインコンポーネントに反映します。

    ●変更を加えたインスタンスを選択し、メインメニュー > オブジェクト > メインコンポーネント > 変更をメインコンポーネントにプッシュ を選択 ●変更を加えたインスタンス上で右クリックし、メインコンポーネント > 変更をメインコンポーネントにプッシュ を選択

    create-component_image07.png

    create-component_image08.png

    コンポーネントを解除する

    2通りの方法があります。

    方法①

    (メインコンポーネント内のレイヤーが少ない、かつインスタンスがない時はおすすめ)

    レイヤーパネルで、メインコンポーネントに含まれているレイヤーをすべて選び、コンポーネントレイヤーの外に出します。 その後、空になったメインコンポーネントレイヤーを削除します。

    create-component_image09.png

    create-component_image10.png

    方法②

    (メインコンポーネント内のレイヤーが多いとき、またはインスタンスがある場合におすすめ)

    【インスタンス切り離しのショートカット】

    Mac:Option + Command + B

    Win:Ctrl + Alt + B

    インスタンスがない場合はインスタンスを作成し、切り離しを行います。 メインコンポーネントから切り離され、通常のフレームや図形の状態になります。 すべてのインスタンスを選択し、 ●メインメニュー > オブジェクト > インスタンスの切り離し ●右クリックし、インスタンスの切り離し を選択 いずれかでインスタンスの切り離しを行い、インスタンスレイヤーが通常フレームに変わったら、メインコンポーネントを削除します。

    create-component_image11.png

    create-component_image12.png

    create-component_image13.png

    create-component_image14.png

    author icon

    Designpedia Team

    2024年1月9日(火) 公開