DevForum Redesign — Code Prototype

A code prototype of the Roblox DevForum redesigned in Figma using the Foundation Design Kit. Mirrors the Figma file at:

• Redesign: https://www.figma.com/design/qXhDN5lnv9Ia2xaq8CwU5a/DevForum-Redesign
• Foundation Design Kit: https://www.figma.com/design/vy6X3AU6LqxIhdQGoMPOh7/Foundation-Design-Kit
• Foundation Tokens: https://www.figma.com/design/17pK8lmQyCS3R01dMIXIR9/Foundation-Design-Tokens-Extended
• Builder Icons Library: https://www.figma.com/design/qg20yrA7n7HXKpOjEmP981/Builder-Icons-Library

What's here

Six fully-rendered screens with a top switcher to jump between them:

• Home — categories grid, latest activity tabs, sidebar, pinned/contributors/tags rails
• Category — topic list with sortable filter bar, badges, and pagination
• Topic — full thread view with author chips, code blocks, reactions, accepted-solution badge, and an inline reply composer
• Profile — cover, identity, stat strip, tab bar, 26-week activity heatmap, badges grid
• New Topic — composer with category chips, title, markdown toolbar, body, tags
• Search — hero search, result filters, highlighted query terms, refine rail

Constraints

• Desktop only, locked to a 1440px minimum width (matches the Figma artboards).
• Dark mode only.
• Uses CSS variables that mirror the Foundation Design Kit semantic tokens (surfaces, content, system colors, sizes).
• References Builder Sans / Builder Mono with system fallbacks.

Run it

npm install
npm run dev

Then open the URL Vite prints (typically http://localhost:5173/).

To build a static bundle:

npm run build
npm run preview

Project structure

src/
  main.tsx                    # Vite entry — renders DevForumApp
  devforum/
    DevForumApp.tsx           # Top-level switcher + Header / Footer
    theme.css                 # Foundation tokens + component styles
    components.tsx            # Avatar, Chip, Button, IconButton, SearchInput, Header, Footer, Breadcrumb
    icons.tsx                 # Builder-style SVG icon set
    data.ts                   # Mock content (categories, topics, tags)
    screens/
      Home.tsx
      Category.tsx
      Topic.tsx
      Profile.tsx
      Composer.tsx
      Search.tsx

Notes

• All interactive content is mocked in data.ts. The like buttons on the Topic page are wired up with React state for demo purposes.
• The redesign was authored in Figma first; this prototype is a code-faithful rendering of those artboards using the same Foundation tokens.