Have you ever designed a prototype, handed it off to developers, and then find that their end result doesn't match what you gave them? I've run into this problem many times over my career. It's also very rare for the prototype to match the developed solution for reasons that we're going to explore in this article.

Designers tend to be creative. They want to come up with pretty pictures, create "wow" factor, and explore possibilities with the user in mind without limitations. All of this is done before tossing the designs over the fence to developers and saying, “make it like this.”

Developers tend to be very logical. A + B = C. They want to be given a list of requirements with components, including the fonts, styles, spacing, colors, and images. Everything should be provided and spelled out so they (the developers) can focus on wiring up the components and making it dynamically driven. Although HTML and CSS are considered programming languages, implementing them often takes more of a creative approach than a straightforward and logical approach that is typical of programming languages.

How might we find a way to convert the design into code that matches the design? The developers do the best they can or just what they think is best. If the coded version doesn't match the prototype, the design team may ask them to try again since it doesn't meet their acceptance criteria.

Ultimately, there is a way to create a bridge between designers and developers by utilizing design systems. A design system is a library of visual styles and reusable components, with corresponding code, which ideally provides guidance on when and why to use each. Designers use components from an established design system to create interactive and responsive prototypes while the developers can pull the code from the design system to help convert the prototypes to a dynamic application

Now there are a few different ways that this can be done

1. Utilize an Existing Design System and Framework.
Since it's often easier to start with an established design system and add on to them as needed, below is a listing of 4 to evaluate first.
• U.S. Web Design System (USWDS) (https://designsystem.digital.gov/) U.S Digital Service (USDS) is great. Having worked with them on previous projects, they are some of the best and brightest developers I've come across. Not only do they have the rendered components to interact with, but also provide the component code and guidance explaining when to use it, when to consider something else, usability guidance and accessibility. Hint: You should model your design system based on USWDS.
• CMS Design System (https://design.cms.gov/) Center for Medicare & Medicaid Services (CMS) projects also have a design system based on the USWDS, but styled in a CMS theme with some differences in components.
• Bootstrap (https://getbootstrap.com/) Bootstrap is the most popular HTML, CSS and JavaScript framework for developing responsive, mobile-first websites.
• Fluent UI (https://developer.microsoft.com/en-us/fluentui#/resources) Fluent is Microsoft's open-source, cross-platform design system that gives designers and developers the frameworks they need to create engaging product experiences—accessibility, internationalization, and performance included.
2. Customize an Existing Design System or Combine Multiple Design Systems and Add Your Own Additional Components.
• Design systems are a great start, but I have yet to discover one system that has all of the components included for all scenarios.
• Decide which coding practices and nomenclature you're going to follow and why. Do you want to name all of your components like USDS or CMS, or would you rather create your own? I recommend looking into Block, Element, Modifier (BEM) Methology as a naming convention for classes in HTML and CSS.
• Adding additional components = cost and time, but will:
  • only require work for a few components
  • ensure components are future-proof and sustainable
  • and provide substantial added value

The good news is that most of the design systems have components broken down to a design version (XD, Sketch, Figma) and the code to implement each component (React, Vue, Angular, HTML, CSS, SCSS) that you can download from respective sites or find it available elsewhere online.

A design system should be seen as a living document. Start out with the baseline components that you rely on with previous projects and add to it as needed when coming up with your designs for your prototype.

Someone needs to code these custom components needed in the design system. Why can't it be you? It's easy for designers to add components to their design library in XD, Sketch, or Figma, and therefore it's a much smaller leap for designers to also learn how to design their components in code with HTML and CSS! Let me show you an example.

• the completed sections to be in green,
• the circle numbers replaced with checkmarks,
• the circle numbers with text, centered within each step.

As a designer, you can easily do that in XD, but if you don't know with 100% certainty if it can be coded, it shouldn't be included in the design. Can you imagine presenting something to a client, they love it, and then your developers say it can't be done? You would lose the trust of the client when presenting any future ideas.

The first thing I would do is go into the page where the design component lives. Using Chrome, right click on the component you want to modify and select Inspect

There is now a new panel on the bottom that has the HTML on the left side and the Cascading Style Sheets (CSS) on the right side. Notice the arrows on the left and point down when clicked on them to expand and show more information about each.

Whatever I select on the left, I see the styles changing on the right side. By clicking on each line and expanding where necessary, I can see what styles appear in the right side, manipulate it to see what changes, then copy and paste the styles I modified into a separate file to later include in the final CSS or SCSS in this case.

Now what I've done here requires a basic understanding of how CSS and SCSS work along with some practice. But you didn't get this far as a designer without learning how to utilize all of the features in the design programs you rely on every day, did you? It's all about taking what you know about design and using code to design your components.

Will understanding HTML and CSS be enough to create the functionality needed in the components?

We have just modified the look and feel of an existing design component using HTML and CSS, but for functionality, you'll often need to implement JavaScript and jQuery. This is a whole other world that we'll need to explore in a separate article.

The good news is that, since it requires more of a logical approach than creative, developers usually have more success wiring up JavaScript and jQuery than HTML and CSS. Also, design systems such as USDS and CMS include the scripts necessary to support the component's functionality and Bootstrap does a pretty good job at explaining the JavaScript needed along with how to modify it to support the functionality you will need for each component. With enough practice, you'll get good enough to understand what the code does and be able to use what you've learned from working examples to modify and apply to new components.

But aren't there programs available that can convert my designs into code for me?

Yes and no. There have been companies trying to come up with software to convert your designs into code, but you should use this code as a starting point. There will still be some cleanup that you will need to do before your code should be released into production. Have you ever had a document in Word and you want to export it to HTML? Yes, it works to generate HTML that can be viewed on a browser, but there is a lot of extra, unnecessary code in there that should be removed or modified.

I am always looking for ways to be more efficient in my process. Every few months or so, I conduct discovery research to learn what latest software solutions, available plugins, or existing design solutions (such as Adobe XD) have emerged as potential time-savers in converting designs to code. Two of the latest software solutions I'm currently evaluating are Exportkit.com and Animaapp.com.

Since they are capable of creating what I'll refer to as "starting point" code, these software solutions can still help you with creating a foundation for more complex code such as animations. It is still up to you to clean up the code as needed and ensure that it plays well with your existing code.

• If your developers can't seem to convert the design to code to match your mockups, the end result still reflects on you. As a designer, you are responsible for the end result of how your design is displayed on the website or application.
• When you have a design system that has all the design components for your favorite prototyping software and the code needed for developers to utilize it, you will have a more streamlined and efficient process.
• Once you learn how to convert designs into code with HTML and CSS, not only will you be able to add new components and code how they look for handing off to developers to dynamically populate, you will be able to produce more accurate, production-ready, interactive, and responsive HTML prototypes that developers can easily implement in their builds.
• When you add any new components, HTML and CSS are great for styling, but you will need to work with developers to code in the functionality (using more advanced languages like JavaScript), discuss if it's feasible and can work within the existing framework before adding it to the design system.