Goodbye pixel-pushing with a shared design-dev language, React and Styled Components

tldr; Create a shared design-development language and use React and Styled Components to avoid pushing pixels, trivial style issues and make better use of developers and designers’ time.

“Move the text 1px to the left, change its font size to 16px.”. The design-development (“design-dev”) cycle of going from mockup to product can be a rocky road. Adjusting pixels and correcting layout issues are expensive and slow down product development. With a shared design-dev language (more below), however, and using React and Styled Components, we can speed up product delivery and express the layout requirements to pixel-precision.

Design-dev cycle

For context, a brief description of the design-dev cycle is helpful. A typical product team might roughly follow the steps below during front-end development:

  1. Gather data (prototyping/early user testing).
  2. Learn from findings and formalise a design (Sketch).
  3. Share designs with developers (with collaborative tools like InVision, Zeplin).
  4. Code (React and Styled Components).
  5. Visual review.
  6. Code review.
  7. Release.

You may find yourself spending an inordinate amount of time on steps 4–5, going back and forth between design and development until finally arriving at a solution that has precisely spaced and laid out UI elements. This issue might be amplified if styles aren’t properly isolated and, as a result, updating one component’s style breaks another component’s (one of the big reasons to move to Styled Components). However, by creating a shared design-dev language, we are able to reduce time spent correcting layout and spacing.

A shared design-dev language

When designers create a visual design, there is often an order and set of rules that govern the way components are laid out on the screen. The proximity of components may reflect an information hierarchy and the spacing of UI elements might follow a systematic pattern. But without formalising these rules and patterns, we inadvertently leave designs open to inconsistencies and misinterpretation. What we need is a system or a shared design-dev language to capture the relationship between UI elements.

A shared design-dev language abstracts the typography, spacing and layout requirements and describes a visual system that both designers and developers can understand.

Take, for example, the layout of a typical list of cards:

The consistency of how we position our UI elements helps the user identify the relationship between them but also (crucially!) helps us create rules. For the example above, we might make the following observations:

  • X-Small spacing: 8px
  • Small spacing: 16px
  • Medium spacing: 24px
  • Large spacing: 36px

Rules and patterns are easy to follow. By codifying the visual language, developers can create a system in their code to precisely follow the visual rules. React and Styled Components are particularly amenable to the implementation of such a system.

Spacing and layout building blocks

Suppose we created two Styled Components:

  • Spacing
  • Layout

“Spacing” controls the spacing between elements and “Layout” lets us align our UI elements. With just two building blocks, we can fulfil a vast majority of our spacing and layout requirements. Returning to our example from before, a card can be coded as follows:

{/*  Position the card in the centre. */}
<Layout alignCenter>
{/* Card with grey border. */}
<CardOuter>
{/* Medium spacing all around. */}
<Spacing top="md" right="md" bottom="md" left="md">
<Layout row alignStart>
<Avatar />
<Spacing left="sm">
<Heading>Heading</Heading>
<Spacing top="xs">
Lorem ipsum dolor...
</Spacing>
</Spacing>
</Layout>
</Spacing>
</CardOuter>
</Layout>

By introducing the “Spacing” and “Layout” building blocks, we have successfully abstracted away from pixels. Spacing is described in terms of their relative sizes (x-small, small, medium) and layout is also defined without pixels (row, start, centre).

Spacing defined without pixels

Styled Components helps us create a more semantic and readable markup by design, and the above example illustrates how easily we can express the layout of our UI elements. The building blocks we created not only remove the need to dig through CSS to debug spacing issues but also make pixel-pushing a thing of the past.

Final thoughts

Next time a you find yourself pushing pixels, take a more systematic approach to front-end development. By putting in a small amount of effort and designing a common language upfront, we can optimise the design-dev cycle. Just as we carefully design our products to maximise the users’ experience, we should take our time to design our design-dev process.

The implementation of the “Spacing” and “Layout” building blocks are outside the scope of this article but it should be relatively straight-forward to implement with Styled Components. The building blocks can also be extended to fulfil spacing and layout requirements for different devices/breakpoints (a topic for a future article!). If you prefer a ready-made solution, the “Spacing” component we described is very similar to the “Padding” and “Margin” components that styled-components-spacing offers.

Left field thoughts on software, product and design

Recommended from Medium

CAPSTONE | User Testing for Forma

First Custom K-9 EMS Unit in the Nation, Advertising Vehicles Upgrades “Dog Mobile” for Ohio…

The Importance of Defining the Patient Journey in Decentralized Clinical Trials

There Is Only One A4 Paper Time in Your Life

5 Tips for Creating a Design System

Hybrid Narrative at Phipps

How would you set goals & success metrics for Facebook Dating?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mario Hayashi

Mario Hayashi

Product engineer, No-Coder, contractor, tech leadership at startups, indie maker.

More from Medium

Testing React Router Children with react testing Library

React — build SVG components with styled components

Getting Started with the React List View Component

Build a Product Review app with React Hooks (Part 2)