Finishing the Checkout components (optional)

Extra credit time—adding the components for the checkout view.

We still have the components left for the Checkout page. Because the procedure follows the same steps that we have looked at before—scan the UX, identify elements and types, create these base elements (Elements page), compose the higher-level components (Components page), always relying on our tokens and styles—I won't list the exact steps here.

This is an entirely optional self-guided lesson/exercise, as none of the implied steps show anything new. Use this as an opportunity to experiment with Figmagic and Figma and see if you understand the workflow we've been using.

If coding is not your strong side, I'd advise you to skip this lesson altogether or just use the provided code.

Don't forget that you can always refer to the Figma file and use the code in the ready-made component library implementation. These contain everything needed to pull it all together.

If you, for whichever reason, just want to have this work handed to you, then go ahead and copy the components from the complete implementation into your codebase. That should work as-is, but of course, it may depend on how exactly you followed my instructions up until this point.

Scope of remaining work#

The full set of components is as follows:

  • ProductCard (done!)

  • CartButton (done!)

  • FormInput

  • IconButton

  • CheckoutItem

  • CheckoutForm

We'll have six components in total, or seven if you include the Demo, but we don't really care too much about that one.

Complete set of components

Complete set of components and their files.

Complete set of components in Storybook

Complete set of components in Storybook.

Remember that these high-level components do not strictly have to exist in Figma. However, in a design system context, it makes sense that design originates from Figma (thus, it starts its life there) before moving on to becoming code (the artifact, so to speak).

For the intents and purposes of this course, though, there is no need to recreate them in Figma if you really don't want to—simply copy-paste from the Figma reference file I have provided if you want a pure design copy.

Advice, hints, and pointers#

My first piece of guidance is to start with a single component; don't do all of them at the same time.

Start a new discussion. All notification go to the author.