Components
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 set 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 → Phone - Open).
- Override content: double-click into an instance and change its text or image. Overrides stay when the main component changes.
- 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, active, loading and success 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.
Header & Footer
Section titled “Header & Footer”| Component | Variants |
|---|---|
| Logo | Color: Black, White |
| Header | Desktop, Tablet, Phone - Closed, Phone - Open |
| Navigation | Default, Home, Services, Projects, About, Blog — the active page is highlighted |
| Menu | Default, Hover, Active — one menu item |
| Hamburger menu | Default, Close |
| Footer | Desktop, Tablet, Phone |
| Big Footer | Desktop, Desktop hover, Tablet, Phone |
To put your logo everywhere, edit the Logo component once (both variants).
Buttons
Section titled “Buttons”| Component | Variants |
|---|---|
| Primary Button | Default, Hover, No Icon |
| Secondary Button | Default, Hover |
| Big Button | Default, Hover |
| Social Media | Default, Hover |
| Submit Button | Default, Hover, Pressed, Loading, Success, Disabled |
| Load More Button | Default, Loading |
| Loading | — (spinner) |
| Switch | Weekly, Monthly — the pricing switch |
| Switch Button | Default, Hover, Active — one side of the switch |
| Cursor | Dot, Active, View Project, Read, Play, More Details — the custom cursor and its labels |
| Component | Variants |
|---|---|
| Project Card | Open, Close |
| Project With Details | Default, Hover, Desktop List, Desktop List Hover, Tablet List, Phone List |
| Post Card | Desktop, Hover |
| Team card | Desktop, Tablet, Mobile |
| Testimonial | Desktop, Tablet, Mobile |
| Value | Desktop, Tablet, Phone |
| Text Point | State: Default, Hover |
| Text Icon | — |
Sections
Section titled “Sections”| Component | Variants |
|---|---|
| Project Recent List | Desktop Project/01–03, Tablet Project/01–03, Phone — the home page’s recent projects |
| Project Grid & List | Layout: Desktop, Tablet and Phone, each as Grid or List — the Projects page |
| Service | Desktop, Tablet and Phone, each Open or Close; Desktop Close Hover — the services accordion |
| Careers | Desktop, Tablet and Phone, each Open or Close — the careers accordion |
| Pricing | Desktop and Mobile, each Weekly or Monthly |
| Chart | Desktop, Desktop/Start, Mobile — the animated bars on the home page (Start is the frame before they grow) |
The Icons page holds the icons, from Phosphor Icons (MIT licence). Copy the one you need, or install the free Phosphor plugin from the Figma Community for the full set in every weight.
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.