We’ll show you how to use UXPin Merge to build a fully interactive signup page with MUI components. If you want to follow along, create a UXPin account or log into it if you already have one.
Step 1: Place UI components on the canvas
Prepare your working area. Navigate to design system libraries in the bottom-left corner, and double-check if you have MUIv5 chosen as your UXPin library. You will see that you have various components to choose from. For this tutorial drag and drop onto the canvas the following components:
- Image x1
- Breadcrumbs x1
- Typography x2
- TextField x1
- Checkbox x1
- Button x1
- Grid x1
- Paper x1
- Box x2
Below is a simple visualization of the components.
You can scroll through the MUIv5 library and drag the components onto the canvas. Can’t find them? Just type their names inside of the search field. Click the magnifying glass icon and you’ll see this field. Once you have all the components on the canvas, go to the next step.
Step 2: Adjust UI components
Let’s take components and set up the right properties, so it fits our purpose — a sign-up form. Click on the UI element you want to adjust, and you will see that the Properties panel appears on the right-hand menu.
Let’s start with editing following components properties:
- Adjust colors and copy of breadcrumbs links — The breadcrumbs tell users where they are located inside of the app or site. Change the color of the link to primary and secondary. Plus, edit the copy. It should say “Account / Security / Settings”.
- Edit the TextField — This component is our input field and our sign-up form collects email addresses. Edit the copy, so it says “Email” and change its variant.
- Change the size and copy of Typography — Adjust the size of two typography components. Set up the variant of the first one as H3 and the second one as Caption and edit the copy, so it says “Create your account” and “Check this box to receive our weekly newsletter” respectively.
- Change the size and copy of the button — Set up the button size to large, edit the copy, so it says “Next,” and switch its width.
We introduced changes to five components: Breadcrumbs, Typography, Typography, TextField, Button.
Step 3: Organize components inside the boxes
Take the components we’ve just adjusted, and place them into the boxes. One box should contain Checkbox and Typography, and together they will form our checkbox field. The other box has breadcrumbs, typography, input field and button. This arrangement helps us organize our design, providing a necessary structure.
Notice that we are not including Grid, Image and Paper in any of those boxes.
If done correctly, you should be able to see the following structure in Layers Panel, located next to Design System Libraries.
Step 4: Add padding
Add the padding to boxes, so the UI elements have room to breathe. Padding is a common UI term that refers to the space between an element and the border.
Start with Box 1. Add Top and Bottom padding to components in Box 1. Use 12px for the Top padding and 32px for the Bottom. Remember to type in “px” next to the number, so the measurements are crystal clear.
Let’s move on to Box 2. For this one, add a 64px padding on each side for the whole box.
If you struggle to select the right box, use Layers Panel and click on the box you want to add padding to.
Your boxes should look like the image below.
Step 5: Set up grids
The sign-up form has a two-column layout. To make that happen, use the Grid component. It looks like this:
We want to have an Image in one column and the rest of the design in the other column. So, drag an Image component to one of the Grid’s columns (it’s this rectangle that says XS:12, SM:6) and the rest of the components into the other Grid’s column (the other rectangle.) Then, stretch the Grid component into a desired width.
Your Image component will not fit the column appropriately at first. It will be too small. To stretch it, get rid of Width and Height by clicking ‘X’. By selecting ‘cover’, the Image component will look like the one below.
Step 6: Drag everything into Paper component
There’s one component that is left. It is Paper. It adds dimension to the sign-up page. We want our design to fit inside Paper, so we can improve our form visually.
Notice that Paper has a Typography component inside, but we don‘t need it. Replace it with Grid. Stretch the Paper components, so all elements of our sign-up form fit nicely.
Step 7: Final UI design touches
There are a couple of tricks that designers use to make their design more harmonious and easy for the eye. Right now the design looks a bit stiff.
First of all, there’s too much padding. Get rid of it by deleting ‘SX’ PADDING from Paper and SPACING from Grid.
Secondly, Image can take less space in order to make the more important sign-up form shine. Adjust the width of both columns of the grid. Right now both columns take up 6 units. Change Image width to 4 units and the other column will take up 8 units.
Small changes, but the effect is huge, isn’t it?
Step 8: Preview your design
Head on to the preview mode to see your design in flesh. A preview mode is a powerful place where you can simulate your design’s interactions, leave comments, get specs, and copy clean JSX code out of your design. If you’re ready, you can add interactions to the form to make it sensitive to users’ input. Read our help documentation to learn how to add interactions.
Build responsive UI 10x faster with UXPin Merge
That’s it! You’ve now designed a signup page for your app that is fully interactive and consistent with the MUI component library.
With UXPin Merge, you can build way more than just signup pages. Create full user interface designs of apps, websites, and other digital products that can be easily translated into code — without advanced design skills. Get started with UXPin Merge.
