Creating Simple UI with the one and only... WPS Office! ( Step By Step UI Guide )

Greetings Developers!,

I don’t usually tend on making tutorials for UI ( nor tutorials in the first place ) as I sometimes screw stuff up and it ends up becoming very unorganized to work with.

But today I decided to post something new that I’ve never done before. I am known as a very weird person when it comes to stuff like UI, so I don’t usually use your typical UI/UIX software like Photoshop/Photopea/Illustrator/Figma etc…

I use Powerpoint and WPS Office (This dude bruh :skull: did he really just say that oh my god)

So to all the 10 people that use WPS Office, hope you learn something new ( I’ll try my best to explain everything )

Let’s start of by opening WPS Office

To anyone curious, here is the link:

Please read before continuing:
This tutorial in specific won’t show how to import the UI to Studio, I will make a separate one when I have the time to post!, Please don’t kill me, ( you can save it though )

Upon opening the application, this will pop up, click on Blank.

Since we are not doing a presentation at the moment click on Layout and then proceed by clicking Blank.

In order to start your epic UI, click on Insert-Shapes

There’s loads of shapes that you can use, but since this is a step by a step tutorial, you can do whatever you want with them!

Insert a Rounded Rectangle and Hold Ctrl whilst sizing the shape!
This is so the UI is perfectly sized!

"But what if I want my UI funky?"

Well, very simple!

By using the Edit Shape button, you can either change your shape or you can shape/strench it as you want!



Another cool feature that it has is the following:

You can rotate a shape via the size buttons!

Continuing on with the tutorial:

If you want to add UI Strokes like in RobloxStudio
you can use the Weight function!

Let’s add an Outline on our UI! ( very simple to do so )

  1. Click on your UI and press the Shape Outline button
  2. Click on the Weight button
  3. Here you can find a variety of Outline Weights ( basically how big/small you want the outline to be )
  4. ( Optional ) Click on 3pt ( 3 points )
  1. Click back on the Shape Outline button and find a color of your choice to use for a outline color! ( for the record I am picking black as it’s the main one that I use as of right now )

This is how it should look like!

I want my UI to be a different color
Very easy to do so!

By using the Shape Fill button you can change the color of any shape within a couple of seconds ( crazy right? )

You can use regular colors, or even gradients, with just one click!

Wow! now it’s a darker color!

Commencing forth, If you want to make something like this:

Or maybe something like… hmm this:

Or you know you may be feeling a little bit extra and you may like something like this:

Then lets go step by step starting with…

The basic Shadow UI thing ( basically the first image )
What you will need:

Left: Our UI that we have created
Right: A black version of our UI

From now on you’ve probably learnt how to recolor/add outlines to your UI

Step 1: Center your UI

Step 2: Take the black version and… huh?

Why is it not in the back of the UI?
Well, in order to fix that, right click the black square and press on Send to Back

Doing that will make our one UI go behind our other UI, basically creating a “shadow”
You can resize it, recolor it etc…
And there you go!

Our first UI is done…

Going on to the more “interesting one” we introduce more shapes into this!

Step 1:

( optional ) you can keep our current version that we’ve created

Insert this arrow looking shape ( someone tell me what shape this is )

Center it and add an outline to it.

This small 10 second clip shows the next step: ( so there is a diversity in the post ) ( please update me if the video works, I will fix it asap )


After you’ve centered the shape, go ahead and press on Edit Shape

Then press on Edit Points

It should look like this: A red line with black dots

Moving/Stretching one of these dots will change the look of the shape, so what we want to do is just slightly move the middle right dot just about as much as the left side looks.

Here is how it should look

Double click on the shape and type in market (or anything that you want really)

Now in order to add an exit button, go over to shapes and find these 2 shapes

You can use which ever one you want, ill show both of them!


Red version 1, Outlined ( weight 3 )

Red version 2, Outlined ( weight 3 )

And there goes the 2nd UI!

Now onto the final one, very simple! All we have to do is add another middle text in the inner Frame and add the selection boxes. To do so do the following:

  1. Insert a Text Box
  2. Insert 3 Rounded Rectangles

Step by step:

  1. How do we Insert this Text Box thing??? :face_with_raised_eyebrow:
    Glad to answer this question!

i) Go to insert

ii) Add a Text Box

Should be looking like this line:

Let’s go step by step how to do this:

When adding text, it will look like this: Bland and boring, so here is how to make it better…


Before we continue, let’s learn how to add fonts.
I highly recommend using Google Fonts, it has mostly every font you can think of

Search Fredoka One

Upon clicking on it, you will be given the option to “download family” ( meaning that you will be able to download every version of fredoka one )

Click on it
A zip file should appear, notifying you that you have downloaded the font.

Clicking this file will direct you to the download area.

