DEV Community: Dishank

Create Viral 3D action figure packaging box with GPT.

Dishank — Sun, 13 Apr 2025 05:52:09 +0000

Ever wondered what you’d look like as a 3D action figure? No? Well… I did it anyway.

I designed my own 3D toy box using Figma, ChatGPT, and a little Prompt.

💭 It All Started With Boredom… and scrolling through Instagram reels.

I opened Figma just to play around. I started dragging in a few of my favorite things —

🎧 Headphones? Check.

💻 MacBook? Check.

🎨 Figma logo? Obviously.

💡 Neon nameplate? Had to do it.

🧍 My photo cutout?(Used Trending Ghibli Art)

And Now let’s turn all this into a real toy box?”

⚙️ Enter AI: The Real MVP
I uploaded my little Figma collage to ChatGPT (with image capabilities) and said:

“Turn all this into a 3D action figure packaging box. Add ‘Dishank’s Space’ on top with a neon vibe.”

In seconds, GPT did its magic. Boom — I was staring at a digital box straight from an intergalactic toy shelf.

It had me in it, standing heroically with all my accessories like I was about to battle some UI/UX bugs.

Note: Instead of uploading a bunch of images, I just made one frame in Figma with everything inside, exported it, and fed that to GPT. Easy peasy 😄

✍️ Final Touches (Because Designers Can’t Help Themselves)
Was it done? Almost.

I exported the generated image and went back in for a few final tweaks:

Brightened the neon glow 🔆
Smoothed out the shadows 🖌️
Fixed some funky edges ✂️
Just enough polish to make it at least Instagrammable.

📸 And Done: The Toy You Didn’t Know You Needed
Yes, I am now the proud owner of my own fictional action figure. No, it’s not for sale (yet 😉).

🧠 Real Talk: AI + Design = ??
Alright, let’s get meta for a sec. This was just a fun experiment — but it actually says a lot about the direction design is heading.

❤️ What AI’s doing right:
Helping visualize crazy ideas fast.
Acting like a design brainstorming buddy.
Saving time on mockups, layouts, concepts.
Making design more accessible to everyone.

⚠️ But also…
It can lead to lazy design thinking.
Some outputs tend to lack uniqueness and feel overly templated.
Junior creatives might get overshadowed.
Ethics around ownership? Still messy.
AI’s awesome when it works with you — not instead of you.

Design still needs you — your taste, your weird ideas, your tweaks, your story. 💪

Best Figma Shortcuts for Designers

Dishank — Tue, 25 Mar 2025 12:32:48 +0000

Boost Your Workflow with These 10 Must-Know Figma Shortcuts:

1️⃣ Quick Actions — CTRL / (Windows) or CMD / (Mac)

Instead of searching through menus, use Quick Actions to find any tool or command instantly. Just press CTRL / and type what you're looking for.

2️⃣ Show/Hide UI — CTRL \ (Windows) or CMD \ (Mac)

Need more canvas space? Toggle the UI visibility to focus on your design without distractions.

3️⃣ Zoom to Selection — SHIFT 2

Instantly zoom in on a selected object, ensuring precision when working on intricate details.

4️⃣ Align and Distribute Elements

Aligning elements precisely is crucial for a clean design. Use these shortcuts:

Align left: ALT A (Windows) or OPTION A (Mac)
Align right: ALT D (Windows) or OPTION D (Mac)
Align top: ALT W (Windows) or OPTION W (Mac)
Align bottom: ALT S (Windows) or OPTION S (Mac)
Distribute spacing: CTRL ALT H (Windows) or CMD OPTION H (Mac)

5️⃣ Frame Tool — F

Quickly create frames (artboards) for your designs. Frames define screen sizes and help organize your components efficiently.

6️⃣ Duplicate Selection — CTRL D (Windows) or CMD D (Mac)

Easily duplicate objects while preserving their properties. Great for creating repetitive UI elements.

7️⃣ Group & Ungroup Elements

Organizing elements in your design is easier with these shortcuts:

Group elements: CTRL G (Windows) or CMD G (Mac)
Ungroup elements: SHIFT CTRL G (Windows) or SHIFT CMD G (Mac)

