Skip to content
Sign inJoin waitlist

Titen documentation — Figma

The Titen 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 Titen 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 Titen 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 Plus Jakarta Sans 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.
  • 12 pages, 3 sizes each: Home, About, Services, Service detail, Projects, Project category, Project detail, Blog, Blog post, Testimonials, Contact and 404 — at 1200 px (desktop), 810 px (tablet) and 390 px (phone), 36 frames in all.
  • Styles: colour styles for the whole palette, text styles for headings at each breakpoint, paragraphs, buttons and the menu, and a layout grid style per breakpoint. Every text and colour in the design uses one.
  • 28 components, 93 variants, each with a description: header, menu, search and footer, buttons and text links with their hover states, the submit button’s loading, success and error states, accordions, cards for projects, posts, team members, awards, testimonials and services, the expanding service list, the approach slide and the call to action.
  • Ten Phosphor icons, one component each, including the slideshow arrows.
  • Photos are placeholders, each at the size and crop the layout expects — drop in your own. The previews use photos from Unsplash and Pexels, good free sources; they are not included because their licences don’t allow selling them unmodified.

Getting help

Section titled “Getting help”