From design to website
A Figma file is a design, not a website. When yours is ready, there are four ways to turn it into one.
1. Start from a Nitip edition that is already built
Section titled “1. Start from a Nitip edition that is already built”The same design exists as working websites. Adjust the design in Figma, then apply the same changes to the edition you choose — the styles, breakpoints and component names match, so the translation is direct:
| Edition | For | Guides |
|---|---|---|
| Framer | No code: edit visually and publish from Framer. Free. | Framer docs |
| Next.js | React developers | Next.js docs |
| Astro | The fastest static site | Astro docs |
| HTML | Plain HTML and CSS, no build tools | HTML docs |
In the code editions the colours live in one theme file and the text styles in one tokens file. Text styles keep the
Figma names (Heading 01 → h01); colours are named by role: Black → ink, Grey → muted, Background →
canvas, Line → line, Accent → accent, Yellow → star.
2. Hand it to a developer
Section titled “2. Hand it to a developer”Share the file with can view access. With a Dev seat, developers open Dev Mode (Shift + D) and read the exact
sizes, spacing, colours and text styles of any layer, and export assets. Without one, they can still inspect layers
from the right sidebar in view mode.
Before sharing:
- Make sure every text layer uses a text style and every colour a colour style — developers turn those into tokens.
- Keep all three breakpoints of every page up to date; developers build what they see.
- Mark interactive states with the component variants (hover, open, loading) or a prototype.
3. Export assets
Section titled “3. Export assets”Select a layer, then Export in the right sidebar:
| Asset | Format |
|---|---|
| Logo, icons | SVG |
| Photos | JPG at 2×, or WebP |
| Share image for social links | PNG, 1200 × 630 |
4. Build it in Framer yourself
Section titled “4. Build it in Framer yourself”The free Nitip Framer template (live site, docs) is this design already built in Framer — remix it (remix link) rather than rebuilding from scratch. If you started from a changed design, update the Framer project’s colour and text styles to match yours first; its pages follow.