Figma Import & Manual Check Guide

A step-by-step for taking the 5 finished HTML pages in this repo, importing them into Figma, checking them by hand, and getting them client-ready. Budget ~1.5–2 hours for a careful pass.

0. What you're working with

• 5 final pages in pages/ — recreations of the human-corrected Sico designs, built from the Figma frames after the client's comments were applied.
• All images are already hosted on imgbb (public URLs baked into the HTML), so they import into Figma intact — nothing is a local file path. Full map: images (208 images).
• Reference designs live in the Sico Figma file HC8PaNSKWH1XEjoPD5jlz3. Each page maps to a corrected ("…comments-done") frame — compare against these:

• Fonts: Montserrat (headings) + Open Sans (body), loaded from Google Fonts. Icons: Phosphor (CDN). Both load automatically when the page is open in a browser, so the import captures them correctly.

1. Import each page into Figma (html.to.design)

We use the html.to.design plugin — the same tool used to build the originals.

Recommended: browser-extension method (handles the hosted images + fonts cleanly)

1. Install the html.to.design Figma plugin and its Chrome extension (from the html.to.design site).
2. Serve the pages locally so the browser renders them with all images/fonts: bash cd pages python3 -m http.server 8080
3. Open each page in Chrome, e.g. http://localhost:8080/home.html. Wait for every image to load (scroll to the bottom once — some load on scroll).
4. Click the html.to.design extension → "Import to Figma." It captures the fully-rendered page.
5. In Figma, open the html.to.design plugin and drop in the captured import. It lands as a frame.
6. Rename the frame (e.g. "Home — v3"), and repeat for all 5 pages.

Alternative: paste-HTML method

Figma → run html.to.design → "Import web page" → paste code → paste the contents of the .html file. Images load from their imgbb URLs. (Slightly lower fidelity than the extension for sticky/JS bits, but these pages are static so it's fine.)

Tips

• Import at 1440 px width — that's the design width; it lines up 1:1 with the reference frames.
• If a page imports with stacked/mobile layout, the capture happened at a narrow window — redo it with the browser window ≥ 1440 px wide.
• Don't worry about the form fields being non-functional; these are design mockups, not a live site.

2. Check each imported page against the original (the important part)

Put your imported frame side-by-side with its reference frame (table above) and walk top to bottom.

Per-page visual checklist (do for all 5)

• Top bar + nav: address, hours, phone, email; nav links; green "Ajánlatkérés" button.
• Hero: headline (correct word highlighted green), subtitle, the 3 badge pills, and the right-side form with all its fields.
• Logo wall: 6 partner logos visible (some are faint/grey — that's intentional).
• Every product / catalog section: correct images (not duplicated, not broken), titles, body copy, feature cards, and "Kérem a … árajánlatot" buttons.
• Tables: every row present, headers correct, dimension/spec values readable.
• Process / FAQ / testimonials / gallery: all present, text correct.
• Bottom lead form + footer: contact details, product links, "© 2026 Sico Complex Kft."

Cross-cutting checks

• All images loaded — no grey/broken boxes. (If one is missing, the imgbb URL is in images.)
• Hungarian copy — no typos, no leftover English, correct accents (á é í ó ö ő ú ü ű).
• No overlapping or cut-off text, no element running off the frame edge.
• Contact info identical on every page: +36 30 411 1435 · sico@sico.hu · 8360 Keszthely, Gyöpi u. 7.
• Each page matches its reference frame — flag any section that differs and note which.

3. Resolve the open items BEFORE the client sees it

These are listed in full in ambiguities — they are decisions, not bugs, and need Matt's (or the client's) call. The must-fix ones:

1. Kármentőtálcák testimonials are wrong — they're dohányzópavilon (smoking-shelter) testimonials copied over by mistake. Replace with 3 real kármentő / vegyszertároló testimonials before handoff.
2. Logo-wall heading is inconsistent across pages ("Elégedett ügyfeleink" vs "Olyan vállalatok…"). Pick one and apply everywhere.
3. Footer product links aren't standardised (some pages combine "Kerékpártárolók & Dohányzópavilonok", some don't). Decide one version.
4. ~45 bare-dot pins in the original Figma comments — open those pins in the Sico file to see if any asked for an image/change that wasn't carried over.

Anything you change can be done directly in Figma, or send the decisions back and the HTML can be regenerated.

4. Pre-handoff final checklist

• All 5 pages imported as clean 1440-wide frames.
• Each page checked against its reference frame — no unexplained differences.
• All images load; no broken boxes.
• Hungarian copy proofread.
• The 4 open items in §3 resolved (especially the KART testimonials).
• Frames named and arranged in a presentation order for the client.
• Quick mobile sanity check if the client will view on phone (the HTML is responsive; in Figma you're reviewing the desktop 1440 layout).

Notes

• Do not delete the imgbb uploads — the pages link to them. If they ever disappear, the local source PNGs and the re-upload recipe are with Matt.
• These are static design mockups for client review, not a deployed website. Forms don't submit.
• Questions on how anything was built or why a section looks the way it does → see audit.