icon

The Bridges Between Design and Code

The problems with design-code hand-off are still manifold. I’ve been doing this for like 20 years and the process of turning visual direction into interactive applications is still fraught. Here are a few hints and principles to help you understand where this problem space has evolved lately.

  1. Use Figma, but it’s not magic. Figma is an excellent design tool that is more accessible to devs since it’s web-based and collaborative. Devs get better access to measurement tools, colors, and specific CSS values that can be forklifted into a component, but honestly that saves us 2—5 lines of code in the component implementation, so don’t get hung up on that.
  2. Don’t try to keep your static designs perfectly up to date with the work that makes it into production. Design tools are best used for creating a point-in-time snapshot. That snapshot will be attached to a story, ticket or issue in the project management tool, directing what developers should be creating. If the first implementation was sloppy and rushed because of deadlines, then put another story in the next sprint and keep circling in on that perfection until the product manager tells you to stop.
  3. Developers should not be allowed to push code to production without someone reviewing it for proper reuse of components and consistent usage of design token values instead of hard-coded colors, fonts and sizes.
  4. The designer needs to start with a systems and tokens mindset. They have to create reusable symbols that stick to a strict set of font styles, and colors. These values need to be synced with the code component theme values constantly. Also, the designer should have symbolic representations in their design tool that closely match up with the components that the developers have created.
  5. A documentation site or app for you system is nice, but quickly turns into so much useless static artifacts if it’s not tightly integrated with the code that runs in production. For this reason we use Docz to write markdown with lots of integrated live examples of everything the component API is capable of.
  6. Having a designer that knows how to write CSS and HTML is incredibly valuable. Working in the correct medium of the web is a turbo-booster in making that transition from idea to implementation.

I still operate on both sides of this line, I produce designs for one team to implement in Figma, and have to answer their questions to give specific answers about all the details that a static image can’t cover. In my experience humility and agility are key in the design role.

I also create React components based on the work of designers in another team and manage a dev team that produces components in a design system. We have to deal with all the technical aspects of packaging up a library of reusable widgets, and maintaining them. I believe Organization and communication skills are key in the engineering management role.