Editing the design — Ciketo 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 Post Card, Lane Card, Question and Step Card expose their texts as properties in the right sidebar, so you can edit them without opening the instance.

Section labels and the small capitals on cards show in capitals by themselves (the Label 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 same photo often appears in several places — a service’s photo on Home, on Services and on its own page, a post’s photo on Home, on the Blog and under other posts. Replace it everywhere it appears.

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, Quote Form, How It Works, Services Accordion, Service Row, Service Accordion, Industries, CTA, Testimonials) switch by variant; set the variant that matches the frame. The Step Card uses Desktop on the desktop and tablet frames and Phone on phones.

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

The detail frames (Service Detail, Blog Post) show one example each, and the lists show a selection: the Blog the first six posts, the service page three lanes. 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.

The Home testimonials come as four variants of the Testimonials component (Selected: 1–4), one per client: edit the quote, name and role in each, and swap the portraits in the strip.

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.