Post Image

Say Hello to Spec Mode and Our New, Improved Sketch Integration

by
Ben Gremillion
Ben Gremillion

UX designers who focus on UX are doing their job. Non-designers who express their ideas visually are trying to communicate. With UXPin, anyone can get their product ideas across with a few clicks. But it’s not enough to hand visuals over and hope for the best. Developers need collaboration too.

That’s why we’re pleased to bring you Spec Mode: a new way to get properties from elements in UXPin. No longer must developers pour over bland text documents; they can see exactly what they’re looking for and, with a click, get its colors, typography dimensions, use cases, sample code, and more.

This new tool eliminates time-consuming redlining of mockups, enabling a smoother handoff between designer and developer.

Spec mode screenshot with code snippets

Spec Mode, available for trial and enterprise users while previewing a prototype, displays the design’s major colors as hex values; dimensions and the space between them; and copy/paste the results into your code editor of choice.

When combined with UXPin prototyping, Spec Mode transforms static designs into interactive documentation. By consolidating code and design standards in one place, we create a “single source of truth” that doesn’t just show developers how a product should look — it helps them understand how the product should feel and behave. It all happens without the need for 50-page requirements documents or multiple designs to reference.

How it Works

The process is simple.

Drag-and-drop SketchApp files directly into UXPin for prototyping, or prototype with the editor. Then auto-generate design specs. Attach metadata to any element (more code snippets, use cases etc.) and never worry about them again — they’re permanently attached.

Benefits of Spec Mode include:

  • Eliminating guesswork and busywork. Designers no longer waste time annotating mockups. Developers no longer waste time hunting for elements’ properties (hex values, etc.) or assets, nor will they need to guess on placement of elements. It’s all auto-generated.
  • Development matches design. Spec Mode brings automatic clarity to designs being handed off to developers. Because metadata permanently attaches to elements, developers see everything in context — no need to switch back and forth between documentation and multiple designs.
  • Faster product development. Improved efficiency between designers and developers allows organizations to release better products more quickly.

Spec mode screenshot with red-lining.

This closes the gap between design and implementation. Organizations can now scale product development much easier than before while meeting important deadlines.

Design Systems

Spec Mode is a great way to help your team create an entire project design system. A “design system” is a collection of patterns, components, and guidelines to create unified UI. It’s a visual and interactive language that design teams use to keep their app or website on-message, easy to learn, and easy to deploy. When everyone has access to the same elements — and the same code snippets — they can quickly snap together interfaces when developing the final or beta product for live testing.

Design systems are not new, but they are growing more popular as companies embrace design as business solutions, not visual surfaces. Brad Frost’s Atomic Design principles gave us a high-profile example of thinking from the inside out with reusable components that create more flexible reusable components. And while not everyone agrees with his naming convention, designers are starting to incorporate the ideas into their work.

Take a simple search form. Better yet, take its individual HTML elements like the input field, submit button, label, and <form>…</form> tags. Each is a separate component that comprises a functional whole. Take any one of those away, and users can’t search.

Each of those vital parts can have its own CSS. That CSS applies to each submit button, input field, label, and <form> element throughout the project. When done well, designers and developers alike can reference that code from the design system documentation — and even copy/paste it into their work verbatim.

That’s where Spec Mode enters the picture. Spec Mode is a repository of code we designed specifically to create entire reusable design systems.

Adding design system tools is one of the most ambitious projects that UXPin has taken on, so we’re separating it into multiple small projects starting today, with Spec Mode.

Not a UXPin user? Don’t neglect your dev team — get a free trial to try Spec Mode for yourself.

Join the world's best designers who use UXPin.

Sign up for a free trial.
Ben Gremillion

by Ben Gremillion

Ben Gremillion is a Content Designer at UXPin. He’s worked as both a web designer and a back-end developer. On the side he builds and maintains a CMS for webcomic artists, and participates in annual NaNoWriMo challenges. Join him for biweekly UXPin webinars.

Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you