Interface design vs. system design
Figma is the standard for designing what an interface looks like, and FigJam is its whiteboard for the discussions around it. Neither describes the application: which routes exist, what data each screen reads, who may open it, or what files a developer should create first. That definition is what Nodlume holds.
Figma is a collaborative interface design tool: vector design, components and variables, prototyping, a developer hand-off mode, and, more recently, AI features that draft interfaces and prototypes from prompts. FigJam is the companion whiteboard for flows, brainstorms, and diagrams. Together they cover the look, feel, and early discussion of a product across any platform.
Nodlume is a system-design workspace for a React application. A project targets one platform — a Next.js site, a Tauri desktop app, an Expo mobile app, an Ink terminal app, or a Manifest V3 browser extension — and defines its pages, components, layouts, data model, API routes, stores, roles, features, and theme in connected tabs. The Export tab turns that definition into a scaffold in build order, an AGENTS.md, generated starter code, a project report, and a GitHub push.
Nodlume covers the layer under the design. A project's pages have route paths, layouts, and guards; components have props and are placed in the tree; entities have fields and relations; API routes have methods and data dependencies; roles have permissions per surface. A theme tab produces the design tokens, and the Export tab produces the scaffold. It does not replace Figma for visual design, and it does not try to.
| Capability | Nodlume | FigJam and Figma |
|---|---|---|
| Primary use | Define one React application and export its scaffold. | Design the interface (Figma) and run the whiteboard (FigJam). |
| Visual fidelity | Low: a wireframe tab for layout blocking and a theme tab for tokens. | Pixel-level design with components, variables, and prototypes. |
| Application structure | Route tree, layouts, route groups, guards, and the file each becomes. | Not modeled; frames are named screens without routing semantics. |
| Data and API design | Entities, relations, API routes, and stores. | Not modeled. |
| Roles and access | Roles, an RBAC matrix per surface, and emitted guards. | Not modeled. |
| Design tokens and theme | A theme tab that generates a shadcn/Tailwind theme; free theme, palette, and font-pairing tools. | Variables and styles as the design system's source of truth, with dev-mode export. |
| Output | Scaffold in build order, AGENTS.md, generated starter code, report, GitHub push. | Design specs, assets, and CSS from dev mode; AI-drafted prototypes. |
| Platform awareness | One target per project changes the export: App Router, Tauri, Expo Router, Ink, or MV3. | Device frames for presentation; no build-target semantics. |
| Collaboration | Live multi-editor documents, share links with optional passcode and expiry. | Real-time multiplayer editing, comments, and shared libraries. |
FigJam and Figma details reflect the vendor's public documentation as of September 2026. Confirm current features and plans with the vendor.
The free plan includes three documents. The standalone tools need no account.
We'd like to use Google cookies to understand how Nodlume is used and to measure our advertising. Nothing loads until you choose, and declining does not affect anything in the app.
Nodlume