About this video
Paper vs Figma: why our agency is switching to Paper, a Figma alternative built for AI. We show wireframes for Yak Farm, an internal software factory, where every screen (desktop, tablet and mobile…
Full transcript
Edited transcript from the original Roboto page
I can finally talk about Paper Design. I don't know if you've seen it. It's an alternative to something like Figma. If you're used to Figma, this should feel right at home. Let me tell you why I love it and why we're trying to ditch Figma.
This is a wireframe for an upcoming project of ours. It's an internal project called Yak Farm, which is basically an internal software factory that we build for clients. The interesting thing you might want to know is that every wireframe you're looking at here has been vibe coded or agentically built. This is using the MCP, and you can see we have the desktop version, the tablet version, and the mobile version.
I want to show you what Paper Design does really well. Looking through these, the first thing I notice is that there's an especially large amount of drop shadows. I'll clear the chat first to give Claude the best chance. This comes from an earlier chat, so I'll start fresh. I'll go to the actual artboard in Paper and press Command+L, which copies the link to the clipboard. I'll go specifically to this one, press Command+L again, and say: "I'd like less stacked drop shadows near where the text entry is. It looks murky." That's the beauty of AI. You don't have to think too much about the spelling and the details.
This is the part I had a problem with. I'm not the biggest fan of the stacked drop shadows. Hopefully, and I think it does, it looks much cleaner immediately.
This is also done in different ways depending on the screen. This panel is a left-right panel on desktop. On tablet, we need to provide the best user experience, so this panel works like a window on a tablet that you swipe away. On mobile, there isn't much screen real estate, so a tabbed layout makes sense, where you can switch between the chat and the preview.
This brings more focus to the user experience and to how people will actually test their applications. In the old days, you'd spend 3 weeks on a high-fidelity wireframe, the client would see it 3 weeks later and say, "This isn't the right direction, I really want to go somewhere else," and you'd be back at the drawing board for another 3 weeks. I can see this becoming a good pattern going forward, and I thought it would be a useful look at how we've been building things for clients.
Read timestamped source captions
0:01I can finally talk about paper design. I
0:01I can finally talk about paper design. I don't know if you've seen it. It is a
0:03don't know if you've seen it. It is a
0:03don't know if you've seen it. It is a alternate to something like Figma. If
0:06alternate to something like Figma. If
0:06alternate to something like Figma. If you're used to Figma, this should feel
0:07you're used to Figma, this should feel
0:07you're used to Figma, this should feel right at home for you. Now, let me tell
0:09right at home for you. Now, let me tell
0:09right at home for you. Now, let me tell you the reason why I love it and why
0:11you the reason why I love it and why
0:11you the reason why I love it and why we're trying to ditch Figma. This is a
0:14we're trying to ditch Figma. This is a
0:14we're trying to ditch Figma. This is a wireframe for a upcoming project of
0:16wireframe for a upcoming project of
0:16wireframe for a upcoming project of ours. It's an internal project. We're
0:18ours. It's an internal project. We're
0:18ours. It's an internal project. We're calling it Yak Farm and it's basically a
0:20calling it Yak Farm and it's basically a
0:20calling it Yak Farm and it's basically a internal software factory that we build
0:23internal software factory that we build
0:23internal software factory that we build for clients. Now, the interesting thing
0:25for clients. Now, the interesting thing
0:25for clients. Now, the interesting thing that you might want to know is that
0:26that you might want to know is that
0:26that you might want to know is that every single wireframe that you're
0:28every single wireframe that you're
0:28every single wireframe that you're looking at here has been essentially
0:30looking at here has been essentially
0:30looking at here has been essentially vibe coded or agentically built.
0:34vibe coded or agentically built.
0:34vibe coded or agentically built. So, this is using the MCP and you can
0:36So, this is using the MCP and you can
0:36So, this is using the MCP and you can see that we have the desktop version,
0:39see that we have the desktop version,
0:39see that we have the desktop version, tablet version, mobile version. Now, I
0:41tablet version, mobile version. Now, I
0:42tablet version, mobile version. Now, I want to show you what paper design does
0:43want to show you what paper design does
0:43want to show you what paper design does really, really well, which is
0:45really, really well, which is
0:45really, really well, which is I'm looking through these and the first
0:46I'm looking through these and the first
0:46I'm looking through these and the first thing that I notice here is that there's
0:48thing that I notice here is that there's
0:48thing that I notice here is that there's an especially large amount of drop
0:51an especially large amount of drop
0:51an especially large amount of drop shadows. So, what I'm going to say to
0:53shadows. So, what I'm going to say to
0:53shadows. So, what I'm going to say to Claude and I'll show you this is from an
0:55Claude and I'll show you this is from an
0:55Claude and I'll show you this is from an earlier kind of chat.
0:57earlier kind of chat.
0:57earlier kind of chat. So, what I'll do is I'll start by
0:58So, what I'll do is I'll start by
0:58So, what I'll do is I'll start by clearing it to make sure it has the best
0:59clearing it to make sure it has the best
1:00clearing it to make sure it has the best chance of this. And I'll literally go to
1:01chance of this. And I'll literally go to
1:02chance of this. And I'll literally go to the to the actual paper and I'm going to
1:04the to the actual paper and I'm going to
1:04the to the actual paper and I'm going to go command L, so just link clip copy to
1:07go command L, so just link clip copy to
1:07go command L, so just link clip copy to the clipboard. I'm going to go
1:08the clipboard. I'm going to go
1:08the clipboard. I'm going to go specifically for this one, so I'm going
1:09specifically for this one, so I'm going
1:09specifically for this one, so I'm going to press command L again and I'm going
1:11to press command L again and I'm going
1:11to press command L again and I'm going to say
1:13to say
1:13to say I'd like
1:14I'd like
1:14I'd like less stacked drop shadows
1:18less stacked drop shadows
1:18less stacked drop shadows near where the text entry is. It's looks
1:23near where the text entry is. It's looks
1:23near where the text entry is. It's looks murky.
1:25murky.
1:25murky. That's the beauty of AI. You don't
1:26That's the beauty of AI. You don't
1:26That's the beauty of AI. You don't really have to think too much about the
1:28really have to think too much about the
1:28really have to think too much about the spelling and the things. So, this bit is
1:30spelling and the things. So, this bit is
1:30spelling and the things. So, this bit is what I I have the problem with. I think
1:31what I I have the problem with. I think
1:32what I I have the problem with. I think it's the stacked drop shadows that I'm
1:34it's the stacked drop shadows that I'm
1:34it's the stacked drop shadows that I'm not the biggest fan of.
1:36not the biggest fan of.
1:36not the biggest fan of. Um and so hopefully, yeah, I think that
1:38Um and so hopefully, yeah, I think that
1:38Um and so hopefully, yeah, I think that looks so much cleaner immediately.
1:41looks so much cleaner immediately.
1:41looks so much cleaner immediately. Um and again, this is done in in
1:42Um and again, this is done in in
1:42Um and again, this is done in in different ways. So, you'll notice this
1:44different ways. So, you'll notice this
1:44different ways. So, you'll notice this panel is kind of like a left-right panel
1:46panel is kind of like a left-right panel
1:46panel is kind of like a left-right panel when it's on desktop, but then when it's
1:48when it's on desktop, but then when it's
1:48when it's on desktop, but then when it's on tablet, we need to basically provide
1:50on tablet, we need to basically provide
1:50on tablet, we need to basically provide the best user experience on tablet. So,
1:52the best user experience on tablet. So,
1:52the best user experience on tablet. So, this one feels right at home if I was
1:53this one feels right at home if I was
1:53this one feels right at home if I was to, you know, swipe it away like you
1:55to, you know, swipe it away like you
1:55to, you know, swipe it away like you would do a window on a tablet. Um and
1:57would do a window on a tablet. Um and
1:57would do a window on a tablet. Um and then obviously on mobile, there's not
1:59then obviously on mobile, there's not
1:59then obviously on mobile, there's not that much screen real estate, so it
2:01that much screen real estate, so it
2:01that much screen real estate, so it makes sense to have like a tabular
2:03makes sense to have like a tabular
2:03makes sense to have like a tabular layout where you can see the chat or you
2:05layout where you can see the chat or you
2:05layout where you can see the chat or you can see the preview.
2:06can see the preview.
2:06can see the preview. And this is just, you know, one of those
2:08And this is just, you know, one of those
2:08And this is just, you know, one of those things where it brings about more focus
2:10things where it brings about more focus
2:10things where it brings about more focus around the user experience and how
2:12around the user experience and how
2:12around the user experience and how people are actually testing out their
2:13people are actually testing out their
2:13people are actually testing out their applications
2:15applications
2:15applications rather than in the old days where you
2:17rather than in the old days where you
2:17rather than in the old days where you used to do a high fidelity wireframe, it
2:18used to do a high fidelity wireframe, it
2:18used to do a high fidelity wireframe, it took you 3 weeks or whatever and then
2:20took you 3 weeks or whatever and then
2:20took you 3 weeks or whatever and then the the client would see it 3 weeks
2:21the the client would see it 3 weeks
2:21the the client would see it 3 weeks later and say, "This isn't the right
2:24later and say, "This isn't the right
2:24later and say, "This isn't the right direction I really want to go to." and
2:25direction I really want to go to." and
2:25direction I really want to go to." and then
2:26then
2:26then back to the drawing board, another 3
2:28back to the drawing board, another 3
2:28back to the drawing board, another 3 weeks, you get the idea. So,
2:30weeks, you get the idea. So,
2:30weeks, you get the idea. So, I can see this being a very good pattern
2:32I can see this being a very good pattern
2:32I can see this being a very good pattern in the future and I thought this would
2:33in the future and I thought this would
2:33in the future and I thought this would be a nice little insight to how we have
2:35be a nice little insight to how we have
2:35be a nice little insight to how we have been building things for clients.
2:38been building things for clients.
2:38been building things for clients. Hope this was interesting. Take care.
2:40Hope this was interesting. Take care.
2:40Hope this was interesting. Take care. Have a great day. Bye-bye.
Questions answered
Editorial answers from the original Roboto page.
What is Paper Design and how does it compare to Figma?
Paper Design is an alternative to tools like Figma. If you're used to Figma, it should feel right at home. We're trying to move away from Figma, and Paper Design is what we're looking at instead.
Read the original ↗What is Yak Farm?
Yak Farm is an internal project that works as a software factory we use to build software for clients. The wireframes in the video are for an upcoming Yak Farm project. Every wireframe shown was vibe coded or agentically built using the MCP.
Read the original ↗How do you change a wireframe in Paper Design?
We copy the link to the artboard with Command+L and paste it into a fresh chat with Claude. Then we describe the change in plain language, without worrying about exact spelling or details. In the example, the request was for less stacked drop shadows near the text entry because they looked murky.
Read the original ↗Why did you reduce the stacked drop shadows?
The wireframes had an especially large number of drop shadows, and the stacked ones near the text entry looked murky. I'm not a big fan of stacked shadows. After the change, the design looked much cleaner right away.
Read the original ↗How does the chat panel change across desktop, tablet, and mobile?
On desktop, the panel is a left-right layout. On tablet, it works like a window you swipe away, which gives the best user experience there. On mobile, there isn't much screen space, so a tabbed layout lets people switch between the chat and the preview.
Read the original ↗Why does building wireframes this way matter?
Traditionally, a high-fidelity wireframe could take weeks, and the client might reject the direction after seeing it, sending the team back to the start. Building working versions this way puts more focus on the user experience and on how people will actually test their applications. We think this is a good pattern going forward.
Read the original ↗