Select a component. On the RHS Design panel add a variant under “Properties”
Select the purple dotted border that appears around the variant. You can then change the name of the variant property to “State” and add another one for “Type”.
You can add more variants by clicking the purple “+” that appears at the bottom of the component when it is selected.
If you select an individual variant you can change the value of its properties on the right hand side under “Current variant”.
As far as the grid layout is concerned you can place these components anywhere you like within the purple dotted border, you can also resize the area by clicking and dragging on the border.
More on variants here
Figma Help Center