Santre Interface
Design screens, then click through them.
Build app and web screens with auto layout and components, prototype them with real logic and hand them to developers with measurements and code. Santre Interface saves designs as ordinary files on your own disk, and they open offline.
Alternative to
Northwind Shop app frames
Sample content
Santre Interface 
Santre Interface with fictional sample content. The window follows the layout of the established application it is built on.
What is inside.
Auto layout
Frames stack horizontally, vertically, wrap or form a grid with fixed, hug and fractional tracks. Drag padding and gap handles on the canvas, and constraints and layout grids keep screens tidy as they resize.
Components and variants
Turn a button into a main component, place instances with overrides and group states into a set with variants and properties. The Assets panel searches the library and drags components onto the canvas.
Variables and modes
Colour, number, string and boolean variables carry modes such as light and dark, with aliases and scopes. Bind them to fills, strokes, effects and component properties from the Variables table.
Vector networks
Pen and Pencil draw paths that can branch, and boolean groups keep their operands editable. Shape builder, variable-width strokes, squircle corners and per-point radius finish icons and illustrations.
Prototypes with logic
Connect frames with triggers and actions, animate matching layers between screens and add conditions and expressions in the interaction editor. Present flows in device frames or watch them in the live preview pane.
Developer handoff
Alt-hover to measure, inspect spacing and annotate frames, then mark them ready for development. Compare changes shows property-level differences, and generated CSS, HTML and component code turns component properties into props.
Works offline
Designs are ordinary files saved to your own disk, and they open without a connection.
Logic in the prototype
Variables, modes and conditions make prototypes behave like the product, with every screen state reachable.
Built for every designer
Keyboard navigation and screen-reader support are part of the app itself.
In practice.
Design a mobile app from a template
Open the mobile app starter template, build each screen from auto layout frames and swap in component variants for buttons and cards. Export icons and images at every scale from slices.
Theme a design system
Define colour variables with light and dark modes and bind them to the fills and strokes of your components. Switch a frame between modes to check both themes, and save local styles for type, effects and grids alongside them.
Prototype and hand off a sign-up flow
Wire the screens with triggers and a condition that shows an error state, then present it in a device frame for review. Mark the frames ready for development and share the annotations and generated code.
Made for
Product designers
Build app and web screens with auto layout, components and variable-driven themes.
Design system teams
Maintain component sets, styles and colour variables with light and dark modes.
UX researchers and designers
Prototype flows with conditional logic and present them on device frames for testing.
Front-end developers
Inspect measurements, read annotations and copy generated code from frames marked ready.
The design studio: screens drawn in Interface, pictures finished in Photo.
Illustrative scene
Opens and saves.
.fig files open on a best-effort basis, with stand-ins for layers that cannot be rebuilt exactly.
At the desk.
Design, Prototype, Inspect
Switch modes from the same file without changing apps.
Layers with the layout tree
The layers panel shows how auto layout frames nest, so complex screens stay readable.
Starter templates
The home screen offers templates for apps, landing pages, dashboards, wireframes and icon sets.
Comments and versions
Pin comment threads to frames with replies and mentions, and name versions in the file history.
Light and dark themes
Choose the interface theme that suits the work.
Keyboard and screen reader access
F6 cycles between regions, panels carry names for screen readers and reduced motion is respected.
Good to know.
- Can Santre Interface open .fig files?
- Yes, on a best-effort basis. Vector networks stay editable, and layers that cannot be rebuilt exactly come in as stand-ins, so review each page after opening.
- Can Santre Interface generate code from a design?
- Yes. The handoff mode generates CSS, HTML and component code from frames, with component properties turned into props, alongside measurements and annotations.
- Can several people edit a Santre Interface file at once?
- Live co-editing is on the roadmap. Today each file carries comment threads and named version history for review.
Explore the Stack.
Every app in the Stack is designed around one sign-in, one profile and one place for files, so work moves between them.
- Image editing
Santre Photo - Vector illustration
Santre Vector - Video editing
Santre Film - Photo library and RAW
Santre Light - PDF editing
Santre PDF - Motion graphics and VFX
Santre Effects - Page layout and publishing
Santre Layout - Word processing
Santre Docs - Audio recording
Santre Sound - Presentations
Santre Deck - CAD and drafting
Santre CAD - Spreadsheets
Santre Grid - Document intelligence
Santre Document Intelligence