Prototypes are an essential artifact in the design process.

They help visualize how the final product will look like and validate decisions before they get implemented.

Most Lefty Ventures’ projects are web applications made with Ruby on Rails or static Jamstack websites. For both, we’ve always been creating prototypes using Figma until Netlify launched its Collaborative Deploy Previews.

Although I still love using Figma for many design tasks, those new Netlify tools gave me an idea: using Jamstack as a prototyping platform. Here's how I'm doing it:

#1. I create a repository on Github named like this: projectname-prototype. Next, I start a Jekyll project with Bootstrap, an icon library, and some custom config files.

#2. I use Jekyll’s Collection feature to create some “application resources” with placeholder content. For example, a _users directory with files like john-doe.md with attributes written as front matter.

#3. With basic content in place, I start creating wireframes. To do that, I combine the most flexible tool with the most accurate one I have: pen on paper and code. I sketch some interfaces on paper first, and then I wireframe the most promising ones using default Bootstrap components.

#4. After I have some interfaces in place, I start playing with styles. Bootstrap is very flexible, so customizing the overall appearance (matching brand guidelines) is simple. The advantage is I can experiment with different styles and see the results in every interface by just manipulation a few lines of SASS/CSS.

#5. Next, I use interface buttons and links to simulate user flows and interaction. This avoids duplicating artboards and saves time from trying to emulate basic input behavior with a bunch of Figma layers and components.

#6. When I have a basic version, I open a pull request, which triggers Netlify Collaborative Deploy Previews allowing others to leave notes and comments (as they would inside Figma).

Three lessons I learned after using this approach for some time now:

• Creating interactive prototypes becomes faster. Although some kinds of interfaces are more difficult to create using code than dragging vectors, it pays off because the final artifact is interactive and much closer to the final product (especially on web apps);
• Handoffs are better. Developers can copy and paste style files, and because the feedback happens within Netlify and GH environments, the workflow and communication are easier.
• Not every prototype or project situation is a good fit for that approach. As always, it depends on evaluating the design challenges and choosing the best tool for the job.