Getting started — Kalme Figma
Open the file
Section titled “Open the file”Your purchase gives you the Kalme Figma file in one of two forms:
- A duplicate link. Open it while signed in to Figma and choose Duplicate (or Open in Figma). A copy lands in your Drafts; move it to a team or project from the file menu.
- A
.figfile. In Figma, go to your Drafts or a project, then Import (or drag the file onto the Figma window).
Either way the copy is yours: edit it freely and invite your team. A free Figma plan is enough to open and edit it.
Start with the Read Me page inside the file — it summarises this guide.
The file uses one typeface: Inter — Medium, Semi Bold and Bold in the design, Regular on the documentation pages. Figma’s browser and desktop apps include Inter through Google Fonts, so it usually works straight away. If Figma shows a Missing fonts warning, install Inter on your computer from Google Fonts and reopen the file.
The pages
Section titled “The pages”| Page | What is on it |
|---|---|
| Cover | The file cover |
| Read Me | File structure, getting started, credits and help |
| Style Guide | The colour variables and text styles, shown as swatches and samples (Colours and text styles) |
| Components | Every reusable component with its variants, on three boards: Buttons & Elements, Sections, Cards (Components) |
| Icons | The six Phosphor Icons used in the design (MIT licence), one component each |
| Desktop | The 11 page frames at 1200 px |
| Tablet | The same 11 frames at 810 px |
| Phone | The same 11 frames at 390 px |
Page frames
Section titled “Page frames”Each breakpoint page holds the frames in site order, named <Page> - <Breakpoint>:
| Frame | Page of the site |
|---|---|
| Home | Home: hero with the showreel, about, services, projects, testimonials, blog, call to action |
| About | About: the agency, its values and its team |
| Services | All services, one row each |
| Service Detail | One service: what it offers, its benefits and tools, and the pricing card |
| Projects | All projects |
| Project Detail | One case study: overview, process, result and related projects |
| Blog | Blog overview |
| Blog Post | One article |
| Contact | Contact details and the contact form |
| Terms of Service | The legal text; the Privacy Policy uses the same layout |
| 404 | Page not found |
Frame widths are the breakpoints the design is built for — Desktop 1200 px, Tablet 810 px, Phone 390 px — and each frame has a matching layout grid (hidden by default; see Colours and text styles).
Finding things
Section titled “Finding things”- Pages list (top of the left sidebar): jump between the pages above.
- Layers panel (
Alt/Option + 1): frames and layers are named after what they are — “Header”, “Footer”, “Project Card”, “Post Card”. - Assets panel (
Alt/Option + I): every component with a short description, ready to drag onto a frame. - Right-click a component → Go to main component to jump from a page to where the component is defined.
Before you change anything
Section titled “Before you change anything”Duplicate the frames you are about to rework (Ctrl/Cmd + D) or save a named version (File → Save to version
history), so you can always compare with the original design.