Figma Audit + Responsive Design System Rebuild (Framer → Figma)

Category: UI/UX Design Type: Fixed price, single milestone Skills: Figma, design systems, responsive web design, auto-layout, Figma variables About the project We run a consumer fintech marketing site — content-heavy, image-heavy, with long templated detail pages and regulated financial disclosure copy throughout. The site URL will be shared privately with shortlisted candidates. We're keeping it off the public post intentionally; please don't ask for it in your application. The honest state of our Figma file We'd rather tell you now than have you discover it in week two. The file has 13 pages and a lot of frames, but almost no system underneath: One variable collection, containing exactly one variable Zero color styles, zero text styles, two effect styles Auto-layout is barely used — most top-level frames are absolutely positioned Our button component set is sitting in a page called archive, alongside ~230 other loose layers Two divergent versions of our main detail-page design exist in different pages Two near-duplicate copies of the homepage hero page Several pages are experiments, not shipped work Treat variables, styles, and auto-layout as work to be built from scratch, not tidied. Price accordingly. If you were assuming "most of it is already done," it isn't — the pictures exist, the system doesn't. What's going on Our site is built in Framer. We're migrating it to Next.js. Along the way we want Figma to become our real design source of truth. Right now it isn't. We have Figma files, but they're incomplete, and over the past year we've made changes directly in Framer without updating Figma. Nobody knows exactly how far the two have drifted. We need someone to close that gap. The work One deliverable set, one payment on completion. There's a required checkpoint partway through (see below), but it isn't a separate payment — we release the full amount when the whole job is done and accepted. Part 1 — Audit Go through the live site and our existing Figma files and produce a written gap analysis: every place the live site and Figma disagree, what exists in Framer that was never designed in Figma, and what exists in Figma that we never shipped. Deliverable: a structured document (Figma page, Notion doc, or spreadsheet — your call) listing each discrepancy, the page it's on, and a screenshot pair. Also flag any inconsistencies you find within the live site itself — we already know of at least two, and we'd rather hear about the rest from you. This document is a required checkpoint. Send it to us before you start designing. We'll review and respond within two business days. We're not gatekeeping your progress — we just want to catch a mismatch in understanding before you've built twenty-one frames on top of it. Part 2 — Design system Build the reusable foundation in Figma, matched to the live site. a) Variables. Every color, spacing value, font size, weight, line height, and radius used on the site, defined as Figma variables with sensible names. This is the core deliverable — everything else depends on it. b) Component library. Published components with variants and named properties: nav, footer, buttons (all states), listing card, stat block, FAQ accordion, section headers, form fields, badges/tags. Built with auto-layout, responsive by construction. c) Page frames. Item Desktop Mobile Home (~10 sections) Yes Yes Detail page template (~19 sections) Yes Yes Detail page — bundle variant Yes — Product index / listing page Yes — About Yes — Terms of Service Yes — Privacy Policy Yes — d) Responsive rules doc. Instead of full tablet comps, document how components behave between desktop and mobile — stacking order, column counts, type scale changes, what hides. A short written spec is fine. If the scope turns out to be wrong We've scoped this from our own read of the site, and we could be off. If your audit finds substantially more drift than the description above implies, tell us at the checkpoint. We'll adjust scope to fit the budget rather than expect free work — but that conversation happens at the checkpoint, not at the end. Breakpoints Our existing Figma uses four sizes. For this job: Desktop — 1440px (comped) Mobile — 375px (comped) Tablet — 1024px landscape and 768px portrait (documented in the responsive rules doc, not comped) Requirements — please read, these are not optional This file is going to be consumed by AI coding tools to generate the Next.js build, so structure matters as much as appearance: Figma variables for all colors, spacing, and typography. No hardcoded hex values or manual pixel nudges. Auto-layout everywhere. Absolutely positioned elements will be rejected. Published component library with variants and named properties. Consistent, sane layer naming. "Frame 247" is not a layer name. One component set shared across breakpoints, not separate copies per size. If you've done design-system work intended for developer or AI handoff, say so in your application — that's what we're buying. Explicitly out of scope Our Figma file contains a lot that this job does NOT cover. Ignore all of it: Our logged-in product/dashboard screens (log in, password reset, account activation, profile, main dashboard) Splash / welcome screens Marketing banners and paid-ad creative Anything on the archive page, except that you may salvage useful components from it if that's faster than rebuilding What we're not asking for No redesign. Match what's live. If you spot something you'd improve, note it in the audit; don't unilaterally change it. No new pages or new concepts. No development work. Known gaps you'll need to close Some pages appear to have no design at all and will need to be built from the live site: About, Terms of Service, Privacy Policy, and the product index/listing page. Where two versions of a design exist, ask us which is canonical. Don't guess. Notes Some page content is regulated financial disclosure text. Do not reword, shorten, or "clean up" any legal or disclosure copy — reproduce it exactly. We'll provide Figma access, the site URL, and a walkthrough of the existing files once we've shortlisted. Full amount is funded into Upwork escrow when we hire, and released on completion. Expect to sign a short NDA before receiving access. To apply Please answer these — applications without answers won't be reviewed: Link to a design system or component library you've built in Figma. Not a portfolio of pretty screens — a file with real components and variables. Have you built Figma files intended to be consumed by AI coding tools or a developer handoff process? What did you do differently? What's your estimated timeline for the whole job, and roughly how much of that is the audit portion? How do you prefer to handle it when the live site and the design are both "wrong" — i.e. the live site has an inconsistency the design never had? Your fixed-price quote for the whole job, and a rough breakdown of how you got there — roughly how many hours on the audit, on variables and components, and on page frames. We're more interested in a number you can defend than the lowest number. Start your reply with the word CROSSWALK so we know you read the post.