FF Designer: An Open Source UI Design Tool That Runs in Your Browser

Most UI design tools run in two places: your browser, as a cloud app, or on your desktop, as a paid application. Figma is the first kind, Sketch (now retired) was the second, and Penpot tried to bridge them with an open source web app that runs on your own server. FF Designer is a different take. It is a single HTML file you download and open in any browser, with no server, no account, and no telemetry. You save your work to a file on disk, and the file is yours.

I have been using it for two months on a small client project, and the experience has been quietly better than I expected. The file format is plain JSON, the rendering is fast, and the export options cover the common cases (PNG, SVG, PDF). For someone who designs a few mockups a month and does not want to commit to a Figma subscription, it is the right tool.

What you actually get with a single HTML file

The download is a 4 MB HTML file. Double-click it, and your browser opens it. There is no installer, no Electron wrapper (a framework that wraps a web app in a desktop window), no JavaScript build step. The whole designer lives in the page. I tested it in Safari, Chrome, and Firefox, and it works in all three.

The interface follows the standard layout for a vector design tool: a toolbar on the left, a canvas in the middle, an inspector panel on the right, and a layer list on the bottom. The tool palette covers the basics, including rectangles, ellipses, polygons, and text frames, plus the boolean operations and inspector controls that make a design tool actually usable:

• Rectangles, ellipses, polygons, and text frames as primitives
• Boolean operations (union, subtract, intersect) for combining shapes
• Stroke, fill, and corner radius controls in the inspector
• Layer groups with rename, lock, and visibility toggles
• Pixel-level snapping and smart guides for alignment

Keyboard shortcuts are complete. Every menu command has a hotkey, and the hotkeys follow the conventions from Sketch and Figma, not the conventions from 1990s desktop apps. Press V to select, R to draw a rectangle, T to add text, Cmd+D to duplicate. Muscle memory from any modern design tool transfers directly.

The features that matter for real work

A few details put this tool ahead of the other “open source Figma clone” attempts. Auto-layout comes first. Auto-layout is the design pattern where elements resize and reflow automatically when their content or container changes, like CSS flexbox (a web layout system that arranges items in rows or columns) but for design files. FF Designer has it. You can build a frame, mark it as auto-layout, drop a few children in it, and the children will arrange themselves horizontally or vertically with padding and gap controls. This is the feature that took Figma from “vector tool” to “design tool”, and it is the feature most free alternatives skip. FF Designer has it, and it works.

Components round out the workflow. You can mark any frame as a component, then drag instances of it into other frames. When you change the master, the instances update. The system is simpler than Figma’s, with no variants or props, but for a designer who just wants to define a button once and reuse it, it is enough.

Export quality is the third detail. You can export any frame or selection as PNG, SVG, or PDF at any resolution. The SVG export is clean, with proper grouping and named layers. The PDF export preserves vector fidelity. For a designer handing off to a developer, the SVG export is the one that matters, and it is good.

Offline behavior is the final piece. Because the file is self-contained, the designer works on a plane, on a train, or in a coffee shop with bad Wi-Fi. There is no “your connection has been lost” message. There is no “your changes are being synced”. Your work is in the file on your disk, and that is where it stays.

The trade-offs and limits

The tool is good, but it is not Figma. Collaboration is the first limitation. FF Designer is a single-user tool. There is no real-time multiplayer, no comments, no version history. If you need two designers to work on the same file at the same time, you have to use Git, file-locking, or a different tool. For a solo designer this is fine, but for a team of five, it is a deal-breaker.

Asset libraries are the second gap. Figma has a community file system, with thousands of free component libraries and templates. FF Designer has none of that. You build every component from scratch, or you import your own SVGs. If you are used to dragging in a Material Design (Google’s design system) component and adjusting the colors, you will not find that here.

Rendering speed is the third tradeoff. The canvas is HTML and SVG, which means the rendering is fast for small files but slows down on complex ones. A file with 200 elements and 5,000 path nodes will start to feel sluggish. Figma’s WebGL-based (hardware-accelerated 3D graphics in the browser) renderer handles that case better. For most UI mockups, FF Designer is fast enough, but if you are designing an icon set with hundreds of paths, you will feel the difference.

The platform story is the fourth gap. There is no iPad app, no native desktop wrapper, no plugin API. The tool runs in a browser tab, and that is the entire experience. For most people this is fine, but if you are used to a dedicated design app on your dock, the experience feels lighter.

When this tool is the right choice

FF Designer is the right tool for a specific kind of work. If you are a solo designer or developer who sketches UI mockups a few times a month, and you do not want to pay $15 a month for Figma, this is a solid choice. It is also the right tool for a designer who is privacy-conscious and does not want their mockups living in a cloud database somewhere.

Educators should also look at this. Teaching UI design with a self-contained HTML file means students can open the file, follow along, and not worry about creating an account. The file format is also inspectable, which makes it a good teaching artifact.

Avoid this tool for design teams that need real-time collaboration. Skip it if you rely on a large community component library. Skip it if you need advanced prototyping (click-through flows, conditional logic, animations). For those cases, Figma, Sketch, or Penpot are better fits.

The honest summary is this: FF Designer is a focused, well-built tool that does the 80% of UI design that most people actually need. The 20% it does not do (collaboration, plugins, prototyping) is the 20% most teams do not need on day one. If you are a solo designer, give it a try. It might be the only design tool you need for a long time.