8️⃣ Export Designs Quickly — SHIFT CTRL E (Windows) or SHIFT CMD E (Mac)

Export your designs as images or other formats without navigating through multiple menus. Perfect for sharing assets instantly!

9️⃣ Create Components & Swap Instances

Components maintain consistency in design and speed up prototyping.

Create component: ALT CTRL K (Windows) or OPTION CMD K (Mac)
Swap component instance: ALT (Windows) or OPTION (Mac)

🔟 Auto Layout Shortcut — SHIFT A (Windows) or SHIFT A (Mac)

Auto Layout is a game-changer for responsive designs. Use this shortcut to instantly organize elements with even spacing.

Final Thoughts

Mastering these Figma shortcuts will drastically improve your workflow and efficiency. Whether you’re a beginner or an experienced designer, integrating these into your process will help you design faster and smarter. Start using them today and see the difference!

Best figma plugins to Boost Your Workflow

Dishank — Fri, 07 Mar 2025 11:17:58 +0000

Figma is an amazing design tool, but plugins take it to the next level! Whether you need to convert PNGs to SVG, check color contrast, or add animations, these top 10 Figma plugins will supercharge your workflow. Let's dive in!

1. Vectorized (PNG to SVG) 🎨

Convert raster images into clean, editable SVGs.

No more blurry PNGs—this plugin turns images into scalable vectors.
Perfect for logo tracing and icon design.

🔗 Get Vectorized

2. A11y - Color Contrast Checker 🌈

Ensure your designs are accessible with proper contrast.

Checks contrast ratios to meet WCAG guidelines.
Helps improve readability for all users.

🔗 Get A11y - Color Contrast Checker

3. Figmotion 🎬

Create stunning animations directly in Figma.

No need for third-party animation tools.
Animate UI elements smoothly within your design.

🔗 Get Figmotion

4. Codia AI 🤖

Your AI-powered coding assistant inside Figma.

Generate front-end code directly from your designs.
Supports multiple coding languages like HTML, CSS, and React.

🔗 Get Codia AI

5. html.to.design 🖥️

Import any live website into Figma as editable layers.

Speed up redesigns and UI audits by pulling existing websites directly into Figma.
Retains typography, images, and layouts.

🔗 Get html.to.design

6. Vectary 3D 🏗️

Bring 3D elements into your Figma designs.

Create interactive 3D visuals inside Figma.
Perfect for mockups, product presentations, and unique UI elements.

🔗 Get Vectary 3D

7. Figr Identity 🔍

Instantly generate business branding mockups.

Pulls real brand details like logos, colors, and fonts.
Great for designing brand identity kits in seconds.

🔗 Get Figr Identity

8. Content Reel ✏️

Easily add placeholder text, images, and icons.

Populate your designs with realistic content quickly.
Supports names, avatars, dates, and even UI elements.

🔗 Get Content Reel

9. Morph 🔄

Smoothly morph between shapes, icons, and text.

Great for creating unique UI transitions.
Adds a professional touch to presentations and prototypes.

🔗 Get Morph

10. Iconify 🔥

Access thousands of icons directly in Figma.
Supports Material Design, FontAwesome, Feather, and more.
Easily search and drag icons into your designs.

🔗 Get Iconify

🚀 Boost Your Figma Game Today!

@dishank
These plugins can help you design faster, smarter, and more creatively. Try them out and take your Figma workflow to the next level!

👉 Which plugin is your favorite? Let us know in the comments!

Why Every UI Designer Needs to Learn UX in 2025

Dishank — Thu, 06 Mar 2025 13:13:13 +0000

The UI Designer’s Wake-Up Call

Picture this: You’ve spent hours crafting the most pixel-perfect, glassmorphic, neumorphic, ultra-modern UI design. You’re beaming with pride, showcasing it to your team—only for the UX designer to say, “This looks great, but... users won’t know what to do with it.”

Boom. Mic drop🎤. Your beautiful design is now just art—not a product.

2025 is the year to bridge the gap. If you’re a UI designer who thinks UX is just another department’s problem, you’re in for a bumpy ride. Let’s break down why UX is your best ally and how learning it can level up your career.

