How It Works
MixFrame lets you build editable, sharable mock-ups using elements from your site’s living style guide, eliminating the hassle of keeping live code, prototypes and design comps in sync.
MixFrame uses live code and living style guide components, so mock-ups automatically update as your style guide evolves. Change the color of buttons on your site, and every button in every mockup will reflect the change.
Instead of a constant back-and-forth with flat images, developers can maintain a strict system of design patterns while collaborators use these building blocks to assemble their own pages.
And because it’s all within the web browser, the layouts you build are interactive and responsive.
Getting started with MixFrame is easy…
Requirements
You’ll need a living style guide. (Not sure what that is? Learn more here or check out GitHub’s Living Style Guide for an example.)
1. Install
Place a reference to our script in your style guide, right before the </body> tag:
<script src="http://www.mixfra.me/mf.js"></script>
2. Add Components
Add the MixFrame attribute to each individual component in your style guide. This tells MixFrame what name to display for that element.
Example:
<div data-mf-name="Product Tile">
...
</div>
3. You’re done!
- Open your style guide in Chrome and start building mockups.
- Show your teammates. They’ll be impressed, we promise.
- Learn how to organize your components into categories on the Advanced Options page.
Want to see what this does for you?
Make sure you’re using Chrome and…
