Redlining in UX Design

Redlining Designs

Redlining (or Redline) is marking up a UI design hand-offs by adding red lines indicating spacing and sizing of design elements. Redlining is done to communicate fine details of the design to development team or other team members who don’t have direct access to the source design files.

Redlining UX design deliverable comes in various forms. Redlines can be annotated static images (most commonly mocks or comps), or interactive documents.

Redline example from Sketch Measure plugin
Interactive redline example generated by Sketch Measure plugin

Historically redlining was used in architectural drawings for editorial notes and revisions.

UX Redlining Tools

Practically any modern UX design app supports redlining through plugins.

Figma Redlines Plugin
Figma Redlines Plugin

Here are some popular UX redlining tools:

It is worth mentioning that many modern design tools have other hand-off features that are similar to redlining or completely replace the need to redline the documents. You can find a comprehensive list of design tools and see which ones have redlining and other hand-off features at UX tools website:

UXTools: list of UX Design tools with hand-off/redlining features
List of UX Design tools with hand-off/redlining features

Remember that redlining is just one aspect of a successful hand off. I highly recommend taking a look at A Guide to Successful Design Handoffs by Mohammed Bilal for a comprehensive overview.