UI Without UX is Like a Supercar Without a Steering Wheel

Imagine a car company launches a futuristic supercar with an insanely sleek dashboard. The only problem? They forgot to include a steering wheel. Sure, it looks cool, but how are you supposed to drive it?, Maybe Its Automatic But! (Maybe Not A Good Example 😁)

That’s what UI without UX feels like. Beautiful, but unusable.

Your job as a UI designer isn’t just to make things pretty—it’s to make them work beautifully. Users should flow through your design like butter on a hot pan, not get stuck wondering where to click.

The UX Laws You Can’t Ignore

If you want to elevate from “pretty pixels” to problem-solving pixels, you need to understand these key UX laws:

1. Hick’s Law (More Choices = More Confusion)
The time it takes to make a decision increases with the number and complexity of choices.

Takeaways

Minimize choices when response times are critical to decrease decision time.
Break complex tasks into smaller steps in order to decrease cognitive load.
Avoid overwhelming users by highlighting recommended options.
Use progressive onboarding to minimize cognitive load for new users.
Be careful not to simplify to the point of abstraction.

2. Fitts’s Law (Bigger Buttons = Better Clickability)
The time to acquire a target is a function of the distance to and size of the target.

Takeaways

Touch targets should be large enough for users to accurately select them.
Touch targets should have ample spacing between them.
Touch targets should be placed in areas of an interface that allow them to be easily acquired.

3. Jakob’s Law (Users Prefer What They Already Know)
Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.

Takeaways

Users will transfer expectations they have built around one familiar product to another that appears similar.
By leveraging existing mental models, we can create superior user experiences in which the users can focus on their tasks rather than on learning new models.
When making changes, minimize discord by empowering users to continue using a familiar version for a limited time.

4. Miller’s Law (People Can Remember 7±2 Items at a Time)
The average person can only keep 7 (plus or minus 2) items in their working memory.

Takeaways

Don’t use the “magical number seven” to justify unnecessary design limitations.
Organize content into smaller chunks to help users process, understand, and memorize easily.
Remember that short-term memory capacity will vary per individual, based on their prior knowledge and situational context.

Why Learning UX in 2025 is a Career Game-Changer

1. AI is Replacing Pretty UIs, Not Great UX

With AI-powered design tools generating decent UI layouts in seconds, what will set you apart? The ability to craft experiences, not just screens.

2. Companies Want Designers Who Think

No one wants a designer who just follows orders. If you understand UX principles, you’ll ask the right questions before designing.

3. UX Pays More $$$

Let’s be honest—money matters. UX designers earn more than UI designers because they solve deeper problems. Learning UX can literally boost your paycheck.

4. You’ll Design With Confidence

Ever had a developer ask, Why is this button here? and you answered, Umm... it just felt right?

When you understand UX, every design decision has logic behind it. No more guessing.

Bonus Tip: The ‘UX Spy’ Technique

Want to level up your UX thinking fast? Become a UX spy.

Whenever you use an app or website, analyze:

Why do they place buttons where they do?
How does their onboarding process feel?
What makes their experience smooth (or frustrating)?

By doing this daily, UX thinking will become second nature to you.

Where to Learn UX (Without Breaking the Bank)

Here are some solid resources to start:

NNGroup – The gods of UX research.
Laws of UX – Quick, digestible UX principles.
UX Collective – Practical, real-world UX insights.
Interaction Design Foundation – Affordable UX courses.

Final Words: Be a ‘Full-Stack’ Designer

In 2025, UI designers who ignore UX will struggle. The best designers will be the ones who combine both skills—creating stunning and functional experiences.

So, are you ready to level up? 🎮

👉 If you found it helpful or insightful, consider following me.
@dishank

"Drop your thoughts in the comments! Your feedback helps me improve and create better content.🙌"

AI to Generate Stunning Designs (UX Pilot)

Dishank — Tue, 04 Mar 2025 12:11:36 +0000

