Skip to content
Sign inJoin waitlist

Ciketo documentation — Figma

The Ciketo design as an editable Figma file: every page at desktop, tablet and phone size, the colour and text styles, and the components the pages are built from. Read in this order, or jump to what you need.

The cover of the Ciketo Figma file

Guide What it covers
Getting started Opening the file, the font, and a tour of what is on the canvas
Colours and text styles Colour and text styles, and how to rebrand the whole file from them
Components Every component and its variants, and how to use them
Editing the design Changing text and images, building new pages and sections, working across breakpoints
From design to website Turning the design into a website: developers, Dev Mode, exports, the Ciketo code and Framer editions
Troubleshooting and questions Missing fonts, grey photos, questions and answers

In a hurry

Section titled “In a hurry”
  1. Import the file into your Figma account (Getting started).
  2. Install Inter if Figma asks for it — it is the only font.
  3. Change the colour styles to your brand’s (Colours and text styles); every page follows.
  4. Replace the logo in the Logo component and the photos on the pages (Editing the design).
  5. Rewrite the text, page by page, starting with Home.

What is in the file

Section titled “What is in the file”
  • Organised in pages: Cover, Read Me, Style Guide, Components, Icons, and one page per breakpoint.
  • 9 pages, 3 sizes each: Home, About, Services, Service detail, Blog, Blog post, Contact, Legal and 404 — at 1200 px (desktop), 810 px (tablet) and 390 px (phone), 27 frames in all.
  • Styles: colour styles for the whole palette, text styles for headings at each breakpoint, paragraphs, rich text, buttons, labels and the menu, and a layout grid style per breakpoint. Every text and colour in the design uses one.
  • 26 components, 92 variants, each with a description: header with the phone menu, menu links and footer, buttons with their hover states, the submit button’s loading, success and error states, the quote form, the services accordion and list, the “How it works” steps, cards for lanes, posts, questions and testimonials, industries, testimonials and the call to action.
  • Two Phosphor icons, one component each.
  • Photos are placeholders, each at the size and crop the layout expects — drop in your own. The previews use photos from Unsplash, a good free source; they are not included because its licence doesn’t allow selling them unmodified.

Getting help

Section titled “Getting help”