cft

How to Replicate a Design System in MS PowerPoint

Setting the foundation for interactive prototyping in MS PowerPoint


user

Jimmy Soh

3 years ago | 2 min read

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.

Upvote


user
Created by

Jimmy Soh

In perpetual beta—playing at the intersection between digital technology and business.


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles