Post Image

How to Automate Your Developer Handoffs With UXPin

By Natasza Libich on 2nd October, 2017 Updated on 9th July, 2019

Constant back-and-forth between designers and developers is a pain we all know way too well. It can slow down the development process, cause frustration, and create inconsistency.

UXPin comes with features for closing that gap during handoff to developers.

Let’s explore how these features help clear roadblocks for designers and developers:

  • CSS styling
  • Documentation
  • Automatic specs
  • Automatic style guides
  • Jira integration

Use CSS to style elements

Designers need more power to customize the look of design elements while matching what’s possible in web browsers. That’s why you can completely customize element styling in them CSS.

All CSS styling applied to a layer can be later on used during development, so the code doesn’t need to be written from scratch. Elements from Sketch are imported with the CSS styling and code (and can be accessed when inspecting particular elements on preview).

Add documentation and specification

While prototyping, you also want to communicate the reasoning behind your design decisions or call out any interesting details – edge cases, failure states, design principles, or code references.

To add more information to a specific element, switch your properties panel to the “Specification” tab. You can create metadata, describe the effort required to develop the component, or even provide multiple code snippets in different programming languages. It’s a simple, straightforward way to keep your design and code together. Any metadata you add is permanently pinned to that element for later inspection by developers.

Metadata for elements

To describe general use cases and design decisions, you can use Free Flow Documentation. Just write your comment and pin it to anything imported from Sketch or created in UXPin to avoid shuffling between design and 100-page requirements documents.

Free flow documentation UXPin

Scale your work with design systems

Using Design Systems and Design System Libraries gives everyone a single language and toolkit for design patterns and code snippets. The entire team can reuse the styles and elements, instead of making every pattern from scratch.

Colors at UXPin

Once you’ve generated your system, you can add documentation, including code snippets to any element. In UXPin, documentation from the design system follows the elements in any project, so all the information is automatically populated for developers. Definitely gets rid of busy work.

Keep all the details in Jira

With our Jira integration, project managers or developers can pin prototypes straight to the Jira issue. UXPin prototypes you see in Jira (and the documentation and spec links) are always updated to the latest version.

JIRA integration with UXPin

Illustrate your requirements, provide your developers with the right design assets and keep the team updated on the work right in Jira.  

Send a single link to hand off the design

When your design is finalized and you’re ready for developer handoff, send your developers a single preview link from which they can source all the information they need through Spec Mode and Freeflow Documentation.

Developers can switch between different modes in the prototype to get information or request clarification. They can learn more about the particular solutions by opening Documentation or ask questions and leave feedback by enabling the “Comment” mode. When they’re ready to start coding, clicking on “Specification” on the top of the preview, will give them access to Spec Mode.

Spec mode access

Spec Mode by default shows a page summary that includes size, grid, used colors and typography. On the design, you can see distances to the canvas and between the elements by hovering over them.

Click any element to see its properties and specification. When checking properties, besides size and information about used colors, you can also check border and radius settings, take a look at CSS code as well as preview and download SVG version of any element you have created. All the information that you put in the editor and design system is also accessible.

Spec mode access with UXPin

Spec Mode also includes an automatically generated styleguide. It provides the developers with a birds-eye-view of all the crucial styles used in that design and download all icons and images in a single click.

Next steps

At UXPin, our goal is systematizing and centralizing the design and development process, which gives teams more time to solve bigger problems.

If you’d like to try out what you’ve seen here, go ahead and start a free trial.

Join the world's best designers who use UXPin.

Sign up for a free trial.
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