Getting started
Open the file
Section titled “Open the file”Your purchase gives you the Nitip 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, in Regular, Medium, Semi Bold and Bold. 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 and text styles, shown as swatches and samples (Colours and text styles) |
| Components | Every reusable component with its variants, on four boards: Header & Footer, Buttons, Cards, Sections (Components) |
| Icons | The Phosphor Icons set (MIT licence) |
| Desktop | The 13 page frames at 1200 px |
| Tablet | The same 13 frames at 810 px |
| Phone | The same 13 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 |
| About | About |
| Services | Services overview |
| Service Detail | One service |
| Projects Grid, Projects List | Projects, in the two views of its grid/list switch |
| Project Detail | One case study |
| Blog | Blog overview |
| Blog Post | One article |
| Careers | Open positions |
| Career Detail | One role, with the application form |
| Contact | Contact details and form |
| 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”, “Service”, “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.