5

Currently my team (a product team) designs mockups of UI impovements and enhancements using screenshots painfully stitched together. We then pass them off to the technology team who tries to replicate them in their development tools.
It's a slow and iterative process because their replications are never the designs we create (and we always want the color to be slightly different, or the shape, position, etc).

Are there simpler ways of doing this, where, we create a basic front end and let them plug it into the back end?

  • Feels kinda like a DevOps.SE question... – user79161 May 23 at 19:54
  • I'm new here and wasn't aware that's an option, if you point me to the right direction I'll repost when I'm ready! – wizlog May 23 at 21:43
  • @user79161 I thought that DevOps deals with more the development and deployment of software, and that there is often a gap between the handover of design into development (less so these days because of 'full stack developers and designers'). – Michael Lai Jun 5 at 2:59
2

Good wireframing tools like Axure or Figma give you the option to export HTML/CSS code. (Seemingly Sketch too, but I haven't used it)

Of course it's still work and you can't just simply copy paste it, but it's significantly less work than your current way. Your devs can find the needed properties quickly and precisely, instead of having to guess or extract them from screenshots.


Here are some helpful links with examples:

Figma

Figma - Developer Handoff

I think Figma really does the best job at this (in natural form, without any extra extensions), as they give you the option for iOS and Android too.

enter image description here

Axure

Axure - Viewing and Sharing the HTML Output
- this is basically just the generated prototype HTML.
A newer introduced feature in their cloud based product seems to be actually tailored for dev handoff: New in Axure Cloud: Inspect Your Designs

enter image description here

Sketch

And I found this for Sketch too:
How to handoff Sketch Artboards and assets to developers — no matter their OS:

If you want developers to open your file, store it in cloud, and still be able to download the original Sketch file (in the Sketch format) — Avocode is the way.

2

I wholeheartedly agree with Michael Lai's comment: while there might be great tools that you could experiment with, it's at least as important to review your processes and team composition.

Alas, I doubt that this is an endeavor that could be tackled in a discussion thread here…

P.S.: Since there are some tool suggestions in this thread already, I'll add Abstract to this list. It provides git-like version control for designers with excellent inspection and commenting features for reviewing designs within a team, and for handing it off to devs.

Our UX team's entire wireframing/comping process is built around Sketch and Abstract, and it works really well.

The company behind Abstract also offers online seminars about how to use that platform effectively, which helps with aligning your processes with the tool.

Unfortunately, it currently only supports Sketch…

2

Although I create HTML/CSS prototypes for testing purposes, I do not ask the Dev team to recycle that code mainly because they have their own standards in terms of naming conventions and code maintenance. Sketch, Invision or Adobe XD are based on contemporary CSS properties, meaning mockups created with these tools should be easy to convert to CSS. For visual design Dev hand-off, Inspect mode on Invision is how we do it.

1

Something that has helped my process a lot is to bring the developers in earlier - discuss constraints upfront, or if there are no constraints, expectations, and have them give feedback on the designs. Iterative processes are ideal, and have allowed us to test out designs (or portions of designs) at every opportunity.

1

Seems like you need a tool like UXPin or Axure where you can create interactions and generate code for handing off to the developers. What do you mean by "create a basic front end"? Do you mean the UI and design team creates a UI framework and library which the developers can use? I think a commercial tool would be helpful in bridging the gap between design and code, unless your design team has members who can do front-end code.

  • HI @Ling Thank you for your helpful answer! By Create a basic front end, I meant create wireframe mockups which developers can actually use without needing to recreate the exact same mockup and then connect it to the backend (and the rest of the application). Our Company has internal UI Design Frameworks (which are incomplete) but there aren't ways for us to use them in a mockup and for the developer to recycle in their code. – wizlog May 23 at 21:31
1

Consider the three different elements involved in collaborating with another team:

  1. Process - is there a well defined process that allows you to understand how each deliverable is produced and therefore you can work out the logic in an unambiguous manner?
  2. Communication - are there well established communication channels that allow you to provide feedback and communicate in both directions easily?
  3. People - do you have people with the right skillsets and attitude for the type of work that needs to be done? Are there gaps in knowledge or skills that prevent you from being able to collaborate effectively?

Design systems is one way to streamline the process aspects of the design/develop workflow, as it establishes rules for how the design and implementation processes should take place and puts all the resources and assets in a central location, thus removing the need to communicate at a very effective level.

Collaboration tools allow communication across teams to happen more effectively (e.g. Invision, Slack) but can also add to the overhead of the time and effort spent on the project.

Having the right people in the design and development team (i.e. designers that understand front-end and developers that know about UX design) helps to bridge the gap in knowledge and understanding required to create a smooth workflow from the handover of design to implementation.

I think you will need to address each of those aspects to ensure that designers can work effectively with developers, as it is not simply a matter of bringing in tools or processes or people but aligning all three for the projects that you work on.

1

Apart from Figma, Sketch and Axure, I would also recommend the two following (equivalent) tools:

  1. Avocode: it can be integrated with almost any design software and gives more detailed handoff compared to the design softwares alone. Plus it has a commenting feature and design versioning. I was able to introduce it in my team (they used photoshop only for handoff, a nightmare) and it has significantly improved the workflow.

enter image description here

  1. Zeplin: same as Avocode but it's for Mac only.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.