Figma is appreciated as one of the best programs to use for graphic designers from all over the world. Its features are complete, to help anyone design everything from a logotype to a visually distinct landing page.
Specifically, regarding the Boolean feature, you have the ability to create those shapes at various layers using several formulas.
Here you will know how to employ the Boolean features in the subsequent design:
The Custom Shape Boolean Formula Options
The following is important to understand before creating a custom shape, Boolean formulas, and what they accomplish: Each time you create a Boolean group it will be considered as a shape layer with fill and stroke attributes.
The Boolean option is marked with two squares laid over each other which is located at the upper panel of your interface. When you click on the ‘formula’ box, you’ll have four formula choices from the pull-down list.
These formula options include:
- Union Selection Process: This command converts the selected shapes into a Boolean group. Where Union is applied the paths of the outer sub-shape will define the new custom shape. But it will not encompass any of the concentric overlapping areas within.
- Section of Subtraction: It deletes an area of shape on the base shape; it erases the overall area of the given shape from the base figure. This only exposes one layer namely the bottom layer of the cake.
- Selecting Intersects: Here, the users are able to generate a specific figure that contains only the common areas of the initial figures or subscreens.
- Eliminate Choice: Exclude functions is the type of operation that is in contrast to the intersect Boolean group option. Using it will give you a custom shape from each segment of the original shapes that do not overlap with each other.
Just as a reminder, two or more objects must be chosen before you enable Boolean from the top navigation bar. This is because Boolean only compiles multiple shape layers into one custom and complex shape only.
Figma Instance Swap Property
When, in February of 2022, Figma unveiled their update to component properties, there was much more than a Boolean selection introduced.
Again, the purpose of the components update is to make variation templates as effortlessly as possible instead of, for example, exploring obscure settings.
However, this also shows that in addition to Boolean, it is also possible to use the instance swap property. Here’s how to do so:
- The chosen element of your design must be.
- On the right side of the visual interface of the given application, there are numerous options in the shape of buttons, and one of them is the instance swap menu click on it. On the icon, there is a diamond overlaid with an arrow.
- Assign a name to the property: In the various pop-up menus, to “icon”, for instance, assign the value: a check mark.
- Click on ‘Create property. ’ Figma will highlight the component property where the swap menu used to be.
- To make a copy of your design position the cursor on it use the key CTRL + C and then position the instances side by side.
- You choose a new icon from the menu corresponding to the marked component property by clicking on it. It shall also automatically change the element on the instance as discussed above.
All in all, the instance swap function is as simple as that; a highly convenient affair. There is the swap instance option to design more efficiently while being able to switch between the variations (instances) directly side by side.
Easy modification of instances through the Text Property Option
Suppose for illustration, you are in the process of designing a call to action button on a landing page. You have one option, two variations, and the last time you set instance swap and I saw different icons. But again words used are the parts that need to be considered.
Normally, there are many options and, in order to finish the process, you would have to go through the layers section.
For text component property that represents this, you can see and modify this on the sidebar, instead. Here’s how you to use the text property feature to your advantage:
- Choose the text element in the study that you have created.
- Label it as ‘text’ and the value as ‘button’ then press ‘Create property’.
- This will allow you to fine-tune the text and think about, or try out new, wording for your call to action.
The text property is quite useful specifically together with the instance swap and Boolean options.
How to Utilize Figma’s Variant Properties
When you install new components on Figma, you’ll be able to add multiple versions and manage all of those from the right panel.
This will assist you in changing text and icons and swapping them to improve the efficiency that you will display.
You can also define other aspects of the variant’s design All the commonalities and differences in the sections defining variant design have been combined together. Let’s see how to do so:
- Choose your design and tap on Add Variant in the upper toolbar. Left-click on your design, and immobilize the variant right next to it.
- I will show you how the second variant property will be opened on the right sidebar of the page. Change the label of the property to “button” and the value beside it as “red
- These properties will now brand your variant. Should you decide to choose the original design you will find that the value has been changed back to default.
