Components — Titen Figma
The pages are built from components, so a change to a component reaches every page that uses it. The main components live on the Components page, on four boards; every page frame holds instances of them. Each component has a short description, shown when you hover it in the Assets panel.
Using components
Section titled “Using components”- Add one: drag it from the Assets panel (
Alt/Option + I) onto a frame. - Change a variant: select an instance and pick the variant in the right sidebar (for example Header → Breakpoint: Phone, Menu: Open).
- Override content: double-click into an instance and change its text or image. Overrides stay when the main component changes. Many components also have text properties (Title, Label, Category, Date, Year…) you can edit straight from the right sidebar.
- Edit for everyone: right-click an instance → Go to main component, and edit it there.
- Break the link: Detach instance (
Ctrl/Cmd + Alt/Option + B) when one place needs something the component can’t do. The copy stops following the main component.
The hover, open, active, scrolled, loading, success and error variants document how the interface reacts. Use them to show states in a presentation, or connect them with Prototype → While hovering / On click to click through the design. The pages show every component at rest.
Header & Footer
Section titled “Header & Footer”
| Component | Variants |
|---|---|
| Logo | Color: Black, White — the Titen wordmark, as a vector |
| Header | Breakpoint: Desktop, Tablet, Phone × Scrolled: No, Yes × Menu: Closed, Open — Scrolled is the solid bar after scrolling down; Menu Open is the phone menu |
| Footer | Breakpoint: Desktop, Tablet, Phone — “Let’s Talk!”, contact details, links, newsletter and copyright |
To put your logo everywhere, edit the Logo component once (both variants).
Buttons & Elements
Section titled “Buttons & Elements”
| Component | Variants |
|---|---|
| Button Primary | Color: Black, White, Accent Black, Accent White × State: Default, Hover — Black and White turn Accent on hover; the two Accent colours turn black or white |
| Button Secondary | Color: Black, Accent Black, Accent White × State: Default, Hover — the button with an arrow |
| Menu | Arrow: Off, On × State: Default, Hover, Active — one menu or text link; Active marks the current page |
| Search | Type: With Label, Icon Only × State: Default, Hover — the header’s project search |
| Hamburger | State: Closed, Open — the phone menu button |
| Text Line | State: Default, Hover — an underlined text link |
| Submit Button | State: Default, Hover, Pressed, Loading, Success, Error, Disabled — the forms’ send button |
| Download Button | State: Default, Hover — “Download Brochure” on the service pages |
| Divider | Breakpoint: Desktop, Tablet, Phone |
| Accordions | State: Open, Closed — one row of the principles accordion |
| Value | Line: Off, On — a value with its title and description |
| Icon Text | — a check-list item |
| Loading | — the spinner under the Blog list |
| Component | Variants |
|---|---|
| Testimonial Card | Style: Default, On Dark — the quote, client and rating; On Dark is the glass card in the Home hero |
| Team | Layout: Desktop, Mobile × State: Default, Hover — Desktop shows the bio on hover, Mobile (tablet and phone) always |
| Post Card | State: Default, Hover |
| Award | Breakpoint: Desktop, Tablet, Phone — one row of the awards list |
| Project 01 | Image: Tall, Landscape × State: Default, Hover — the project card; Tall (360 high) in the mosaics on Home and Projects at desktop and tablet, Landscape (1.49 : 1) in the other grids and on phones |
| Project 02 | Breakpoint: Desktop, Tablet, Phone × State: Default, Hover — the wide project card |
| Service 02 | Breakpoint: Desktop, Tablet, Phone — one service row on Services |
| Approach | Breakpoint: Desktop, Tablet, Phone — one slide of the approach slideshow on About |
Sections
Section titled “Sections”
| Component | Variants |
|---|---|
| CTA | Breakpoint: Desktop, Tablet, Phone — the call to action with its photo collage |
| Service Value | — the principles accordion on Home: four Accordions rows, the first open |
| Service 01 | Breakpoint: Desktop, Tablet, Phone × State: Open, Closed — one row of the expanding service list |
| Service List | Open Item: 1, 2, 3, 4 — the expanding service list on Home and Testimonials, with one row open |
The Icons page holds the icons the design uses, one component each, named Icon/<name>, all from
Phosphor Icons (MIT licence): arrow-up-right, calendar, check, magnifying-glass, minus, plus,
star, caret-left and caret-right (the slideshow arrows), and magnifying-glass-bold, which belongs to the live site’s
search panel. For the full Phosphor set in every weight, install the free Phosphor plugin from the Figma Community.
Adding your own
Section titled “Adding your own”Build new components next to the existing ones, on the matching board of the Components page, and use the colour and text styles (Colours and text styles) instead of raw values — that keeps your additions rebrandable with the rest.