Building a library of beautiful, reusable components is great—but if teams can’t easily work with them, what’s the point? Knapsack’s new prototyping and composition features make it quick and easy to build, test, and refine digital experiences using pre-approved, production-ready components. Combined with our new consumer user role, Knapsack lets organizations empower more people to use what your design system already has. In this webinar, we'll see how Knapsack is making prototyping easier, faster, and more impactful!
Additional Resources
Blog | Knapsack’s Consumer Role: A Smarter Way to Scale Digital Production
Blog | The New Role of Composition and Prototyping in Digital Production
Transcript
Andrew Rohman [00:00:12]:
Thanks for joining. We are recording this, so if you're catching this on the recording, if they didn't cut the banter. Hi, thanks for watching.
All right, we go ahead and get started.
Well, thank you all for joining us today. Excited to get into an update about product, and this is an exciting time. I'm going to share some of what we've been working on and demo some of our latest features, but also provide a little context of how that fits into some of the grand plans and things we're working on. I don't know if you all noticed, but there's a lot going on in the world of digital production and how teams can make stuff. Two little letters flying around everywhere, which we'll. We'll get to a little bit here in the end. But I'm going to bake it in, you know, what's. What's in the product today first.
So I'm Andrew. I lead strategy at Knapsack. That's a lot of things, but a lot of it has to do with our customer experience and how folks get value out of this product, how we lead them to that value. So I'm excited to share some of this.
Andrew Rohman [00:01:00]:
Today I'm joined by one of our newer team members, Mr. Robin Cannon. Say hello, Robin.
Robin Cannon [00:01:05]:
Hi, everybody. It's nice to see you all. Yeah, by newer, I mean I just hit a month with Knapsack. I come to Knapsack having actually worked and collaborated with the company for a while, but previously I was the lead for the JP Morgan Salt design system and prior to that for IBM Carbon's Design design system. So I've been in and around the space for a long time. I'm really excited to be engaging with Knapsack on a. On a deeper level now, though.
Andrew Rohman [00:01:35]:
Not as excited as we are, sir.
All right, let's get to the topics of the day. So this is all about our prototyping functionality, but lots is changing. Lots of stuff is changing in how we build products. As especially as large, complex organizations, we're seeing opportunities for folks to do things they couldn't previously do, like, you know, use cursor to generate a prototype, a functional app in seconds. And yet we're all still trying to kind of navigate how do we go from what we do as humans to what we might do with robots. Is that approved yet?
And so we see this as a journey that the industry's on. And the concept of prototyping in Knapsack is a really clear step in our platform of how we sort of enable that way of working. And so it's rooted in some of the fundamental concepts that have been true in Knapsack all along. And I don't see changing anytime soon. So we want to bring you through and anchor in that, you know, how is what's new to Knapsack really this, you know, intrinsic to the core of Knapsack and, you know, how is that ultimately going to be leading into this AI driven future that I think we're all thinking about, sweating about, wondering about. So to get into that core idea, Knapsack has always been about how do we give you a space to pull in source assets, mo mostly designing code to create this central source of truth, the system of record, and then use that to create experiences that are valuable for your users. You know, at our earliest inception, that experience you created was essentially a great doc site, right? It was dynamic. There's playgrounds where you can do more than understand specs, but get hands on, understand the differences between design and code. And that's still a big core of what we do now with prototyping and with what a lot of the things we'll be working on moving forward.
Andrew Rohman [00:03:17]:
You know, it's about not only like having the system of record, but what can you do once you have it and what more can you create? And prototyping in Knapsack is one of the first examples of us going from, you know, essentially a way of enabling people to work elsewhere and hope that we enable them to work within the system. I hope they read the docs so you know, we can check at handoff. Did, did we use the right thing? But we're starting to move into a world where we're actually creating within those constraints, the valuable constraints, the parameters of our system that we've said, hey, we think if we work within these, we can go really far, really fast. For a lot of common use cases, this is a foray into not just hoping people do the right thing elsewhere, but actually working within those constraints and parameters to deliver end user experiences. And so we're going to talk a little more about how that's going to evolve over time. But this core system of record, if you're not familiar already, that's the core idea of Knapsack, right? As it is, we can connect dynamically to figma, to your code, resources and git. We can build things like side by side comparisons of how things are implemented, understand status across the whole organization, even look at tools to align data. How are the properties of things in FIGMA set up to the properties of things in Code and all of this, it does help with that human level enablement.
Andrew Rohman [00:04:27]:
Right. We have everyone's keys, everyone's pockets emptied onto the same table. We can all see what each other are looking at, solve for a lot of those human problems of. Well, I thought it was this and you thought it was. That's core to some of the great value we deliver today. But it's only scratching the surface of the opportunity. Once we have this system of record. Right.
Andrew Rohman [00:04:47]:
Referencing it to hopefully do the right thing in an infinite canvas is better than not. But we think there's an opportunity to again work within these parameters, within that system of record. And that's what this journey and some of these new features really represent is that ability to, as Robin said, and we'll talk about in a month a little more to democratize creation. Right. If. If where everyone is working is really, really close to what we're shipping and has these tools that allow us to build with prototypes like we'll show today, or manage your brand in a way that's connected to delivery. Right. What we've started doing is not having a reference that we hope we're checking our work against, but can move that work closer to delivery and happen within the construct of those parameters, whether that be a real browser and code, the structure of your implemented production components that are accessible, the structure of your theme, the structure of your content.
Andrew Rohman [00:05:40]:
There's a lot we can do by, you know, allowing people to work closer to code. And so that's. That's what this is all about. Right. And some teams, this is a new role. Sometimes it's your product managers, your designers, your copywriters, your, your data analysts, but enabling teams to make things that are within the brand and compliance, you know, constraints that are actually going to be shippable. We're not going to have to worry about where the fold is or. I didn't think that I would.
Andrew Rohman [00:06:01]:
CTA would be there. Right. We're. We're also not worried about your proficiency in FIGMA or your proficiency in VS Code. Right. Because a lot of the tools that are, in which you're using the system are actually providing those sort of guardrails in a, in a really powerful way. Robin, anything you'd add before I dive into the tool?
Robin Cannon [00:06:21]:
Yeah, briefly. I remember years ago when I was at IBM and I was in IBM design and people always used to talk about you're a designer and everybody's a designer. Which was great from an IBM design perspective and sometimes pissed off some of the developers more than I think was otherwise expected. However, everybody is or can be a creator. And I think that that's the exciting thing about where Knapsack is moving, where the industry is moving, where everybody is going to have to move, where we all have a way of contributing that can lead to an output. And I find that a very exciting space to be in.
Andrew Rohman [00:07:05]:
Yeah, I think, you know, you make me think of one thing that's, I think important here in terms of breaking down silos, is we're kind of reducing the number of artifacts. Right. There's this challenge with the waterfall approach where the artifact coming out of design for many, many of us have dealt with for three decades, the fact that everyone thinks, many stakeholders may have thought the artifact coming out of design is what the end thing will be, right? And it's not. It's an. It's informing the later stages. And when we start to break down those silos, everybody gets to work on the same sort of artifact. We sort of work on the same medium. Right.
Andrew Rohman [00:07:38]:
And, you know, the way this is showing up, I think, in Knapsack and Cursor and generative AI tools, is we're getting to 90 or 95% really, really fast. And now that creative execution, that problem solving is starting to fit into the pieces where it's most merited. But this all represents a whole big change to how we work, to human behavior, to tooling. And so, you know, we. We don't have all that yet. We're going to show you how much we have here in the coming weeks as we get more and more into the vision. But we do have some fundamental pieces that allow us to get started in that way of working. And, you know, for anyone using Knapsack today, this is.
Andrew Rohman [00:08:10]:
This is layering on capabilities, right? You have the system of record. How do we do more with it, really what this is all about. So I'm here in our demo workspace, and I want to get into sort of the fundamentals of how prototyping works just real quick first. So for anyone who doesn't understand or hasn't isn't familiar with Knapsack, you know, we have this platform where we can pull in design, encode sources and assign them to a component, an element of our UI element in our library. In this case, you see a button, we have multiple implementations, a react, a web component, a figma. All of these come with different documentation aspects we've talked about for a long time. The ability to reference here all the variations in figma, all the props here. I can have playgrounds in REACT and web components, I can build comparisons but actually bubbling up and looking at this from kind of an inventory standpoint is kind of helpful.
Andrew Rohman [00:09:00]:
I can say here's all the stuff in my system and whether it exists in figma and or code we can see how the properties exist, what data it takes. This is kind of the point the system of record that knows everything about how all the elements are made. And then what we can do with prototyping is we can use them to construct higher and higher order experiences, features, patterns, pages, you name it. And so I'm going to pop into prototyping here this other section of Knapsack and let's start just from scratch. So I'm not going to use a template, I'm going to make a prototype from scratch. You'll see I can different frameworks that are whatever your implementation has. We support a variety of different frameworks. We can work again within those production components.
Andrew Rohman [00:09:40]:
I can choose other templates or prototypes to start from. I'm going to start blank here and we're going to do a little card grid exploration. We're going to keep this simple. So it's not as focused on a full page yet. I'm going to come back to that. But I want to show the basics if I'm going to go mess around with how might this section of my travel site or app look. I now have this canvas to work in that is not unbound, it is intentionally, it is bound, it is structured and so I can go, let's start. Oh, I do that.
Andrew Rohman [00:10:09]:
Let's pop in. I know I'm going to end up making this in a section of a page that's using a grid. So I'm going to add a grid. I've got my grid component. You'll see there's some example components in here. I don't actually want to use those. I'm going to go swap one of these out for some other pre built examples we have. These are all the the saved variations of components made using your production code.
Andrew Rohman [00:10:29]:
Maybe I'll change all those to the action just to really quickly but then what I'm going to do is start, you know, maybe I want to customize some content. So do do those, those three look the same now but I can go in and I got some different images earlier from of our our friendly neighborhood Toby the Bear, named after to Tobias Dantzig, the creator of the Knapsack problem, in case you're curious. And so I can go pop some of these in. Oh, don't need the button yet. Let's upload some other ones. Keep all the. The friendly ones. And so you get the point of what I'm doing here.
Andrew Rohman [00:11:02]:
I can actually work within the real system. And I'll show you in a second. All I'm doing is I'm playing developer right now. I am implementing things in code. Did I do the same one twice? No. There we go. Awesome. You know, I go a little further.
Andrew Rohman [00:11:14]:
Let's say there's. There's two CTAs in the second one. You know, I have not just the structure of my system, but I'm gonna go add primary button. That's ridiculous. Let's. Let's actually remove that and make it a duplicate so I can work within the real system. You know, this should probably be outlined so I can't break these, can't add new props to my components. I do have the ability to work within, in this case, the web.
Andrew Rohman [00:11:36]:
I know how the web works. So I can say, you know what, where these two buttons are, that doesn't look right. Let me go apply some styling. Let's give those a spacing gap. I've got all my tokens accessible. Maybe a medium spacing gap. Looks awesome. I could also choose to lay them out vertically if I chose.
Andrew Rohman [00:11:51]:
And this isn't because this is a feature I added or something to a component or something I just dragged around. This is happening because. Save this. If I go look at the code and everything I just did is in code. If you're not a developer, imagine a bulleted list, right? I've got a component for a grid, and then I've got a card that has a title, a description, an image, right? And now down here, I put two buttons in and the web is a. Is a structure. We know how HTML, CSS and web browsers work. So we can allow for this little bit of flex, this creativity outside the system.
Andrew Rohman [00:12:22]:
That said, hey, just wrap these in a div. Apply some styling. Again, if you're not a dev, every developer, you know, would look at this and understand what's going on. So we're not, we're not creating gibberish hopeful CSS out of, you know, vector assets. This is in the medium. This is in. In the medium of destination. And can all of our themes we can apply here as well.
Andrew Rohman [00:12:40]:
So what's that look like in a compact view? What does that look like in dark mode? Let me. Maybe if I want to open this up because I have to share this with a stakeholder or I want to run it through a Contrast check, a usability test. I want to inspect this and see if the data attributes are being applied properly. All of that is possible. Where are the break points? How's that going to look? All this is possible because I'm working in the medium of destination with my production components and trust me, I'm a philosophy. I have a philosophy degree and spent most of my career in sales. So I'm definitely not a Figma user or a VS code user. And I can start to construct something, right? And even if it's not the final thing, it's about how do we get to that 90% of the features of the UI of the page, of the app.
Andrew Rohman [00:13:21]:
And doing that really, really easily, whether to expedite production or just to inform the scope of production. Help me understand what I actually need to work on. Not the images. The images are perfect. It's not always a perfect, you know, you're not always working on a feature, you're not always starting from scratch. So good to go back and let's look at what we can do. He's so cute. Something a little bigger.
Andrew Rohman [00:13:40]:
We've got, you know, pages and so a common scenario run into especially for teams that support a lot of, you know, anything in the marketing sphere. Anything where there's a lot of highly templatized content, you know, 80, 90 plus percent coverage. It was still a lot of workflows that go through comp design using the library in Figma to get the PDF to get reviewed by the stakeholder. Whereas we envision a bit of a different way of working where we can say hey, here we could ship this today, let's work backwards and figure out what you really want to work on. Right. Again, same idea I can drill into in this case give it to the marketing owner, drill in, add my content to the cards. Show you the same example to not break brains. Right.
Andrew Rohman [00:14:17]:
Apply themes. We can even apply themes at a, at a subsection level. Or I could apply, you know, just make these cards if I really wanted to do this, I could make those cards dark mode. I broke it, so I got to reset that. So I have the ability to apply themes to apply spacing styling controls at individual levels. Apply this, you know, CD overall approach. I can actually even make new themes on the fly. Earlier I made a new knapsack theme just by creating a new, a new mode to our collection of variables.
Andrew Rohman [00:14:48]:
Right. And I can see that. So again, getting to that point where we have something in code in, in medium of destination to review. Great for full page examples like this, we also see it a lot with email, right? Email is often like an unsung hero or an unrealized opportunity, probably is a better way to say it of design systems. Highly templatized, very simple experiences, very brand experience, centric, structured content, high production volume, often not systematized at all. And so that's something we often do with teams is say, hey, leverage something like handlebars. You can now do all these things you were doing for your other apps with React and with web components, you can do that for email as well. You can share the same styles.
Andrew Rohman [00:15:28]:
In this case, we've built out a little more of a dedicated template for, you know, header content footer where these different components go. And this allows us a starting point where we can easily work to swap out content and images and again, have something that is highly shippable, that we can get the code into an email delivery platform. And that allows us to take advantage of the idea of a system, right? And again, work within those constraints to either produce the end artifact, like in this case, or just, you know, triage and figure out what do we really need to make or modify in order to get our experience out the door. So we are discovering a lot of new use cases for this every day. I mentioned data analytics. That's one that weren't necessarily thinking about, but teams being able to build testing patterns for testing, the ability to aggregate design and code across different code libraries in a single place, create analogous UIs, pass those through testing, and not need to ask a developer to do any of that for us. So much opportunity when we can create again, an experience, an end artifact that we can democratize the work on and ultimately know is, you know, this far away from what's going to ship. Very, very minimal.
Andrew Rohman [00:16:33]:
Which, you know, we think about the pain we've had in digital production for years and handoff and qa. It's about confronting the expectation gap that existed for too long because we were working way before the medium that a user was going to work in. And all that work of translating it and handing it off and communicating intention, you know, definition is tricky because we're humans and there's a lot of us working on it, right? So you get to the end and we didn't consider something or we didn't realize or code and design are different. That's what this is about. Those pains that we've all been dealing with for decades, really trying to pull those out of the process with a modern way of working. We have a little context that we can share. Around. Okay, so I can prototype with my components.
Andrew Rohman [00:17:14]:
Robin said AI earlier. What are we doing about the AI driven feature? So I do want to take some time to get into that. But before we shift back over to that Robin, anything else you'd add on my waxing poetic while demoing here?
Robin Cannon [00:17:28]:
I think this is one of those things where not just for practitioners, it's easier to explain the value of the work when you can show something like this, whether it's to a stakeholder or a product manager or a copywriter or whoever. So that you can say, look, we have this system of record. Great. What's the point of the system of record? Here is the point of the system of record. It lets us start putting together things quickly but also accurately that are a reflection of brand values, design system structures, compliant work that can then be refined upon. The idea is not. It's a prototype, it is not a final product. But it gets us so much further, so much faster than doing this on an artifact by artifact basis.
Andrew Rohman [00:18:23]:
Yeah, my favorite comment was from a design director at a large media company saying, I'm excited for my product managers to use this to descope the prd. Basically because we're going to whittle down and say, I know I have some initial gut calls at least on where we're going to draw the line of where there's high effort, where there's return on high effort work. We could redo the whole thing if we want, but I have a really acute awareness of exactly what we can do with what we have, which allows me to guide this ship a little better versus getting through every gate and then trying to figure out which things we used and did they change and is it this? You know, and so there's behavior change with all this, which mind you is probably the harder part of any tooling shift. But the opportunity is massive. Right. Especially for those highly system covered experiences. You're getting a 10% faster delivery on something that's 80% made with the system is used to sound good and now it's starting to sound a little crazy. It feels like we can do it a little better.
Andrew Rohman [00:19:18]:
So. So this is where we're going to pause that for today. We're going to come back and, and show some more things here before too long. But I do want to talk, dig into something Robin just said a second ago, which is, you know, talked a couple times about this isn't the end product maybe yet. You know, we're also, we're focused on human agents, if you will, first and foremost because the AI thing's exciting, but for a lot of our customers, most of our customers, we're still trying to deliver what we signed up for today and yesterday, and some of us have a backlog. And so there's a lot of work to be done in the way we work today while we figure out the future. So this is where we're working on that path to continuity. Right.
Andrew Rohman [00:19:55]:
Helping teams make that shift. Right. I'm trying to get really good at using the system of record to enable humans today. We want to make it really, really easy to start to shift. Even if you're using prototyping, how does that become an increasingly efficient workflow as your companies start to find more comfort in adopting AI LLMs? And so we're back to Toby. Toby's on that journey. Right. And this is a.
Andrew Rohman [00:20:18]:
A journey of continuity for us, and it goes back to that core concept. Have Knapsack connect your source assets, make powerful experiences. What we're making is changing. Some of how we pull in the stuff is changing. But, you know, hopefully you can see through this. What I did through a ui, clicking buttons is based on structure and assets that are gold for generative AI. Right. It's really nice that you can feed a component library to cursor, but getting it to work within all of the constraints of your brand and regulatory environment and have that control point to continue to affect how things get generated in a more deterministic way and understand why those determinations were made by the AI and the LLMs.
Andrew Rohman [00:20:59]:
That's all part and parcel of this, right? We got to get through the human gate, but under the hood is everything we need to enable that type of interaction. So while today this journey into more powerful creation tools is prototyping composition through our ui, you can expect to see a lot more of this being enabled through things like API interactions, through things like an MCP server, and more support of those workflows. Right. If we're able to get to 90, 95% really quickly of the experience, there's a whole new way of working around. How do we just work in that 5, 10%? How do we enable that type of fast iteration in the medium of destination? And then ultimately, how do we ship from there? How do we not just create a really good prototype, but actually deliver? So there's a lot more that we can unpack here around what are we working on and towards and when? But this is the crux of it, right? We see this as a journey of continuity from. I got good at understanding the things I Need and I can reuse to. We make building things through reuse of them and iterating on them very simple and very modernized. I think I was supposed to let the product guy talk to the product.
Andrew Rohman [00:22:04]:
It's only a month in, so I.
Robin Cannon [00:22:07]:
But a few additional thoughts around that. One is there's a reason why we draw a distinction between component libraries and design systems. A lot of it is that design system understanding of broader patterns, understanding of the business context, understanding of the brand guidelines, of regulatory environment, of how we pursue accessibility. So that just like if you take any person, just takes a bunch of components and puts them together, you can take very good components, put them together into a really, really bad experience. And I'm sure we've all seen that if you have somebody who is referring to a comprehensive design system with effective guidance, not just the tools and the pieces you need, but also the overall environment, then you can get high quality work. And there's no reason why that human capacity can't be taken by AI agents as well. And I think that that's one of the ways in which I kind of think of the AI move is that it's, it's doing things that humans can also do. It's not like something new, it's just a way of automating to a greater, perhaps a greater degree of creativity than we've thought of before.
Robin Cannon [00:23:25]:
But that moves us just faster to that prototyping and that high quality prototype stage. What it also means is they will just be able to do really bad work quicker if they don't have themselves that source of truth, that system of record, that, that high quality system with the broader context that they can refer to, just like a human would be able to refer to. And so that part of it is always going to be vital because otherwise all you're going to do is accelerate bad or siloed or out of context work. Whereas the opportunity here is to move faster to something that is genuinely high quality so that we can really as humans focus on taking something from good and that last 10% to something genuinely excellent.
Andrew Rohman [00:24:18]:
I don't know, Robin, I was told that design systems kill creativity. So that sounds, it sounds like a lead. So that's that, that's what we're working on. There's a lot we are excited to share. Well, that's what we've actually been working on and you can now all use and I haven't gotten into this, but there's a lot of, you know, as with everything we do, sort of enterprise Enos baked in we actually just rolled out a new role as part of this, what we call a consumer role, which is someone who traditionally was likely a viewer of your website. They could read only access of your knapsack workspace. You can now enable them to actually build experiences as well using prototyping, all to start to unlock that democratization, that ability to go further, faster. We're excited to hear more and more use cases of how teams are starting to use this experiment with it in their workflows.
Andrew Rohman [00:25:07]:
I'm gonna, oh, I got a heart, it's fine. I like that. I'm gonna open it up to some questions. So what technologies do we support? So I, I'm get back into here. So our prototyping today is focused on a lot of the web languages that we support, which are react vue, web components, handlebars, angular, I think. So we, you know, a lot of this is about how do we centralize everything and allow you to also create that, you know, ability to see how analogous experiences are created across those frameworks. So that can be really powerful and also a bit future proofing. As teams adopt new frameworks, we can add those in as you build out your new versions of components and new frameworks, alternate frameworks, we can just sort of layer into this and make sure that we're, you know, supporting this way of working regardless of what the current or future tech that you use is.
Andrew Rohman [00:25:59]:
A question about roles, the difference between a contributor and a creator. More of a philosophy or there will be features that differ. Yeah, so we have four different roles essentially in Knapsack, the admin has all power to, you know, control everyone's permissions, control workspace level settings, delete things, publish changes. Contributors who are similar with a little bit less power, they can, they can propose changes to be reviewed and published, but they can't actually hit the publish button. They can't make other people admins. But beyond that, for a long time it's been basically a viewer or a public site visitor. It's kind of anonymous. We now have what we call a consumer.
Andrew Rohman [00:26:38]:
And the consumer is a functionally different role here. You'll see this is me as a contributor where I have all this edit capability. I can add new content blocks, I can do all kinds of work in here. But if I, I'll show you guys beneath the hood I have, I can go set my role. It's an appsec user to consumer. And if I do that now, you see, I can't edit anything here. I have fewer options. I don't have that inventory.
Andrew Rohman [00:27:05]:
I can't go change all my tokens, all my sources, but I can go into prototype and I could go in and do the same workflow there where I wanted. I can create new prototypes and so allowing those that have traditionally been referencing the system to actually make with the system is what the consumer role can do today. And we're continuing to look at new workflows and organization techniques to to make that even more robust at scale as we see teams leaning more and more into it. Good call it. Kim also added some note there are more information around pricing, roles, permissions and there's even a PDF you can download on our Our Plans page. So if you're curious around what roles can do what, definitely check it out there also a lot more info on our site and different examples around prototyping. So please check us out and as always can reach out to us at hello AppSec Cloud or directly on LinkedIn Andrew Knapsack Cloud. We're always eager to answer questions and chat further with you all.
Robin Cannon [00:27:59]:
Thanks everyone.
Andrew Rohman [00:28:00]:
Appreciate your time. Have a great day. We'll see you at config. That's right.
