Editing the design

Text

Double-click a text layer and type. Its style (size, weight, line height) stays as it is. If a heading grows longer than the demo copy, check the Tablet and Phone frames of the same page — the same words take more lines there.

Text inside a component instance (a card title, a button label) is an override: change it on the page, and the component stays shared.

Images

Photos are image fills on rectangles and frames, so the crop and size stay put when you swap them:

1. Select the layer with the photo.
2. In the right sidebar, click the image thumbnail under Fill.
3. Choose Choose image (or drag a file onto the thumbnail) and keep Fill as the scale mode.

To replace many at once, use Place image (Ctrl/Cmd + Shift + K): pick several files, then click each layer in turn to fill it. Use photos at least twice the size they appear on the Desktop frame, so exports stay sharp on high- density screens.

Working across breakpoints

Every page exists three times — Desktop, Tablet and Phone — and the three frames are separate. When you change the content of one, make the same change in the other two:

1. Finish the Desktop frame.
2. Copy the changed layers into the Tablet and Phone frames, or retype there.
3. Check line breaks: headings use smaller styles on smaller frames (Colours and text styles).

Components that have breakpoint variants (Header, Footer, cards, Service, Careers) switch by variant; set the variant that matches the frame.

Auto layout

Sections, cards and buttons use auto layout: they grow with their content and keep their spacing. Add or remove a row and the rest moves up or down by itself. To change spacing, select the frame and edit the gap and padding in the right sidebar rather than dragging layers.

If something refuses to move freely, it is inside an auto layout frame: reorder it within the frame, or set Absolute position in the sidebar to place it freely.

A new page

1. Duplicate the three frames of the page closest to what you need (Ctrl/Cmd + D) and rename them (Pricing - Desktop, Pricing - Tablet, Pricing - Phone).
2. Keep the header and footer instances; set the Navigation variant if the page belongs in the menu.
3. Replace the sections in between with ones copied from other pages or built from components.

A new section

Copy a section from any page — every page is built from full-width sections stacked vertically — and change its content. Reusing section structure keeps the spacing rhythm (section padding and gaps) consistent with the rest of the design.

Keeping it tidy

• Name new layers after what they are; the developers building from your file will read them.
• Use the colour and text styles for anything new (Colours and text styles).
• Delete unused frames before you hand the file over, and note decisions in a comment (C) on the frame they concern.