deepfounder-ai/desigma

Maintainer? Show your league in your README

Card: your league's emblem, from Copper to Legendary

[![bestofgithub](https://bestofgithub.dev/badge/deepfounder-ai/desigma.svg?style=card)](https://bestofgithub.dev/repo/deepfounder-ai/desigma)

Flat: fits beside your other badges

[![bestofgithub](https://bestofgithub.dev/badge/deepfounder-ai/desigma.svg)](https://bestofgithub.dev/repo/deepfounder-ai/desigma)

Loading README…

_{A Button instance: variant pickers (Type, Size), a text property, a boolean property and the overrides on this copy.} Components that stay in sync Turn any layer into a component with `Ctrl`+`Alt`+`K`, drop instances from the Assets panel, and edit the main component: every instance updates in the same undo step while keeping its own overrides. Boolean, text, variant and instance-swap properties, Combine as variants, Go to main component, Reset all changes and Detach, all undoable.	_{Prototype mode: flow starting points, and connectors from the selected screen to where its buttons lead.} Prototype what you draw Drag from a layer's hotspot to a frame to wire it up, then refine the interaction: triggers, actions, overlays and transitions with easing curves and springs. Present plays it back with Navigate, Back, overlays, Change to (variants), Scroll to and Smart Animate, which pairs layers by name and interpolates them. Variables drive it: Set variable (with a small safe expression language), Set variable mode and Conditional (If / Else if / Else) re-render bound text, colors and visibility live, without ever changing the file. Key, gamepad and drag triggers, interactive components (hover and press states with automatic revert) and video fills (Motion JPEG plays in the pure-Rust build, other codecs show their poster; `cargo build -p desigma-app --features video` adds H.264 through OpenH264, which compiles C++) are included.
_{The Variables view: a Theme collection with Light and Dark modes, aliases to primitives and number variables.} Variables and modes Color, number, string and boolean variables in collections with modes, bound to fills, strokes, sizes and spacing from a picker next to the field. Switch a frame to another mode and everything bound to it follows. Library variables and color styles appear in the same pickers; using one copies it into the file in the same undo step.	_{Dev mode: status, annotations, measurements and SwiftUI for the selected card.} Hand off as code Switch to Dev mode for measurements, a box model and generated code in CSS, Tailwind, SwiftUI, Jetpack Compose or React. Mark frames Ready for dev, and add annotations and links for whoever builds them. Copy a snippet in one click, or switch language without leaving the panel.
_{A 1440 px dashboard: sidebar, KPI cards, charts and a table, all auto layout and component instances.} Real layouts, not just rectangles Nested auto layout frames with hug, fill and fixed sizing, padding, gaps and alignment keep a whole dashboard in shape when the copy changes. Charts are plain vectors, rectangles and arcs. Tag, Avatar and Button instances in the table and the header come from the same component sets as the mobile screens.	_{The color picker on a gradient fill, with the page's colors underneath.} Fills, gradients and effects Solid, linear, radial, angular and diamond gradients, images and blend modes on every fill, with stops you drag on the layer itself. Shared color styles and variables show up in the same picker. Effects include drop and inner shadows, layer and background blur, noise, texture and glass.
_{The projects home screen: a Marlow project with a board, a design system, a dashboard and an app.} Your files, in one place A local projects library with Recents, Starred, projects and folders, search, grid and list views, thumbnails, trash and drag and drop. Files autosave as you work, and "Open in new window" starts another editor on the same library. Shared libraries publish a file's components, styles and variables for other files to enable, with a review step when a new version lands.	_{A board: stickies, connectors, shapes with text, stamps and a section.} Boards for thinking out loud New board in the File menu or on the home screen opens a whiteboard with its own toolbar: stickies whose text shrinks to fit (wide stickies and author labels too), shapes with text, a drawing tray with marker (`M`), highlighter, washi tape and eraser, code blocks with syntax highlighting, stamps, coloured sections (`Shift`+`S`) that carry the notes inside them, and tables (`Shift`+`T`) with + handles and `Tab` between cells. `Tab` starts the next sticky, `Alt`-drag duplicates. A timer and voting sessions run from the top bar. Connectors come out of the magnet dots on any shape, route around the boxes they join and follow them when they move. FigJam files open as boards.
_{The renderer's feature sheet, produced by cargo run -p desigma-render --example render_demo.} A renderer that sweats the pixels Independent corner radii and iOS-style corner smoothing, every gradient type, image fills, inside, center and outside strokes, drop and inner shadows, layer and background blur, masks and boolean operations. All 19 blend modes, including exact linear burn and linear dodge, and text shaped with cosmic-text, with runs, line height, letter spacing, case and truncation.	_{Actions (Ctrl+K): every command, searchable, with its shortcut.} Everything a keystroke away The main menu, tool dropdowns, context menus and the command palette all share one consistent menu widget, with full keyboard navigation and submenus. Export to PNG, JPG and real vector SVG at any scale, copy as PNG, SVG or CSS, and switch to Dev mode for measurements and ready-to-paste CSS.

_{The timeline under the canvas, the Motion inspector on the right. This file is built in: cargo run -p desigma-app -- --motion.}	_{Easing editor: curves, holds and springs for every segment.}
_{The library: 41 presets in Basic, Enter, Cycle and Exit.}	_{Every preset is editable clips: direction, amount, delay, duration, easing, repeat and yoyo.}

🧰 Tools Move · Hand · Frame · Section · Slice · Rectangle · Line · Arrow · Ellipse · Polygon · Star · Image · Pen · Pencil · Text, with snapping, smart guides and distance labels, multi-select, rotate, alt-drag duplicate and vector networks: point editing with bend, paint bucket, marquee and lasso selection, per-vertex corner radius, caps and handle mirroring, plus the shape builder, outline stroke, flatten, simplify, join and split.	📐 Layout Auto layout with direction, wrap, gap, padding, alignment and hug, fill or fixed sizing, plus drag to reorder. Constraints, groups, clipping frames, and pages you can add, duplicate, reorder and delete.	🎨 Styles and color Shared color, text and effect styles with names, folders and keys, applied in one click. A Selection colors section that edits every use of a color at once.
🗂️ Formats In: `.fig` (including FigJam boards and Motion data), Figma REST JSON, Pencil `.pen`, SVG and native `.desigma`. Out: `.desigma`, Figma REST JSON, PNG, JPG, SVG, PDF, and animated GIF, WebM and PNG sequences. Images in PNG, JPEG and WebP.	🔤 Type Bundled Inter variable font, per-run styles, line height in pixels or percent, letter and paragraph spacing, case transforms, decorations, auto-resize and truncation with an ellipsis.	🪄 The everyday essentials Undo and redo for every edit, copy and paste, group and ungroup, align and distribute, z-order, flip and rotate 90°, and zoom to fit or 100%.

Crate	What it does
`desigma-doc`	Scene graph, paints, text, auto layout, components, prototype and motion model (keyframes, easing, springs, presets), undo/redo
`desigma-engine`	Editing logic shared by the app and the MCP server: transactions, auto layout, text measuring, component sync
`desigma-render`	tiny-skia renderer, spatial index, parallel tile cache
`desigma-gpu`	wgpu renderer with a CPU fallback
`desigma-svg`	SVG import
`desigma-pen`	Pencil `.pen` import
`desigma-library`	Projects, team libraries, publishing and version history
`desigma-fig`	Figma REST JSON and `.fig` import, REST JSON export
`desigma-fonts`	Bundled Inter, Fontsource fetch and cache, font substitution
`desigma-export`	PNG, JPG, SVG and PDF export, animated GIF / WebM / PNG sequences, Dev mode CSS, SwiftUI and Compose code
`desigma-collab`	Live collaboration sync: document diffs, host ordering, conflict rules, per-person undo
`desigma-net`	Peer-to-peer session transport over iroh: links, password, approval, presence
`desigma-app`	The egui desktop editor
`desigma-diff`	Pixel-diff library and CLI
`desigma-mcp`	Local MCP server for design-file inspection, editing, and code generation

deepfounder-ai/desigma

🎛️ Familiar by design

⚡ Native and fast

🗂️ Figma files in

🔤 Open fonts, built in

Features

Desigma Decks

Components that stay in sync

Prototype what you draw

Variables and modes

Hand off as code

Real layouts, not just rectangles

Fills, gradients and effects

Your files, in one place

Boards for thinking out loud

A renderer that sweats the pixels

Everything a keystroke away

Motion (beta)

Live collaboration (beta)

Everything in the box

🧰 Tools

📐 Layout

🎨 Styles and color

🗂️ Formats

🔤 Type

🪄 The everyday essentials

Figma files

Pencil files

Under the hood

Get started

Download

Build from source

MCP integration

Native plugin installation

Spread the word

License