Elyx

Where design means more.

[Elyx @elyxdesign]

@riframen We’ll get you on soon! Trying to do it in a way that means we can onboard folks, discuss feedback meaningfully and provide proper support…and still ship 😅 Working as quick as we can.

[Elyx @elyxdesign]

@jarradgrigg @MSchwaibold Thanks for the shout-out Jarrad!

[Elyx @elyxdesign]

@wolfr_2 Oklch we’ve got covered. Not there yet with colormix() but we’ll certainly consider!

[Elyx @elyxdesign]

Chris has been going deep on tokens over the past few months, and we’ve covered a lot of ground as a result.

(So far we’re supporting colors, numbers, images, and text/strings)

[Chris Downer @cjdowner]

I want to talk about tokens. In Elyx, they’re a first-class citizen.
A dedicated space to manage and edit them visually. Create aliases and control their opacity. Add contexts that let your designs adapt to themes, languages, and more.

Coming soon ~ https://t.co/Y8ltbvjH6b

[Elyx @elyxdesign]

@albertkinng @penpotapp They’re a good idea and a lot of tools have worked on them!

[Elyx @elyxdesign]

Are you asking about tokens in particular or more generally?

If it’s tokens, the main thing here is that this is what we support “so far”. We’ll expand and add support based on feedback and requests. There’s also more detail to the stuff Chris touched on (aliases, contexts, etc.)

More generally, I don’t think it’s a like-for-like comparison. We’ve got a very different philosophy and focus (local files that you own, can store with your codebase, edit with any LLM without being charged for the privilege, a different way of organising and building design systems).

[Elyx @elyxdesign]

@palis_computer @lamaandesign Sorry, I know it’s annoying. We will get to you (and everyone else) as soon as we can. But we are pacing it so we can give decent onboarding, support and discussion to feedback.

[Elyx @elyxdesign]

@briangulo_ @UltraLinx Sorry to add to the melee 😅 At least this way you’re more likely to find one that works great for you!

[Elyx @elyxdesign]

@tayler_odea It really is, but one we think will pay you back 10x in the long term!

[Marcelo Marfil @MarceloMarfil]

do you mean… like… this?

[Elyx @elyxdesign]

@MarceloMarfil

[Elyx @elyxdesign]

@plantpat11 @pendev @paper @figma @usewonder @onlookdev @createwithplay Short answer is we think they’re pretty different tools. Some people may find both useful, some may prefer one or the other, depending on the work you do. The team on Sketch are shipping great stuff still, and that will continue!

[Elyx @elyxdesign]

@plantpat11 @pendev @paper @figma @usewonder @onlookdev @createwithplay You’re on the list, right? We’ll get you in soon!

[Pieter Omvlee @pieteromvlee]

There were a few different moments that started us on our journey to building Elyx. These moments shaped what we’d go onto build. A few folks have asked about our inspiration and how it came to be, so I thought I’d write some more about it. https://t.co/tgwm2zSnnM

[Elyx @elyxdesign]

@pakashiro We’ll likely add animation features, shaders, etc. in the future but we’re not setting out to build a motion design tool specifically.

[Elyx @elyxdesign]

There's a lot to talk about with Elyx, so let’s start with a big idea that underpins pretty much everything else: Your project is the unit of design, not your document.

Elyx works best when your designs start small and build up. Individual components combine to become blocks, blocks combine to become screens. You bring screens together to form flows. Everything lives in its own file.

You can import any .elyx file into another. It makes building designs in this modular way easier and more logical. Changes you make to one .elyx file cascade to anywhere else you import them.

Over time, working like this builds a living, breathing home for your decision. Everything stays up to date, and everything stays right alongside (and in sync with) your code.

We’re just scratching the surface here, and we’ve got plenty more to share with you.

[Elyx @elyxdesign]

To be clear, we aren’t trying to replace react components (as I mentioned earlier, we use both). It’s often beneficial to explore ideas on a freeform, infinite canvas where you can think purely about designing the thing vs. building a thing at the same time or prompting your way to the exact thing in your mind. The way we’ve built Elyx makes it easy for agents to take designs and create react components from them once we’ve settled on a direction (and also keep the two in sync going forward so there’s no maintenance cost).

[Elyx @elyxdesign]

Funnily enough, we do work with react (so have both react components and elyx files). If you’re designing, you might want a freeform canvas to explore and think through ideas on, but also want what you end up designing to sit close enough to your react components that implementation (and keeping everything up to date) is a lot easier. Or you just might not be working with react!

[Elyx @elyxdesign]

You can store your .elyx files locally (and sync/version them via git) and even store them with your codebase. You’re not storing them on some server we own and charge you rent to use. They’re your files. You don’t have to use the editor to edit them even, because there’s a CLI for that too that agents can use. There’s no gated MCP server access to them. You can use any LLM you want for that (the CLI + agent skill gives them everything they need) so you’re not paying us for tokens or anything.

In terms of syncing with production code — we do that in a different way. For example, in our team, we have an agent check overnight for drift between the design and production components. And because of all the above, the agent can even open PRs to get the two back in sync (either by updating the design, or the production code)… or just flag it so we can take a look and decide how to move forward.

[Elyx @elyxdesign]

@RoyAlbeckDesign If you’re on the list we’ll get you in eventually. It will take some time, though, being totally honest. Definitely wasn’t expecting such a response!