Click on Install, and the font will be put in the WPS Office Font selection
( You may need to save your UI in order for them to show up )
( You also may need to save them as Presentations, which you can later turn into PNGs but that is for another tutorial )

Now onto the tutorial again:
How to add the font to the text:

Select your text

Right Click

There are alot of useful features here but the ones you’ll be using most when making UI in WPS Office are the ones not crossed

This let’s you know what font you’re using and how big/small the text is


  1. Make your text bold 2) Curve the text 3) Underline it 4) Mark it

This let’s you change the text’s position

So now that you know the features…

Center you text in the middle

Increase it’s size to 24

And lastly, change it’s color to white, add an outline color of black, and change it’s weight to 1

1st part of the last UI is now complete, let’s go on to the final step which is to add 3 Rectangles
At this point you should know how to do this, so let’s go ahead and finish this, shall we?

Go to insert, add a rounded rectangle, change it’s color to a dark blue, add an outline of black with a weight of 1.5 ( repeat this 3 times or just CTRL+D to duplicate )

And there we go!!! You can now say that you have created User Interface in a non-UI related software!
Proud of you.

Now before I leave you all to do this tutorial for yourselves, I want to address some controversy that may or may not occur:

This tutorial is not for everyone, you don’t have to try this, it is purely made for fun and fun only.

I am waiting for messages like " This is so useless ", which yes I will agree on it is KIND of pointless in doing these many steps, but to me I find it useful, it’s something new and unique that I haven’t seen done on the Developer Forums, so why don’t you give it a try eh?
Either way, this took me approximately 2 and a half months to finish. Not the UI, the tutorial ( dumbo ).

Hope you guys enjoy it, largest ever Tutorial.
Best of luck and Keep Creating!


bruh you can do the same thing in powerpoint…


Powerpoint required me to Buy Microsoft 365, not worth it.
Also yes I do know that.


Students (of any age) can get it for free. I got it for free. Nobody’s actually gonna look into what you’re doing in those programs so it doesn’t matter. But honestly, PowerPoint does look uglier.

Good job, nice post!


I am a High School student, I cannot really afford to buy Microsoft 365, nor do I really benefit from buying it ( except when I have to do presentations ), so I decided to do it on something that is openly available for all Software’s ( Mac OS, Windows etc )

Since Mac users do not have access to Powerpoint and specifically all Microsoft Applications, I decided to do something that would benefit ( mostly ) everyone.

I 100% understand this, and that is what worried me when I started this in early December, but I really wanted to post something that I found interesting, rather than posting something that is known to everyone ( Like Photoshop User Interfacing ).

I also understand that this may or may not have benefited anyone that saw this, but atleast it’s here for everyone in a case of trying something new and unique!
Thank you for your reply, I appreciate it.


Don’t you know Office 2021? It was the one-time purchase option of M365. The thing that you referred to is the subscription variant with the premium features.

Also, i really don’t trust WPS.

1 Like

Well, I have been using it for over 1 and a half years. But different opinions are always a thing :+1: .

I don’t really know how everything works regarding Office’s features.

And it then looks 2x worse, I think using WPS Office is a solution for those whom cannot afford the wonders of MS Office.


There are tons of free power point replacements, like Google Slides. I usually use Google Drawings and Photopea to draft and create UI, both of which are 100% free with no downloads.

1 Like

It would take longer to read all this compared to just making UI inside of roblox.

1 Like

The purpose of this resource wasn’t to tell if it’s a download or not, it’s to show that you can use softwares that are not intended for User Interface to make User Interface.

I understand why you’d have a question, and I 100% agree with you. It’s not necessary as I state here, to follow the tutorial:

You don’t have to read all of this… It’s mainly for fun and fun only…

Sorry if that was confusing, I was replying to OptimisedAces who was talking about how people can’t afford power point as a replacement for WPS Office. I was saying that Google Slides is basically the same (better IMO for drafting/designing UI in my opinion, especially Google Drawings) and free.

1 Like

Apologies for the misunderstanding. I totally agree with you! I have tried to use Google Slides to create awesome User Interface. Although, I have never heard of Google Drawings… Sounds interesting none the less!

1 Like

My comment is no insult to OP: I appreciate them trying to introduce people in the art of UI Design.

But just get Figma… It’s free and one of the most (if not the most) popular prototyping tools out there! It’s leaning curve is just a bit steeper, but it definitely pays off to learn how to work on an industry standard program.

1 Like

I have taken every reply into consideration, I will not use irrelevant softwares for UI Designing in my future tutorials. I just wanted to show a unique way of making UI in a software that is 100% not meant for UI Designing. Appreciate your reply though!

You can use Figma it’s powerful and free


Microsoft 365 is free to all students, highschool included. Just put your school email in.


Mac users do have access to powerpoint, word, and all other microsoft office apps… I don’t know where you heard that from.

This is something I’d definitely recommend. Figma is great, or Adobe XD,