I Tested Every "Alternative" Design Tool
Chapters22
The creator tests a variety of design apps by replicating a simple button to compare first impressions, with an unscripted, honest critique and a baseline using Figma.
A creator tests a wild stack of design tools by building the same button across them, rating usability, prototyping limits, and overall vibe.
Summary
Juxtopposed’s latest deep-dive has Moebius-like breadth as the host challenges himself to design a simple button in a huge lineup of apps. He starts from Figma, then moves to Penpot, Lunacy, Unicorn Studio, Blender for UI, Affinity, Critter, Inkscape, Photopea, Graphite, Arrive (with animation), and many more including Rex Paint, Pixie Editor, and even PowerPoint and Google Slides. Throughout, he notes real-world quirks: Penpot’s weight controls without bold/medium labels, Lunacy’s crowded toolbars, Blender’s surprisingly smooth UI animation potential for 2D, and limitations in prototyping across several tools. The video is unscripted and brutally honest, with hands-on feedback about lag, live previews, layer management, duplication woes, and the learning curve for animation timelines. By the end, the creator weighs Blender, Cavalry, Pixie Editor, and Inkscape as standout picks, while acknowledging some tools are great for art or pixel work but not ideal for interactive prototyping. The piece is not just a product roundup; it’s a candid exploration of how different design ecosystems handle shapes, shadows, typography, and motion in a single, repeatable task. Expect a quirky, opinionated panorama of modern design tooling, complete with practical takeaways for anyone shopping for a new UI design or prototyping workflow.
Key Takeaways
- Penpot provides intuitive labels for shadow and color controls, but its first-arrow tool can be buggy and lacks reliable line drawing for a clean arrow prototype.
- Lunacy feels visually polished yet cluttered; its free-tier limits cloud features and its prototype/animation pathways aren’t as accessible as the author hoped.
- Blender shines for UI design experiments with easy keyframing and magical 3D-inspired shader capabilities, making it a surprising contender for motion-driven interfaces.
- Pixie Editor stands out as a 2D “Blender of UI design” with a powerful node-based shader system and a strong animation timeline that surpasses many traditional UI tools for effects.
- Inkscape remains a solid, more UX-friendly option than Critter or Rex Paint, especially for vector shapes and rounded corners, though its UI could still improve.
- Cavalry (After Effects alternative) delivers strong 3D-ish extrusions and shaders, and Arrive adds animation to UI with a familiar Figma-like workflow, making them compelling for motion-heavy UI work.
- PixArt surprises with deep pixel/2D tooling, including grid-based pixel editing, frame-by-frame animation, and a usable node/shader approach for creative button treatments
Who Is This For?
UI/UX designers and product teams exploring alternatives to Figma for either lightweight design or advanced prototyping, plus makers curious about how 2D/4D animation tools can influence UI aesthetics.
Notable Quotes
""Penpot is an alternative to Figma, and I've been hearing about it from you guys a lot, so I'm excited.""
—First app exploration and setup, establishes expectations for Penpot vs. Figma.
""I actually like how userfriendly it is because it actually tells you what the numbers mean with these labels.""
—Comment on Penpot’s UI clarity and feedback on UI elements.
""Blender is genuinely the coolest for UI. I can't even believe this.""
—Highlighting Blender’s surprising strength for UI animation work.
""Pixie Editor is the Blender of 2D... I love this button so much.""
—Praises Pixie Editor's shader/node capabilities and payoff for UI effects.
""Arrive is really similar to Figma with the big difference that it has animations.""
—Notes on motion-focused features in Arrive and its relation to Figma.
Questions This Video Answers
- What are the best Figma alternatives for UI prototyping in 2026?
- Can Blender be used effectively for 2D UI design instead of just 3D scenes?
- Which lightweight design tools offer strong vector and shadow controls similar to Inkscape or Affinity?
- Is there a way to prototype animations in Penpot or Lunacy without heavy scripting?
- What makes Pixie Editor stand out for pixel art UI elements compared to traditional vector tools?
Full Transcript
I have a problem. I always design in the same few apps because they get the job done. But I've been getting a little too comfortable. I need to get out there and seek other ways to design. So, I asked you guys to recommend some design apps to me. And as always, you guys did not disappoint. So, I'm going to try your best suggestions and test them by making the bare minimum, a button. More specifically, I'm going to try to make the same button in all those apps. This is going to help me see how far I'm able to go in the app and test how intuitive or how intimidating the first impression is.
And to make this experience as authentic as possible, this video will be completely unscripted, so expect me to be brutally honest. Just to give you some context, I mostly use an app called Figma to design. Figma has a simple design. You can see all your layers here and all the properties on this side. The button in question today will just be a simple text and a frame with rounded corners cuz it's a good feature to consider. Maybe some shadows, too, cuz I feel like it's a defining factor. Obviously, we want to test the shapes, too.
So, I'll create a circle. Inside of it, I'm going to make an arrow with a pen tool to make it look like a modern take on a button. Now that we know the text subject, let's go try your suggestions. Penput is an alternative to Figma, and I've been hearing about it from you guys a lot, so I'm excited. All right, I'm going to create a new file. The layout seems to be pretty similar to Figma. Let's create the text. Let's go. That's not bad at all. The mouse cursor is a little weird, but I think I can deal with it.
I'm just going to create a normal frame here. The default font is Source Pro Sounds, but I want enter. So, let's choose that. It also doesn't say medium or bold for the font. It's just the font weight number, which to me it's easier to work with. Let's put it on 500. It would be nice if I could kind of drag the numbers to increase or decrease the value, but that's okay. The corner radius is looking nice, so let's try adding the colors now. Let's add the shadow, too. Luckily, it's pretty obvious how it's done. Okay.
I actually like how userfriendly it is because it actually tells you what the numbers mean with these labels. The shadow is good. I'm just going to increase the opacity a little bit. It's also horizontally going toward this side, and I want it to be centered. Inner shadow is right here, too. Pretty intuitive. Um, okay. I'm not exactly sure why, but it's a little laggy. Kind of wish I could see the exact size as I'm creating the shape. Ultimately, I could just change the sizing from the properties, so that's fine. Finally, let me just add the arrow with the pen tool.
Wait, what? Let's try again. Okay, what's happening? Why can't I draw an arrow? Why does it keep getting deleted? Last resort, I'm just going to try to make two different shapes to form the arrow. I think the end result looks pretty good, actually, and pretty similar to the original design. Penput also allows me to create a prototype. So, let's try that, too. Because Penput is pretty similar to Figma, I assume if I want to animate the button, I got to create a component first. Let's also add a variant and just rotate the arrow a little bit.
I want to animate from here to here, but I couldn't find hover in the trigger options, so I'm going with the mouse enter. Also couldn't find how to do smart animate, so it transitions smoothly. These are the only options, so it kind of turns out looking like this. Animation wise, this is pretty basic. So, I'd say overall penput is pretty solid for designing because it has all these good features, but I wouldn't really rely on it for prototyping. Lunacy is another Figma alternative and it seems to be free but it's limited especially if you want to use the cloud features.
Okay, I just downloaded it and this is the first page I'm seeing. My first impression is that it's a little crowded but let's see what different sections there are. So, we have layers, components, styles, variables, icons, and you have to pay to unlock the SVG files, photos, and illustrations. Can I actually close this? The tools like pens and shapes are here too. And we're even given a quick tutorial. Let's just create a new local document to get started for real. Let's create a new frame for the button. A stars. I like that it shows the dimensions while I'm resizing.
I can change any value from here by dragging too, which makes everything way easier. I kind of still don't understand why this area has to be so crowded with three different toolbars next to each other. It doesn't leave a lot of space in the middle for the design. So, if you have too many designs, that could be an active problem, unless you know you have a big screen. So, I wish these tools were placed somewhere else. Maybe up here or down here. Anyway, let's add the text and increase the size like that. I don't want to create the same exact thing every time.
So, this time I'm going to go to the shadows and add another kind of shadow for the circle. Once again, I want to add some depth. So, I'm going to create a bunch of shadows. I got to say, I like how clean it is visually. Like the cursors are beautiful. The pen tool has the same problem as pimpot though. I can't make a line from this point to this point. The points are kind of there for a reason, right? I guess we got to make the arrow head separately again. Now we can just style the arrow by grabbing the eyropper.
Oh, I like this. I'm trying to find the animations, but I can't. There's just an export tab. You can upload to cloud or export the document, but no prototype tab or anything like that. I guess since we have components, we might be able to animate from there. Okay, I created a component, but I don't know how to create a variant. Their own document says click the plus sign in the context toolbar or press this. But I can't find any context toolbar to begin with, and the shortcut doesn't work. Well, since I can't actually find a way to animate this, I guess this is our final design in Lunacy.
This next app was actually a very interesting recommendation. It's an advanced prototyping tool that makes much more realistic mockups. This is the design environment and it already has a prototyping screen, but let's close it for now. Let's make the workspace a little bit dimmer first. This time I'm going to try a new color, purplish something. I'm going to say this right now. This app is much easier to use and I have not encountered any bug yet, but that's just the design aspect. Making the circle was just as easy as everything else, but now I kind of have a problem.
I can't find out how to make a shape natively. You can apparently bring any design from Figma or Sketch, but I want to try to make something using this app alone. So, I'm just going to bring an icon and place it inside the circle. This design looks fine as it is. I'm not going to try to make any shadows or add depths anymore because I want to try the prototyping instead, which is done through this patch editor. I actually had to study what patches are and how you can create interactions, and that took me a while.
I want to make the circle expand and take over the whole button. All I really need to do is add a trigger like tapping or something, then connect it to a transition function, aka a patch, and then connect that function to a property like the size of the circle. I had to iterate on this a lot, and it was pretty much a silent process. But at the end, I managed to come up with this animation. I admit, I've never had to spend this much time trying to make a simple animation like this, but I get the idea.
The potential is infinite and the difference in prototyping really becomes visible when you're dealing with entire applications. Because it actually has the advantage of being local, I would switch to it in a heartbeat. Unicorn Studio is similar to other tools so far except it focuses on shader effects like this. So let's see if we can actually build something magical with it. Making a shape is easy in it as expected. Let's get to the point. What effects do we have? There are many, many options and I don't know what to choose. I spent a good 10 minutes experimenting with different shaders, learning how each of them works and finally managed to form an idea.
So, I'm going with this wisps effect. Want to make it a bit sparky, shimmery, glittery, you know, pretty. But this is not enough. What else do we have? Outline. Huh? What's that? Okay, hold up. Right there. There. That's what I want. Let's make it more cosmic. Obviously has to be blue. Okay, that looks really good, especially when it animates. Now, how do I make it follow my cursor like this? Got to be a setting here somewhere. Track mouse. That's it. This looks better. So, let's move on to making the rest of the button. I made the circle black.
And now I'm going to put a glass effect on it. Just trust the process. I'm going to try magnifying. That doesn't look bad, but let's see how it looks next to the text. There are many font options here. I think pixel would go nice. Well, nice is an understatement. I added an arrow and some contrast around the circle. And it's time to make a hover effect. The outline effect has a thickness setting that well makes it thick. Let's also make the arrow expand a bit. And this is how interacting with our button feels like. Not going to lie, it does low-key feel like magic.
But this is just a mixture of like two effects, so you can imagine the infinite potential. As the name suggests, Unicorn Studios been a very unique experience. There are two types of designers. those who use anything but Blender and those who use nothing but Blender. Today, I want to test if the second group has a point by making our UI in it. Just like every other application so far, I'm going to reshape this cube to look like a rectangle. I am just a beginner at Blender, so I had to look up how to curve these corners.
Such a satisfying process, though, especially when you divide this chamfered shape to multiple segments. I'm going to do the same exact thing for the circle on this side. Obviously, the text has to go there, too. I'm not happy about the scaling at all, but it's okay. We ball. As much as I like the blue color and everything, I want to try making this a little more glassy. So, we need glassy glossy shaders and whatnot. Wait, that looks so much cooler than I expected. To save time, I'll just copy the same exact bunch of nodes for other shapes, too.
As amazing as this looks, I think it's still too sharp. Maybe we could curve the side as well. You can see that it's much smoother now. So, I hope the refraction would look more realistic. I seriously can't believe I just made this in 20 minutes. I'm going to add a text arrow here, too. And once again, just paste this whole formula for everything else. Okay, Blender is genuinely the coolest for UI. I can't even believe this. And the fact that I can just animate it right here and so easily is even crazier, which adds a key frame here in the animation timeline.
Go a little further. Move the arrow further, too. Click I again. And there you go. Yes, it takes a while to get used to the crowded UI, but once you learn even 20% of it, it's pretty rewarding. Affinity is an app by Canva and it's been free for a while now. It's a cool app because of having different modes and each of them having different tools. I'm going to go with the layout mode cuz it looks more suitable for UI. Okay, let's make the background dark. Add the text. Uh, I made the text visible and added the rectangle.
But how do I round this corner? We have a bunch of tools. Note tool frame text. H. Ah, it's right here. So far, no issues. But now that I'm making the arrow, I kind of wish I could align the point I'm about to make with this one. The pen tool works as expected, and you can actually draw the arrow head in one go. Unlike the previous apps, I think all in all that went quite smoothly. Huge shout out to this narrow bar up here holding up all the tools, which gives you the benefit of removing the sidebar completely if you want to open up more space in the center.
I generally just like being able to customize the UI for myself. Second shout out goes to this color panel showing all the color schemes and shades which is pretty handy. Just wish it was a different model like OKC or something. At the end, since I'm not a fan of the Canva AI, I'm just going to turn all these other modes on instead. Who knows, I might get into photo editing. For a while, I switched to Linux to try The personally chose the square frame, but there are many other templates, too. The UI is a bit unfamiliar to me.
So, let's see. There's tool options. Device status, undo history, and images here. Brushes, patterns, fonts, document history, and colors over here. And layers, channels, and paths over here. Well, that's pretty random. Plus, I think these two panels are a bit too close. Like, there's not enough distinction. This is a layerbased app. So, we got to make another layer for the button first. Now, I have a lot of tools here, but which one will make me a rectangle? Maybe the path tool. I mean, this is fine, but it's not a rectangle. I want something like a regular everyday rectangle.
What's this? Rectangle select tool. But doesn't this just work like a lasso? Oh, this has a round corner option. Maybe this is it. Yep, it works just like it should. I'm thinking how I should style this. Wait, I have an idea. There are these selection options. So, I'm going to try to isolate the outline area. Then repeat the same process for kind of the cartoonish lighting. And now move the outline forward. Look at that. Okay, I repeated the same exact process for the circle. So, now we just add the text. Wait, I should look for my favorite font.
For the outline, I'm going to go back to the path editor, draw a line, make it a bit thicker. Woah, this is the first software I've come across that allows you to rotate the canvas, which is really cool for drawing. Well, I'm pretty happy with the final result, and is really cool. Probably just needs a refreshed UI, and it's a banger. I thought Critter was mostly used for drawing, but then I saw that it actually has design templates. So, I'm curious how it works. Let's start making our button by grabbing the rectangle tool. So, tool options apparently allow you to change some things about the shape.
So, I'm going to change the color first. Wait, that's an oval. This is probably too round. Let's try 80. Just got to find the right pill shape. Let's try some effects like shadows. Yeah, definitely not. How about a bit more moderate? Hm, that's okay, but not quite. My job would be way easier if this gave some sort of preview or live view of my changes, so I don't have to keep reopening the screen. And it doesn't have a shortcut either. The gradient overlay could be nice. I didn't even think of that. And it has an option called reflected.
Let's see. I could put a white glow on the top. So now it pops a little more. I'm going to blend the circle with the background so it's less white and more purple. For the arrow, the line tool is so far doing a good job. I'm trying to change the font. These panels were once again too pushed into each other. This could be a bit more distinct. I'd say overall Critter is a bit easier to use than but its UI could still use a tiny bit of change. I've used Inkscape before while designing my Linux skins, so I got kind of accustomed to it.
The UI is a bit cleaner than Critter or and in a way a bit more userfriendly. Like I can make a simple rectangle like this, then fill it with some color, and then it has a specific tool to round the corners. I'm going to give it a stroke gradient. And the gradient UI is very interestingly unique, too. Like the settings available here have nothing short of Figma or any other popular apps you use. The pen tool is working super smoothly. I have no complaints. Let me just remove the fill and we're good. The text should be easy.
Oh, wait. How do I edit this? There's got to be a panel in here for us. That's it. The font and the font style selection not being a drop down here is my favorite. And this is the final result. I find Inkscape intuitive, but once again, the UI could be even better. Photo PE is an online photo editor. I've occasionally used it before. It's great for images and works with a lot of different formats. But wait a second. They have a new tool specifically for vector art, and I think that's more suitable for making our button.
Essentially, it's the same thing as Photo P, but it strips down a lot of extra things and leaves only vector specific tools. The properties on this side are nice and compact, too. From the first look around, I think we're good to start. Let's make a rectangle round those corners. Make it blue and put it in the center. I wish there was a way to see the position of something in my artboard because it's really hard to be precise like this. I mean, you can eyeball it, but you know what I mean. There is a CSS viewer, but it's not an editor and it doesn't show the positioning.
These rulers are the only way I managed to find. I guess it gets the job done for now. I'm going to try something new with these shape modes. Kind of cut the circle out. The pen tool works well, but it removes the point I'm trying to connect to. I even tried making the arrow head separately, but it's very hard to align the point with this one and make this 45°. So, I guess I'm going with something more random. Now, I just need to duplicate this and flip it for this side. Why doesn't it copy and paste?
Doesn't respond to any shortcuts either. What? Don't tell me I got to recreate everything that I want to duplicate. Please let there be a way. Let there be a way. Yep. So, I redrew the other side using a ruler. This looks a bit cartoonish now, so we need a cartoonish font, too. I always use this one. So, let's just go with this. You can upload your own font and use local fonts. That's pretty neat. As a final touch, I recreated the same button and moved it a bit lower to look like it has depth. Got to do the same thing with the text, too.
I got to tell you, not being able to duplicate something is so frustrating, but it's in beta, so I guess it will be fixed at some point. Also discovered a bunch of plugins, and that's a nice bonus. So, this is our final button. I like that I can export it as an image and save the file. Long way to go, but overall pretty solid tool. Graphite is another online editor. This should be interesting. Let's make a new document. Infinite canvas. Cool. Maybe another day, though. The layout seems familiar. Honestly, I think I know exactly what to do already.
Do I need to make a rectangle to make the background dark or Oh, it seems like it already has that covered. Well, let's just get right to it. Oh, I forgot to make a new layer. Wait, it has that covered, too. Okay, let's change the buttons color. And what else do we have here? Add some corner radius. There are actually many other options here, so I'm thinking of ideas. Gradient. Gradient should be nice. It's always when I'm trying to come up with an idea that I just completely run out of them. I don't know what I'm doing anymore, but it looks fine.
Let's see if I can make a shadow. Doesn't seem to have that option. How to make shadows in graphite. Uh, how to make shadows in graphite app. Never mind. Guess we do it the hard way, which is making another copy of this and blurring that. Graphite has a node editor, so we just stack up effects like this. So hopefully adding something like blur should work. So after about an hour of searching and reading the docs, I could not for the life of me get this setup to work. Why doesn't it work? Anyway, I made a circle and blended it with the background.
The pen tool works nicely, too. I have no complaints. While adding the font, I'm noticing that it has a large selection of fonts, so I don't have to import anything. Well, I really like this. And look, I didn't even have to make an account or save the file on the cloud. I can just save it to my device. That alone makes graphite an amazing tool in my book. Arrive is really similar to Figma with the big difference that it has animations. This is going to be fun. Since I've already made a lot of variations of this button, and I'm kind of out of ideas, I'm going to browse Mobin for some inspiration.
They're sponsoring today's video, but regardless, I need to use their site to find some examples of well-designed buttons. So, let's search for them. There are a lot of examples here for iOS, and they look good. But let's check websites, too. Especially the CTA sections with the big buttons, you know. Okay, these look nice. A lot of these already look like our buttons, so I need something new. Wait, this does look nice. What else do we have? This animation looks good, too. Okay, I have an idea already. Let's take these to RI first as references. There are a lot of presets in RI, but I'm just going to go with our good old 500 by 500 artboard.
We have our references here. I'm thinking we could mix these and our own button to come up with something different, but this time we animate. Let's make her a rectangle first. Apparently, dragging to change a value works vertically here, not horizontally, you know, like other tools. And now I want to put the arrow in a separate section like this example. Like this. I made the text and the arrow, but I don't like how it looks like two buttons, not one. So, I'm going to have to extend this again and try to cut around the circle.
One thing I like about Rive is that it allows you to add multiple strokes to a shape, which doesn't really exist in a lot of the other apps, but it should. I looked around a lot, like a lot to try and find a way to subtract the circle from the pill, and this is all I found. Now, this is how our button looks. Let's try animating it like the example on Mobin. We just make this smaller, move it a bit to the right, grab the circle, and move it too. And just repeat this whole thing in reverse for the other side.
It looks okay, but let's make it a bit smoother. And now it looks approachable. Thanks again to Mobin for making it possible to come up with a new idea. You can try Mobin 2 for your projects. Just use the link in the description to get 20% off your first year subscription. Cavalry is set to be one of the best alternatives for Adobe After Effects and I'm really curious to try it. The layout looks a bit crowded, but I can quickly spot the tools and such, so I think I know where to start. We just create a rectangle.
The anchor is in the center, so zero means center, I guess. Corner radius is right here, too. I think I already get how this tool works. Everything you need for every shape is right here. Like even colors, shaders, everything. And honestly, I think that's pretty intuitive. The circle was as easy as the rectangle. For this button, I'm going to try the extrude option here cuz that really caught my eyes in the beginning. I genuinely love that everything I want to edit is right here. And yeah, it still looks crowded, but I'm kind of getting used to it.
Let's see how shaders work, though. Wait, you can actually choose any type of shader you want and edit it right here. That's amazing, but probably another day. Let's make the arrow with the arrow tool itself. Are you kidding me? I can literally reshape the arrow in any way I want, like it's clay. What is this app? I want to animate this to extrude further. And honestly, it works just like every other animation app. But what I love is that it only shows the property you're animating here. Easy, fast, accessible, and doesn't overcrowd the area. After a lot of experiments with the animation itself and changing my mind about the colors a bunch of times, I came up with this and it got exported super nicely.
All this being said, yeah, I'm definitely switching and I'm not looking back. Friction caught my attention among a bunch of your comments and I have to check it out. It's another motion graphics app, so we're on a roll with good animation apps here. It was super easy to get started with it. No sign in or anything extra, so I'm getting right into making my rectangle. So far, I like how clean it is. The choice to use only icons and these super hover worthy inputs. Beautiful. I mean, colors are right here. Alignment options are over here.
Font options are there. What I'm trying to say is working with it is easy. The arrow head is bothering me yet again, but good thing it has these guidelines, so it's a bit easier than other tools. Okay, the button looks good. Time to animate. I'm going to grab this icon. And uh where do I add the the the key frames? Maybe they're here. Okay, good. Transform, rotation. Let's go a bit forward. and rotate this exactly 45°. This is how that looks. Too sharp, I know. Let's make it a bit smoother. And that's how that looks.
Rendering it is literally as easy as this. To be honest, I'm happy with how it turned out. I could probably get better at friction if I use it a bit more, but it's definitely already on the top of my list. A Sprite is a cute little pixel art app, and I've been using it a lot in the past to make my channel picture or other things. Now, I know this doesn't count as a UI design app, but wait, it actually does. Especially if the UI is for a game or something with that style, so let's try it out together.
First thing I want to do is show the grid so that we can actually see the pixels. I know I can just start drawing, but because our button has multiple layers, I want to bring them up. So, this is the background, and this is the button. Making a rectangle is simple, but it looks sharp like this. I can't find a corner radius option. I have an idea, and I hope it works. I just made the brush size a bit bigger. That's actually good enough. I'm going to try to recreate the a sprite button style itself cuz I really like it.
So, let's make a border manually and then add a shadow, too. Okay, I tried my best to replicate the shadows and everything. A lot of this is honestly just a manual trial and error, seeing what works and what doesn't. For the text, a sprite actually has its own font and a mini version of it. So, let's try that. A Sprite Mini is nice. It's more cartoonish, and I like it. Well, this is our final button, but I want to try the animation, too. Just got to add another frame. Can I just say I appreciate the layer and animation timeline being so compactly well-designed.
Like I can just grab the next frame into the animation for these four layers and move them down. Let's not forget to delete the shadow pixels. And that's it. That's our animation in a sprite. It's a simple and elegant tool at the same time. At first, I thought Pixie Editor was like a sprite, but then I realized not really. Like not at all. The difference isn't just that Pixie Editor has three different modes of painting, pixel art, and vector, but the fact that it has a more advanced animator, and a node editor, which lets you go crazy with it.
I'm going to choose pixel art mode and make a rectangle. Wait, I can also change the border radius. That's amazing. I iterated on this again and drew some outlines super easily. But for shadow, I think I got to go manual, which is fine. I find it therapeutic. Drawing pixels is similar to a sprite. Nothing special. Now, I'm kind of curious how fonts are handled here. Does it have like its own pixelated font or something? So, it seems like you can choose any font and its weight or size and it'll be converted to pixels. I tried a lot of fonts, but I'm not happy with any of them right now.
So, I'm going to draw my own. Let's go. Okay. Well, this is the button, but let's try the animation. Guess me just duplicate the layers from what I can see. And go further and duplicate them again. Move the button a bit lower. Delete the depth pixels. And that's it. Let's play. Okay, too fast. I almost forgot to change the frame rate. That looks nice. There's one section left for us to try and that's the node editor and I'm excited for it. It's kind of like Blender again. You just layer effects after effects and there are many of them here.
I'm going to go with a shader. They have a whole document on their shaders and the language which is worth reading. I wrote a color gradient shader but as you can see the effect goes beyond the button and we need to mask it. I'm going to draw a white replica in a separate mask layer. So now it looks actually isolated and the effect is only visible on the button. Okay, this really exceeds my expectations from this app and I love this button so much. I want to say Pixie Editor is the Blender of 2D, even though Blender has 2D, but it's so intuitive and I will definitely use it more often.
Thanks to that one person who recommended Rex Paint, I got to experience a truly different app. This is an ASKI editor. You draw these little symbols. The interface is simple enough. I guess we just pick a shape and draw pixel by pixel. I want to make my corners like this. So, the rectangle ends up kind of this way. I also picked some alphabet characters and tried to imitate the button, but this is too simple. How about corners like this? I can also fill the area with whatever character I want. I kind of went experimenting with different things for a few minutes, but I'll tell you that I could keep on going forever cuz it was really chill.
Finally agreed on this as a variation of our button and I'm happy with it. Rex Paint is a lovely tool for designing with this style and it will make a fine addition to my app collection. Godo is a funny suggestion cuz it's a game engine, not a design app. But well, games have interfaces, too. And I happen to have very little experience with Godo. So, at first, I'm simply creating user interface node and worrying about the rest later. This is the canvas we're working with, but I like to imagine that we're working on a mobile app.
So, I'm going to change the dimensions. And now, it's in portrait mode. I imagine this is the main button that goes down here on the phone. So, this should be fine. This is just a container though. We need a panel mode which allows us to style the button. Just got to change the theme to style box flat. Now, we can change the color. We have corner radius settings right here too. Okay, that's our pill. I repeated the same process with the circle too kind of manually. For the label, I imported a font file and just applied it again right here from theme settings.
For the icon, let's make a container. make it fill the circle and just drag an icon image into it. You can do a lot in Godo, but I think assets are best provided from somewhere else. Anyway, let's make it black background for the app. But this is not all. I'm also adding an animation player. Once again, we have an animation timeline. So, let's track the position of the arrow. Move it a bit forward and we get an animation like this. If this was an actual game, I would definitely import designs and then lay them out in Godo.
But I still appreciate having the ability to natively design a UI in it. Anyway, PixArt. You guys actually recommended PixArt. Okay, let's see. The simple rectangle alone should tell us what kind of tool Pixart is. Okay, this is already interesting. So many corner variations in just one menu. I feel like drawing. So, I'm going to squibble some lines over the button. It's probably going to look bad, but we won't know till we try. Wow, am I bad at drawing. This one looks all right. Since we're being unserious, I'm going to go with this instead of the circle.
The font should be unserious, too. So, let's find an unserious serious font from their own library. This one's all right. The arrow settings are quite worthy, I must say. Damn, Pixart, I underestimated you. We can even use blend modes. I'm grateful. Let's try animations. So many paid animations. Let's just try the free one. The easing and timing settings are super basic, and it gives you something like this. The fact that I can't make custom, even simple animations, and all the options are locked behind the payw wall and all the AI stuff kind of throw me off here.
But I think the design part is solid and gets the job done. Why is everybody saying PowerPoint? It's probably been over a decade since I used this app and I don't remember designing in it. I just use the presets most of the time. So, this is going to be fun. If I'm remembering correctly, we got to go on the insert tab and create a shape. I guess this is how we round it. How do I make the background dark? The design tab. Oh, yeah. This should do it. There are so many shapes here. Let's pick out an arrow.
What are shape effects? Wait, I can make it 3D. Wo. Okay, that changes things. I'm going to give some depth to the circle, too. I was right. This is fun. Of course, you can change everything about the arrow. I don't even need to draw anything. Okay, let's try animation. The animations are basic, but they're cool. I'm going to add a pulse animation to the arrow and a bold reveal one for the text. And good thing I can trigger the animation with a click. So, we get this PowerPoint. You've truly exceeded my expectations. Today, I had to pick between Google Drawings and Google Slides, but I ended up choosing this one because I never really tried it.
Are you kidding me? This is the same as PowerPoint. We have a bunch of gradient options. So, I guess that's what we're going with. Gradients. one in this direction and another one in the other direction. We have access to all Google fonts, so of course I went with my usual. The arrows are not very aesthetic here, no matter how many settings I change. I'm going with a simple arrow character, then white doesn't contrast well. Let's try blue for the texts. This is our final button. This is honestly a very simple tool. Kind of disappointing to me.
It simply looks like a stripped down version of Google Slides rather than something with more artistic features. Our final tool is everyone's favorite. Just like PowerPoint, I haven't used this in a while, so it's the first time I'm seeing layers. It's going to make things a lot easier. Since there's no pill shape, I'm going to have to improvise. Let's make a rectangle first. And then I'm going to put two circles around it. Wait, something's off. Oops, I missed the spot. In a new layer, I'm going to make a circle. And in another one, I'm going to make the text.
These fonts are ancient. I think this one looks good, though. Let's use the arrow shape to make a simple arrow. I don't know what else to do, so I'm just going to add a stylistic circle here. It looks a bit pixelated, but it's fine. It's a part of the aesthetic, and I like it. Of course, if the canvas was bigger, it would look smoother, but I'm happy with our paint coated button. Just look at the collection of all the buttons we made. I love some of them, like some of the others, and oh, am I indifferent to a bunch of them.
Surely, better things could be made in a lot of these apps if you spent more time in them. My final takeaway is that I'm not using Blender nearly enough, especially for UI, and it's time we seriously gave it a chance. Cavalary is perfectly sufficient, and I'm definitely going to replace After Effects with it. Pixie Editor really impressed me, and I might actually consider switching to it for pixel art. And for Linux, my go-to design tool will be Inkscape, unless the others get a UI refresh, which could be my next project. What about you? What tool are you picking from the stack?
Well, that's all for this video. If you liked it, make sure you do your magic down below. and see you in the next one.
More from Juxtopposed
Get daily recaps from
Juxtopposed
AI-powered summaries delivered to your inbox. Save hours every week while staying fully informed.









