To create your product variants, simply go to the editing page of your product and click on "Add an option"

You'll now be able to name your option. If we take the example of the skirt from earlier, the first option will be named "COLOR".
We then create the option "SIZE".
Now we just need to create the number of variants necessary to cover all the combinations available. 
Finally, if, as in our case, the visuals of your products differ according to certain options, you can choose the images corresponding to your variants.
You can do the same with the prices. Assuming that the green skirt is on sale, this is what it would look like:
Once your variants are created your users will be able to choose their options directly from the product page.