Create a basic responsive prototype

In this exercise, we’ll create a basic responsive prototype using pinned elements and percentage-based height and width.
Basic responsive example

  1. Create a new Web prototype. Drag two Rectangle widgets onto the Canvas, placing one at the top of the screen, and one at the bottom. These will act as the header and footers of the prototype.
  2. Select the header Rectangle. In the Properties palette, look to the Background section. Upload an image to the background of the Rectangle and from the dropdown, choose the ‘Cover’ option. Alternatively, you can choose a color for the Rectangle’s background instead of an image.Add image as background of rectangle
  3. With the Rectangle still selected, and still in the Properties palette, look to the Size section. For the width, change the ‘px’ dropdown to ‘%’, and change the Width to 100. The Rectangle will now always take up 100% of the screen’s width.100 percent width of header
  4. Drag a Text widget near the top of the header Rectangle. It will serve as the title of the website prototype.In the Properties palette, look to the Position section. Tick the “Display pin position options” box. In the dropdowns that appear, change the ‘X’ parameter dropdown to “Pin to center”. Leave the ‘Y’ parameter fixed. The title Text will now always remain in the center of the screen.Pin title of screen to center
  5. Look to the footer Rectangle, and change its width to 100%.
  6. With the footer Rectangle still selected, and still in the Properties palette, look to the Position section and change the ‘Y’ parameter to “Pin to bottom”. Leave the ‘X’ parameter fixed. The footer will now always be shown at the bottom of the screen.Pin the footer to the bottom
  7. Near the footer, drag two Text widgets and an Image widget. Change one Text widget to be pinned to center and pinned to bottom, with a 100px margin.Change the other Text widget to be pinned to center as well, and pin it to the bottom with a 72px margin.

    Lastly, change the Image widget to be pinned to the center and pinned to the bottom with a 41px margin.Pin text and images to bottom center

  8. Drag a Button widget onto the Canvas. Style it as you’d prefer and change its width to 40%. Pin it to the center, and to the bottom with a 200px margin. The Button will now always appear at the center-bottom of the screen, and will always take up 40% of the width of the screen.Pin button to the bottom center
  9. Drag one Text widget and one Rectangle widget onto the top right of the Canvas. Label the Text “Login” and the Rectangle “Sign up”. Change the Rectangle’s background to be transparent, and change its border to be rounded 100.Add border to sign up button
  10. Select the Text and pin it to the right with a 130px margin. Select the Rectangle and pin it to the right with a 20px margin.Pin sign up button to the right
  11. Drag a Dynamic Panel widget onto the Canvas. In the “Layout” section of the Properties palette, change its layout to Vertical.Then, under “Container padding” change the “Top” padding to 40px. There will now be some spacing between the top of the panel and the contents of the panel.alignmentofpanel
  12. With the panel still selected, pin it to the center, change its width to 90% and its height to 48%.Pinned and percentage width panel
  13. Double click on the Panel and drag a Paragraph widget into the panel. Change its width to 77%. The Paragraph will now occupy 77% of the Panel’s width, and the panel itself will occupy 90% of the screen’s width.Give paragraph percentage width

Click “Simulate” and change the width of the simulation browser. Your prototype will automatically adjust elements to be responsive to the width of the browser.

Note: Simulation settings must be set to expand to the browser width. You can specify this in simulation settings, or in the simulation window.

Simulation setting

You can download our example here.