How to Replicate a Design System in MS PowerPoint

Setting the foundation for interactive prototyping in MS PowerPoint

Jimmy Soh
Jimmy Soh
Jan 17 · 2 min read
Image for post
Image for post
Photo by Balázs Kétyi on Unsplash

MS PowerPoint is my personal tool of choice for various design work i.e. creating pitch decks, e-product launch posters, short animations, and interactive prototypes because of the three key reasons:

  1. Availability — comes pre-installed in most corporate computers, even in strict environments i.e. government, defence, and banking sectors without you having to request for approvals for software cost, etc.
  2. Flexibility — allows you to embed an interactive prototype into a pitch deck to showcase value to stakeholders
  3. Portability — allows you to send the design document to various user groups for review, feedback, and collaboration without having the users to download additional tools or learn new software

I will be using an existing UI theme (Metronic) from Keenthemes for my new pet project. There are not many design artefacts provided by Keenthemes, which means that I would have to create my own if I plan to develop screen flows to obtain user validation and feedback.

In the following, I will share the general steps to reverse engineer an existing UI theme and replicate the design system into PowerPoint (and provide a sample kit for you) to further your design and development work.

Here are the general steps:

  1. Select a UI theme to adopt — visit the live demo site of the template that you wish to adopt for your project/application
  2. Print screens with essential components — open your browser in full-screen mode and print the entire screen
  3. Trace components and create wireframes — paste the screenshot into PowerPoint and start tracing the components; download the required fonts, etc.
  4. Modify components and create variations — create reusable layouts with Slide Master and components with various design and descriptions
  5. Group components together logically — organise your components into logical groupings for ease of adjustments and management

Below is a short video I have uploaded to illustrate the steps above.

Example Walkthrough by Author

You may also find a sample of the PowerPoint file here for your reference.

This approach of replicating a design system is useful for people who wish to achieve speed to market by building solutions using an existing UI theme while seeking to ensure usability and user adoption (via validation/feedback of screen flows) in a strict/traditional corporate environment.

Thank you for reading and I hope you’ve gained something :)

The Internal Startup

For corporate intrapreneurs, businesses and technologists

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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