Figma でブール式を使用する方法

Figma は、世界中のグラフィック デザイナーにとって最高のプログラムの 1 つとして知られています。その機能は包括的で、ユーザーが目を引くロゴからユニークなランディング ページまであらゆるものを作成するのに役立ちます。特に、ブール機能 (これも 2002 年のコンポーネント プロパティ更新の一部) を使用すると、複数の式を使用してレイヤーを結合することでカスタム形状を実現できます。

ここでは、次の設計でブール機能を使用する方法を学びます。

カスタムシェイプのブール式オプション

カスタム シェイプを作成する前に、ブール式がどのように機能し、何を実現するかを理解しておく必要があります。ブール値グループを作成すると、塗りつぶしとストロークの両方のプロパティを持つ単一のシェイプ レイヤーとしてカウントされます。

インターフェイスの上部バーに、2 つの四角形が重なったブール アイコンが表示されます。ドロップダウン メニューをクリックすると、ドロップダウン メニューから 4 つの数式オプションが表示されます。

これらの数式オプションには次のものが含まれます。

• 結合選択 – このオプションは、選択した図形をブール値グループに変換します。Union を使用すると、外側のサブシェイプのパスが新しいカスタム シェイプのアウトラインを形成します。ただし、内側の重複セグメントは含まれません。
• 選択の減算 – このオプションが結合選択の逆であると考えると役立ちます。ベースシェイプからシェイプの領域全体を削除します。これにより、最下層のみが表示されます。
• 交差選択 – 交差選択を使用すると、元の形状またはサブレイヤーの重なり合うセグメントのみで構成されるカスタム形状を作成できます。
• 選択範囲の除外 – 関数の除外は、ブール値グループの交差オプションの逆です。これを使用すると、元の形状の重なり合わない部分からカスタム形状を作成できます。

上部メニューのブール値オプションを効果的に使用するには、2 つ以上の図形を選択する必要があることに注意してください。これは、ブール演算では複数のシェイプ レイヤーを 1 つのカスタムの複雑なシェイプに結合するだけであるためです。

Figma インスタンスのスワップ プロパティの使用

Figma が 2022 年にコンポーネント プロパティのアップデートを発表したとき、ブール値の選択は利用可能な複数の新機能のうちの 1 つにすぎませんでした。コンポーネントの更新の主な目的は、邪魔なオプションを探し出すのではなく、バリエーション テンプレートを効果的に作成できるようにすることです。

ブール値はこの重要な部分ですが、ユーザーはインスタンス スワップ プロパティを使用することもできます。その方法は次のとおりです。

1. デザインの要素を選択します。

   

2. インターフェイスの右側にあるインスタンス スワップ メニューに移動し、それをクリックします。アイコンには矢印の付いたひし形があります。

   

3. ポップアップ メニューの「アイコン」などのプロパティに名前を付け、値をチェック マークなどに設定します。

   

4. 「プロパティの作成」を選択します。Figma は、スワップ メニューが元々あったコンポーネント プロパティをマークします。

   

5. デザインを選択し、CTRL + C コマンドを使用してデザインのコピーを作成します。次に、インスタンスを並べて設定します。

   

6. マークされたコンポーネントのプロパティ メニューから新しいアイコンをクリックして選択します。これにより、インスタンス上の要素が自動的に変更されます。

インスタンスのスワップ機能は利便性を重視しています。インスタンスの交換オプションを使用すると、バリエーション (インスタンス) を並べてすばやく切り替えながら、デザイン プロセスを合理化できます。

テキストプロパティオプションを使用してインスタンスを簡単に変更する

ランディング ページの行動喚起ボタンをデザインしているとします。2 つのバリエーションを並べて表示し、インスタンス スワップ プロパティを使用して異なるアイコンを表示しました。ただし、文言も考慮すべき要素です。

通常、プロセスを完了するには、レイヤーセクションをシャッフルする必要があります。テキスト コンポーネント プロパティを使用すると、代わりにサイドバーでこれを表示および変更できます。テキスト プロパティ機能を効果的に使用する方法は次のとおりです。

1. デザイン上のテキスト要素を選択します。

   

2. 「プロパティの作成」をクリックする前に、要素に「テキスト」などの名前を付け、値に「ボタン」を付けます。
3. その後、テキストを変更して、行動喚起の文言を試すことができます。

text プロパティは、インスタンス スワップやブール オプションと併用すると便利です。

Figma でバリアント プロパティを使用する方法

Figma の新しいコンポーネントの更新により、複数のバリアントを作成し、それらをすべて右側のサイドバーから制御できるようになります。そうすることで、テキストの変更やアイコンの交換をより効率的に行うことができます。バリアントのデザインの他の側面を制御することもできます。その方法を見てみましょう。

1. デザインを選択し、上部バーの「バリエーションを追加」をクリックします。左を押したままデザインをクリックし、バリエーションをその隣にドラッグします。

   

2. 2 番目のバリアント プロパティが右側のサイドバーにどのように表示されるかがわかります。プロパティのラベルを「button」に、その隣の値を「red」に再ラベルします。

   

3. これらのプロパティにより、バリアントにラベルが付けられます。元のデザインを選択すると、値が「デフォルト」に戻っていることがわかります。

   

よくある質問

ブール値オプションを使用してロゴを作成できますか?

技術的には、Boolean プロパティを使用すると、パスを使用して複数の形状を組み合わせることができます。これは単純なロゴを作成する方法ですが、オプションは楕円などの単純な形状に限定されます。代わりに、ロゴの作成などにはペン ツールを使用するのが最適です。他のコンポーネントの更新を使用して、階層化プロセスを容易にすることもできます。

テキストコンポーネントのプロパティオプションを使用してフォントを変更できますか?

残念ながら違います。テキスト コンポーネントのプロパティを使用すると、フォントではなくテキストを変更できます。ただし、テキストを選択し、右側のサイドバーから適切なフォントを見つけることはできます。

上記のコンポーネント プロパティを使用する必要がある設計インスタンスにはどのようなものがありますか?

バリアントにコンポーネントのプロパティを使用する必要はありません。ただし、設計プロセスがはるかに簡単かつ迅速になります。例としては、コンポーネントが 1 つだけ変更されているものの主に類似した、異なる色を必要とするボタンや、ランディング ページの形状の小さなバリエーションなどが挙げられます。2 つのデザインを作成し、最適な方を選択する場合にも役立ちます。

Figma のコンポーネント プロパティを使用して設計プロセスを合理化する

ブール値などのオプションを使用すると、古いカスタム形状の組み合わせから新しいカスタム形状を作成できます。これは、上部のサイドバーから 4 つの数式オプションを使用して実行できます。これらには、結合、減算、交差、および除外が含まれます。同様に、テキスト プロパティやインスタンス スワップなど、他のコンポーネント プロパティ オプションを使用できます。そうすることで、異なるコンポーネントを含むバリアントを簡単に作成できます。最終的に、コンポーネントのプロパティを使用すると、設計プロセスを合理化することができます。

ブール値オプションを使用してどのような複雑な形状を作成しましたか? コンポーネントのプロパティ オプションも使いやすいと思いましたか? 以下のコメント欄でお知らせください。