Editing the design — Titen Figma

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 date, a button label) is an override: change it on the page, and the component stays shared. Cards such as Project 01, Post Card, Team and Award expose their texts as properties in the right sidebar, so you can edit them without opening the instance.

Button labels, menu links and section labels show in capitals by themselves (their text style sets the case): type them in normal case.

Images

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

1. Select the layer with the photo (in the download, a grey Placeholder box).
2. In the right sidebar, click the swatch under Fill and switch it to Image.
3. Choose Choose image (or drag a file onto the swatch) 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.

The live site plays two videos: behind the Home hero and in the band on About. In Figma they are still frames: replace them like any photo, and give your developer the video files.

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 with breakpoint variants (Header, Footer, CTA, Divider, Award, Approach, Service 01, Service 02, Project 02) switch by variant; set the variant that matches the frame. The Team card uses Desktop on the desktop frames and Mobile on tablet and phone.

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 project, service, post or testimonial

The detail frames (Service Detail, Project Detail, Blog Post) show one example each, and the lists show a selection: the Blog the first four posts, Testimonials six clients. For another one, duplicate a card inside its list (Ctrl/Cmd + D) and change its photo and texts, or duplicate the three detail frames and change the photos, title and texts.

A new page

1. Duplicate the three frames of the page closest to what you need (Ctrl/Cmd + D) and rename them (Careers - Desktop, Careers - Tablet, Careers - Phone).
2. Keep the header and footer instances; set the page’s Menu link to Active if it 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.