Skip to content
Framebrick Docs

Nitip documentation — Figma

The Nitip 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.

Guide What it covers
Getting started Opening the file, fonts, 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 Nitip code and Framer editions
Troubleshooting and questions Missing fonts, broken images, questions and answers

In a hurry

Section titled “In a hurry”
  1. Duplicate the file into your Figma account (Getting started).
  2. Install Inter 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 (grid and list views), Project detail, Blog, Blog post, Careers, Career detail, Contact and 404 — at 1200 px (desktop), 810 px (tablet) and 390 px (phone), 39 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.
  • 31 components, 108 variants, each with a description: header, navigation, footer, buttons (including hover, loading and success states), cursor labels, cards, accordions, pricing, charts and project lists.
  • Phosphor icon set used across the design.
  • Photos are placeholders, each at the size and crop the layout expects — drop in your own. The previews use photos from Unsplash, a good free source; they are not included because the Unsplash License doesn’t allow selling them unmodified.

Getting help

Section titled “Getting help”