As a UI/UX designer, we’re always looking for ways to streamline our workflow, enhance creativity, and improve efficiency. The design process often involves multiple stages—brainstorming, wireframing, prototyping, and refining—each requiring significant time and effort. With the rise of AI-driven tools, designers now have an opportunity to accelerate their process while maintaining high-quality results. Enter UX Pilot AI, a powerful AI assistant designed specifically to support designers in crafting intuitive and aesthetically pleasing user interfaces.

In this post, we’ll explore how UX Pilot AI can help you improve your design process, including a step-by-step example demonstrating how to create a visually appealing and functional design using AI.

What is UX Pilot AI?

UX Pilot AI is an AI-powered design assistant that aids UI/UX designers in various aspects of the design process. It can suggest:

Design patterns that enhance usability and consistency.
Wireframes and Designs generated based on your specifications.

This tool is particularly beneficial for designers in the early stages of product development. Whether you’re brainstorming ideas, sketching wireframes, or selecting UI components, UX Pilot AI can serve as a reliable assistant, helping you save time and effort while ensuring a polished final product.

How to Use UX Pilot AI as a UI/UX Designer

Let’s dive into a practical example of how UX Pilot AI can assist in designing a mobile application interface.

Step 1: Generate a Wireframe

Imagine you are designing a fitness tracking app that focuses on user activity, progress, and personalized workout recommendations. Instead of starting from scratch, you can use UX Pilot AI to generate a wireframe based on your desired specifications.

Prompt: Generate a homepage wireframe for a fitness app that focuses on user activity tracking, progress, and personalized workout recommendations. The layout should be minimalistic and mobile-friendly.

Here’s an example of 2 Design Wireframes from 2 different Prompts That AI generated:
👉 There will be some alignment issues and other things you need to correct after generating with AI.

Step 2: Add a Visual Identity

Once the wireframe is ready, the next step is to enhance the design by adding colors and UI elements. You can instruct the AI to incorporate a particular color scheme.

Example: Apply shades of green and blue to create a fresh and motivating atmosphere.

Here’s the enhanced UI after adding colors and refining elements:

Why Should UI/UX Designers Use AI-Powered Tools?

AI-powered tools like UX Pilot AI are transforming the design landscape, allowing designers to work smarter, not harder. Here are a few key benefits:

1. Faster Design Process

Instead of manually sketching ideas and iterating on layouts, you can generate wireframes and UI components instantly. This allows you to focus on refining designs rather than spending excessive time on initial concepts.

2. Simplified Workflow

AI tools handle repetitive tasks such as color selection, layout structuring, and typography recommendations. This frees up your creative energy to focus on problem-solving and innovation.

3. Perfect for Beginners and Professionals Alike

Whether you're just starting out or have years of experience, AI tools provide valuable insights and guidance. Beginners can learn from AI-generated suggestions, while experienced designers can use AI to speed up their process and explore new design possibilities.

4. AI as a Creative Partner

Rather than replacing designers, AI serves as a co-pilot, offering suggestions, inspiration, and automation for tedious tasks. This means more time for innovation and experimentation.

Here Are 2 More Examples Of AI Generated Design I Made Using [UX Pilot AI]
E-Commerce Website for Handmade Jewelry

Personal Portfolio for a Photographer

Final Thoughts

Incorporating AI tools like UX Pilot AI into your design workflow can significantly improve your efficiency, decision-making, and creative output. Whether you're brainstorming, wireframing, or refining user interfaces, AI-powered tools help you move faster while maintaining high standards of usability and aesthetics.

Key Takeaways:

✅ Speed up the design process with AI-generated wireframes and UI components.
✅ Reduce decision fatigue by automating repetitive design tasks.
✅ Enhance creativity by experimenting with AI-powered design suggestions.
✅ Create professional-grade UI designs with minimal effort.

By leveraging AI in UI/UX design, you can transform your early design ideas into polished, professional results that not only impress clients but also enhance the user experience.

Try UX Pilot AI today and see how it revolutionizes your workflow! 🚀

👉 This is my first post! If you found it helpful or insightful, consider following me for more valuable content and upcoming masterpieces.
@dishank

"Drop your thoughts in the comments! Your feedback helps me improve and create better content.🙌"