Alright, let’s talk about a topic that’s not exactly glamorous but so necessary: organizing design files. Whether you’re in a startup scaling fast or a large organization with teams on teams, disorganized design files are like a messy closet. Sure, you know where things kind of are, but finding that one thing you need? A total time suck.

If you’ve ever spent 15 minutes opening random Figma files titled “Final_v3_Final_Final_UseThisOne.plz” (you know the type), this one’s for you.

Let’s dive into how to bring order to the chaos so your design files don’t just look good — they work for you and your team.

Step 1: Name Files Like You Mean It

First rule of design file organization: no more cryptic names! “Screen2_Draft_Final2” isn’t helping anyone, not even Future You. File names should be:

1. Descriptive: “Homepage_Wireframe_2024–11” beats “Stuff_for_presentation.”

2. Consistent: Pick a naming convention and stick to it like your reputation depends on it (because it does).

Try something like this:
[ProjectName]_[Feature/Section]_[Stage]_[Date]
Example: Firefox_SignInFlow_Final_2024-11

Boom! Anyone can tell what’s in that file without opening it.

Step 2: Build a Folder Structure That Makes Sense

Your design files need a home, and no, “Misc” isn’t it. Create folders that mirror how your organization thinks about projects. Here’s a simple example:

The idea is to group files by logical categories so teammates can navigate them without needing a treasure map.

Step 3: Use Figma Pages Like a Pro

For Figma lovers, pages are your secret weapon. Each file can have multiple pages, so use them to keep work organized within the file. For example:

• Page 1: Wireframes

• Page 2: High-Fidelity Mockups

• Page 3: Prototypes

• Page 4: Specs for Dev

It’s like having mini-drawers inside your main file drawer. Clean, tidy, efficient.

Step 4: Create a Master File for Reusable Components

Every organization needs a go-to place for components like buttons, icons, and color palettes. Enter the Master File.

This is your holy grail of design consistency. All reusable elements live here, so you’re not reinventing the wheel every time you design a new screen. Bonus: link it to your design system (if you have one), so updates cascade across projects like magic.

Step 5: Add Notes, Tags, and Descriptions

Design files are often handed off to engineers, PMs, or other designers who weren’t part of the process. Adding notes can be the difference between “Wow, this is helpful!” and “What the heck am I looking at?”

Try these tricks:

• Sticky Notes in Figma: Use them to explain why that one button is off-center.

• Layer Naming: Rename layers to something intuitive like “Primary CTA” instead of “Rectangle 72.”

• Tags in Figma Files: Use emojis or color tags for quick context (e.g., 🔧 for work-in-progress, ✅ for final).

Step 6: Archive Like a Champ

Outdated files are inevitable, but don’t let them clutter your workspace. Create an Archive folder where old projects go to retire gracefully. Use a clear structure like:

And no, don’t delete them. You’ll thank yourself later when someone asks, “What did we do for the 2023 feature rollout?”

Step 7: Document the System (So People Actually Use It)

What’s the point of a shiny new file organization system if no one knows how it works? Write up a quick guide and share it with your team. Keep it light and approachable — nobody’s reading a 20-page PDF titled “Design File Best Practices.”

Instead, try:

• A pinned Slack message with folder links and naming rules.

• A Notion page with quick “dos and don’ts.”

• A short Loom video walking through the system.

Why Bother? The Benefits Are Real

Yes, this takes time upfront, but here’s why it’s worth it:

1. Saves time: Less hunting for files = more time for actual designing.

2. Builds trust: Engineers and PMs love clean, organized files.

3. Increases adoption: When your team sees the system works, they’ll actually use it.

4. Future-proofs your work: New hires can onboard faster, and past projects become easier to reference.

TL;DR: Make Organization Your Superpower

Organizing design files isn’t glamorous, but it’s a game-changer. By creating a system that’s clear, consistent, and user-friendly, you’ll level up your team’s efficiency and collaboration. Plus, you’ll look like a total pro the next time someone says, “Where’s the final version of that mockup?”

Now go forth and conquer the chaos! Your future self (and your team) will thank you. 🎨✨

Originally posted Here

Subscribe now

Above is a screenshot of a prototype I worked on for mobile purchase funnel iterations. I work as a product designer at Medium, mostly on conversion and retention projects. I had four candidate prototypes for user tests. On one of them, I wanted the fixed payment button to change when users picked a payment method radio button: it would become a PayPal button, a Google Pay button, and so forth.

But… I went through several tutorials and didn’t manage to make other people’s advice work for my prototype. It took me a few painful attempts and some help from Figma power users to crack this. I’m putting this tutorial out there to save other designers the hassle of going through this.

Before we start

If you want to follow this tutorial step-by-step with pre-existing components, you can download or copy my Figma file here. I swapped the fonts and simplified the design so nothing would break while you play with it.

For better clarity, I’ll refer to the radio button module as “the controlling component” and the payment button as “the reacting component.”

Reminder: Figma lexicon

Step 1: Prepare Your Variants for the Controlling Component

This component is important because it will ultimately trigger the interaction for the reacting component.

In my example, the payment module is my controlling component. I want to create all the states needed for each selected radio-button in the master component.

Step 2: Prepare Your Variants for the Reacting Component

Name your variants for the reacting component’s master. For this component, spelling, spacing and case will matter. Make a note of your choices!

In my example, I capitalized “Card”, and “Disabled”. I also respected the case for “GPay” and “PayPal”. In future steps, I will need to remember those decisions.

If you nested another component in some of your variants, ensure it’s visible in future instances. Do this by selecting the frame around your variants and then clicking the “+” icon, which is visible when you hover over “Properties.”

Step 3: Create a Variable

The variable is what will allow both components to communicate.
Make sure no element is selected by hitting “esc.” Then go to the Design panel of Figma and select “Local variables”.

From there click on “Create variable” and create a string variable for your reacting component (here in my example it’s a button so I’m calling it “Button state”).

Give the value a consistent name with the component’s default state variant — again, spelling, spacing, and case consistency matter. Think like a programmer, otherwise, Figma won’t connect the dots! Ultimately this variant will control your reacting component’s state and allow you to display the relevant variant.

Step 4: Prototype Your Controlling Component

Switch Figma to the prototype panel and work on your master controlling component and its variants.

In my example, I added interactions for radios on all variants to link them to the right state variant while commanding the variable name for the reacting component, so it could also receive the instruction to change state.

To that effect, for each radio button, I created 2 interactions as follows:

Pro tip: Don’t forget interactions can be copied and pasted, it’s a huge time-saver in this situation as you will need to create them for all radio buttons on all the variants.

Step 5: Bind Your Variable and Your Variant Status

Now, leave your master components and build your screen in a frame with instances of both components. Select your reacting component instance. You want to bind it to your variable by clicking on the bolt and selecting the variable you created. Now this component “knows” that the displayed variant state needs to correspond to your variable name as it changes.

Voilà! Your prototype should work!

But… what happened? Why is it working? When you click on your controlling component, its state changes. But because you bound your variable to the state of your reacting component, your interaction renaming the value of your variable also renames your reacting component displayed variant, allowing it to update simultaneously.

Originally posted Here

Subscribe now

Imagine an app suddenly starts suggesting irrelevant products, or a chatbot starts spouting misinformation. These mishaps are more than technical glitches — they could signal a disconnection in the relationship between user experience and the data shaping today’s AI models.

Users are entering prompts when interacting with AI models, providing instructions and context, and these prompts are serving as data to shape the outputs. Current experiences force end users to figure out most of the structure and information needed, which causes a paralyzing cognitive load. Let’s face it, most people don’t know what to do or ask for when interacting with an AI-powered chat. The responsibility needs to be shifted to the teams — particularly UX teams — designing these models.

On the other side, UX as a discipline has been having its own identity crisis, debating how the future of design would look like in an AI world. The answer to this uncertainty has been hiding in plain sight — it’s the data (and the decisions around it). And while data might initially seem outside a designer’s comfort zone, when framed through the lens of context and user intent, things start to fall in place.

Humans and models need context to make sense of situations

AI models, like humans, are limited by the context they have. If a question lacks clarity, the answer won’t be helpful. Just as clear communication with clients requires design briefs, providing AI models with the right context gives them the information they need to generate meaningful responses.

UX teams must be integrated in the AI model training process.

It’s far more difficult to fix problems after the output is in the interface. Sure, the user would be able to manipulate it to a point, but models should generate the best possible outcome first. Prioritizing quality data over quantity is also crucial — bad data leads to bad results (‘garbage in, garbage out’). Teams must proactively work to mitigate bias, privacy concerns, and misalignment with user values before it is ever shown to a user.

Data in the training process

The context used to shape models can have many forms. Engineering teams are using all kinds of existing data to train models in company knowledge, from marketing brochures to in-depth documentation.

However there are some types of data formats that are created exclusively for AI training (training, tuning, optimizing), targeting specific knowledge and behaviors. This is where the domain of UX teams needs to shine, and it requires close collaboration with partners. A few examples :

• Prompts: Prompts are the cornerstone of AI training for UX teams. The quote “Prompts are just a pile of context” from Amelia Wattenberger is so simple and so true. Optimizing our AI models by breaking down tasks (or clusters of tasks) into golden prompts and providing output examples is now part of a ux practitioner’s job description. The process of creating, annotating, and evaluating these prompts for training is both complex and essential — definitely a topic for its own article.

• Data sets: Data sets shape how AI models “think”, and they are used for training and tuning. They can reflect our company’s expertise, personality, and values. In some cases it could be created by humans, in others we could use synthetic data, created by AI itself. UX needs to think about the intent of the data set, how they are created, curated, and aligned with specific use cases.

• Frameworks and instructions: Like a compass for AI models, they ensure the output stays aligned with our goals. These can be broad principles (like Anthropic’s constitution), detailed instructions for answering user questions, or even a list of topics where the model needs to exercise caution.

• Feedback and evaluation guides: To ensure our models are effective, teams continuously evaluate them throughout training. There needs to be a shared definition of what constitutes a good output, documented and readily accessible, to keep everyone aligned overtime.

When creating all that data, it’s difficult to do it at scale. Models need vast amounts of quality content, and many teams are looking for solutions to expedite this process. Synthetic data, or training data created by an AI model, can help bridge this gap. Third party vendors are also helping to deliver data sets and prompts. However both options need UX teams to create guidelines, instructions, and examples for their deliverables. They also must be reviewed, or spot checked, before using them in the models.

Areas to explore

Crafting high-quality data presents numerous challenges, especially when aligning it with specific use cases, tasks, and the model skills required. To ensure success, UX teams must reimagine data design processes and seamlessly incorporate them in the training. These are two areas where I personally see much need for experimentation:

• Scenario frameworks: Creating golden prompts is still very new, and having scenarios that frame different situations can help to uncover all possible variables. Researchers can help propose new dimensions aligned with specific use cases, expediting the creation of prompts. PAIR at Google is doing a great job starting this conversation, designing for the opportunity not just the task. A tool where scenarios, instructions, and AI generated prompts coexist would be very beneficial for UX teams.

• Human engagement risks: A term by the trailblazer Ovetta Sampson calls everyone involved in AI development into action, including the responsibility of providing data that mitigates social-cultural biases from showing up in model outputs. AI has a level of potential risk that is unprecedented, and marginal use cases can no longer be ignored in the name of shipping products fast. The conversation needs to be up front and center, a main focus of the decisions and data strategy. It might look like adversarial training, it might be a collection of risk scenario frameworks or any other solution. The gravity of a designer’s responsibility has never been greater.

If your team is tackling challenges in these areas, please share your work! True industry innovation thrives in generosity and collaboration.

It’s time to add ‘how AI works’ to the UX teams skill set

UX teams need to insert themselves in the training of AI models, becoming key partners during the model lifecycle. A discipline that thrives at the intersection of user needs, business goals, and technology is critical at this time.

Everything that is model related relies for the most part on engineers for their technical expertise. However, with the way AI has disrupted the classic command-based processing (must-read article AI: First New UI Paradigm in 60 Years from Jakob Nielsen), in some instances teams are delegating a part of the user experience to technical partners. As wide as their skills are, they don’t always have the in-depth use case context that AI models need.

In The Rise of the Model Designer, I discuss the growing need to bridge interface design and model training, arguing a new UX figure is emerging. Independently of role definitions, understanding how training the models affects the output is now part of our design process. We need to shift our focus and shape both the interface and the model itself.

There’s a critical gap in UX team education on AI training and how to get involved. Most of the available training is either too technical, or just surface level and lacking depth. Some of us are trying to bridge this gap, but striking the right balance is hard, and in many cases resources cannot be shared broadly.

Investing in targeted education for all product-related roles is crucial for innovation. UX teams have the power to unlock the full potential of AI models — with a little help from a prompt.

Originally posted Here

Subscribe now

Bill Gates once said, “I choose a lazy person to do a hard job because a lazy person will find an easy way to do it.” This text is all about being that “lazy” person! So, let’s jump right into Figma and learn how to effortlessly create a Figma prototype.

Here’s the issue: whenever we’re designing, prototyping, or building prototypes in Figma, we end up with hundreds of prototype links scattered everywhere. If we ever need to make a change, we have to update it in multiple places, which quickly becomes chaotic. In this text, I’m going to tell you to show you how to reduce 80–90% of that manual work through automation, making your prototyping smarter and more efficient.

Let’s start by reviewing our design. We have a homepage design with a sidebar and five pages: Dashboard, Projects, Calendar, Documents, and Reports. If I zoom into the sidebar, you’ll see it reflects this structure.

Now, here’s how most people set up this design: they place the sidebar on each page. So, they copy and paste the sidebar onto every page and then manually link each menu item (Dashboard, Projects, etc.) to its respective page. It sounds straightforward, but it becomes time-consuming if you want to link a page multiple times or change a link later. For example, if you wanted to link Projects to Calendar instead, you’d have to update that link five times on each page. This is tedious, inefficient, and prone to errors.

Here’s a more efficient, “lazy” approach that Bill Gates would probably hire us to implement! Start by removing the sidebar from each page. Then, instead of manually linking every instance, convert the sidebar into a component. To do this, press Command + Option + K or click the diamond icon to turn the sidebar into a component. Now, you can link each menu item within the component (e.g., Dashboard to Dashboard, Projects to Projects, etc.).

Next, insert the component as an instance onto each page. Since the sidebar is now a component, any changes to its links will apply across all instances. For example, if you decide to change the link for Reports to point to Documents, it will automatically update on every page.

This approach can save you an incredible amount of time by reducing 80–90% of the manual work.

To see it in action, let’s preview this. When I click on Projects, it navigates to Projects; Calendar goes to Calendar; and so on. Now here’s the time-saver: if we change Reports to link to Documents instead, every instance of that sidebar will instantly reflect the update.

Hopefully, this trick helps you cut down on manual work in Figma!

Originally posted Here

Subscribe now

If you are seeking for approaches to to achieving a well-balanced, visually appealing colour scheme, I would like to recommend the 60–30–10 rule. This approach provides a quick, reliable framework for organising colour that both harmonises and energises an interface. By using 60–30–10 rule, designers can create a sense of balance and focus that enhances the aesthetic of user interfaces.

The 60–30–10 rule is one of the simplest guidelines for creating visually appealing and balanced designs. It provides a clear structure for colour distribution, making it easy to apply to any interface or design layout. With this rule, 60% of colour proposition should feature the primary colour, setting the overall tone and creating a cohesive look. Then, 30% is dedicated to secondary colours, adding supporting the primary colour without overpowering it. Finally, the remaining 10% is reserved for accent colours, adding a pop of contrast to highlight important elements and draw users’ attention.

In my perspective, there are two straightforward ways to effectively apply the 60–30–10 rule to a user interface.

1. Conventional Approach

• 60% allocation for dominant colour — giving the interface a bold, branded feel.

• 30% would be used as secondary colour — apply to smaller areas to provide contrast and interest while balancing the dominant colour.

• 10% remains for an accent colour — highlights essential elements, such as call-to-action buttons or alerts.

2. Flexible Approach

In applying the 60–30–10 rule, if the secondary colour is a neutral tone and provides strong contrast with the dominant colour, I often swap the dominant and secondary colour. This way, the secondary (now the dominant) colour occupies 60% of the interface, giving the design a balanced and clean look, while the original dominant colour still takes up 30% as a secondary colour.

Even with only 30% allocation, the dominant colour maintains brand presence, standing out clearly and representing the brand identity effectively within the design.

• 60% to the secondary colour as the background — provides a clean, cohesive foundation for the interface.

• 30% to the primary colour — to primary elements, such as components, illustrations, cards and navigation.

• 10% is reserved for accent colours — draws attention to specific details like icons, buttons or highlights.

When applying the 60–30–10 rule, you don’t have to measure colour percentages with exact precision. Instead, it’s more about keeping the general balance in mind: 60% 30% and 10%.

Hope this short article inspires you to create stunning and harmonious user interfaces.

Following me:

https://www.dinhhuy.design/

Originally posted Here

Before diving into the practical application of UIUX, it is vital to understand the Gestalt principles, where psychology meets design to create visually stunning and impactful compositions. It consists of six principles: proximity, similarity, closure, continuity, figure-ground, and symmetry. Now, let me give you a summary of these six principles.

1. Proximity

Objects placed close together tend to be viewed as a group. This principle is frequently applied when designing layouts, where similar components are grouped to convey an overall idea.

2. Similarity

Similar objects appear to belong together. Whether it’s color, shape, or size, elements with similar characteristics are regarded as belonging to the same group. This principle aids in the development of visual hierarchy and the effective organization of information.

3. Closure

For us to see complete shapes or forms, our minds often fill in the gaps. Designers frequently use this principle to include incomplete shapes, leaving room for interpretation and stimulating viewers’ imaginations.

4. Continuity

Elements arranged in a continuous line or curve seem to be more associated than those with sudden alterations in direction. This principle directs the flow of visual elements, ensuring easy navigation through a design.

5. Figure-Ground

Visual elements can be separated by our perception as being in the foreground and background. Designers can keep a composition balanced while drawing the viewer’s attention to the focal point by adjusting size, color, and contrast.

6. Symmetry

When compared to asymmetrical objects, symmetrical ones are viewed as more balanced and aesthetically beautiful. Symmetry is a common tool used by designers to foster harmony and order in their compositions.

Originally posted Here

If you have a complex, sophisticated product and you want it to engage users and solve their problems, what you need is proper onboarding.

Onboarding is essentially the first encounter with a user that will either create a long-term relationship or leave a negative impression of the product. It’s important to make onboarding simple, intuitive, and easy to understand so that the user enjoys it and doesn’t feel inept and confused.

The Outcrowd team has been creating designs for various SaaS products for quite some time now, and we’ve learned a lot. Hopefully, our experience will help you make your onboarding functional and user-friendly.

What makes onboarding so important

Let’s say a user interacts with your product for the first time. Unlike you, they know nothing about how any of it works or what should be done to quickly achieve their goals. The onboarding task is to guide the user through all the necessary steps, help them adapt, familiarize themselves with all the functions, and appreciate the product within the first few minutes.

Well-designed onboarding helps to:

• Lower the threshold of entry for new users;

• Make it more likely that the user will stay with the product and use it regularly;

• Increase user satisfaction;

• Reduce the number of support requests.

Basic rules of good onboarding

The main idea is helping the user without overburdening them with unnecessary information. So the key principles are minimalism and clarity. If something can be explained concisely, go for it. Ideally, many actions should be clear without explanation. By doing research for different platforms, we at Outcrowd have come up with some basic rules:

1. Minimize barriers to entry

A user shouldn’t start their journey by filling out a tedious form or following complicated steps. Ideally, you should give the user the opportunity to try the product as soon as possible. Minimal data entry is not just a trend: it helps retain attention. In one of our projects, we suggested only entering an email and password to start, and leaving all other information, such as full company details, for later. This significantly reduced the number of users who dropped out at the very beginning.

2. Phased onboarding

Imagine your SaaS product as a huge city and your new user as a tourist visiting it for the first time. Onboarding should be their guide. A guide doesn’t spill everything he knows in one breath. Instead, break the process down into smaller steps that gradually immerse the user in your product.

In a project for a large SaaS company, we used a step-by-step guide with the ability to skip steps or return to them later. The user could see what to do next at any point, and if something was unclear, there was always a “Show Again” button. This allowed new users to familiarize themselves with the product without undue stress.

3. Interactive elements

The classic text-based tutorial doesn’t work anymore. People want to see and feel instead of just reading. We at Outcrowd try to incorporate interactive elements into the onboarding process as much as possible: hints within the interface, pop-ups with useful tips, and other visual elements that tell the user what to do next. It’s important to show the benefit of the product through real-world experience, not just written instructions.

In one of our projects, we used a method where the user immediately starts acting in the product: they were asked to perform a few basic tasks that are part of actually working on the platform. This allowed people to learn the product faster and feel confident.

4. Personal approach

Automation aside, a human approach to onboarding always wins. If at all possible, add personal elements to the process. It could be a personalized greeting, an offer of help from a live person via chat, or even a welcome video from the team.

One of our clients implemented a personalized video welcoming system, where each user received a short video explaining how best to get started with the product. This added an element of care that greatly improved the onboarding experience.

5. Guiding to the goal

Onboarding should never be an end in itself, but rather a means to an end. At each step, the user should understand what task they are accomplishing. For example, instead of “Fill in your profile details,” put “Let’s customize your profile to make your business look professional right away.” When we worked on a project management platform, we tried to link every action to an actual benefit, so that the user wouldn’t feel that they were merely filling out another form.

6. UI design features

1. Structure and hierarchy

Aim to structure your content in a logical way. Visually emphasize the main elements while sidelining or hiding secondary elements. This will help users navigate more quickly.

2. Aesthetics and simplicity

A minimalistic design with a harmonious color palette will reduce visual noise and make the interface pleasant. This is especially crucial for complex products.

3. Consistency

All interface elements should be uniformly designed so that users can easily grasp the logic of the product.

4. Feedback

Give users visual confirmation of successful actions through animations or messages so they know they’re moving in the right direction.

Successful onboarding case studies

In one of our projects for a SaaS project management platform, we suggested changing the approach to onboarding. Instead of classic instructions, we added interactive tasks that allowed the user to act in a real environment. For example, the user would immediately create their first project and add tasks. This significantly increased engagement and also helped reduce the number of support requests.

Here are two successful case studies that illustrate how the Outcrowd team implemented functional and intuitive onboarding:

Fitonist is a mobile fitness app where onboarding focuses on personalizing the user experience. The onboarding included several key questions about the user’s goals, which made it possible to suggest customized workout plans. Such an approach ensured an easy start and motivated users from the get-go through intuitive UX design and visually appealing charts. Read more about this case study here.

FlipX is a real estate investment platform. In this project, the main challenge was to create a simple and clear user interface for a complex process. The Outcrowd team developed an onboarding structure that helped users familiarize themselves with the platform without much hassle. Special attention was paid to the interface and logic to ensure a smooth experience for new users.

How to avoid onboarding mistakes

Onboarding mistakes can cost you your users. Here are the most common mistakes and our suggestions on how to avoid them:

1. Information overload

Do not dump all the product features on the user at once. In one of our early projects, we mistakenly included too many steps at the start, which caused users to lose interest. To avoid this, create a careful map of steps to be taken, so the user gets acquainted with the features gradually.

2. Lack of feedback

The user needs to understand what they’re doing right and where they need help. Use visual confirmations of successful actions, as well as tips when something goes wrong.

3. Too many steps

If the onboarding process seems endless, users may abandon it halfway through. This is especially common with more complex platforms. The solution is to put the important stuff first and leave all the minor settings for later.

4. Lack of support

Even the best onboarding is no substitute for real support. Make sure the user always has the option to ask questions or get help, whether through a support chat or a knowledge base.

Conclusion

Onboarding is an important stage of interacting with the user. Unless it’s done right, users will have a hard time getting to know the product and won’t use it in the long term. The basic principles are minimalism, interactivity, and personalization. If your onboarding helps the user achieve their goals without undue stress, then you’re on the right track.

Hopefully, these tips will help you create onboarding that not only makes the user’s life easier but also increases loyalty to your product. If you need help with onboarding design and development, the Outcrowd team is always ready to offer solutions.

Originally posted Here

It got me thinking — what if we could name those zip files before downloading them? It’s a tiny tweak, but maybe it could smooth things out. Curious, I decided to prototype an idea. Here’s a quick look at the problem, the solution I came up with, and how it might fit into Figma’s design flow.

How It Works Today

Let’s start with a quick look at how Figma handles batch exports right now

• You select multiple files.

• Figma packages them into a zip file and names them after the project.

• That’s it — zip file downloaded.

Simple, sure. But when you’re working on the same project for weeks and exporting files repeatedly, it’s easy to lose track of which zip is which.

A Little Experiment

What if you could name your zip file before downloading it? No more wrestling with a string of identical, auto-generated names — just the freedom to label your exports exactly how you want.

What I came up with was simple — name (or don’t name) your selected group of assets directly from the export panel.

• Select your assets and make your way to the export panel.

• Edit the default file name or leave it as is.

• Click export and the zip file is downloaded with your custom name.

Why Explore This?

For frequent exporters — like teams delivering multiple rounds of assets or revisions — this feature might:

• Save time by skipping manual renaming.

• Help keep files organized without extra effort.

• Make finding the right zip later much simpler.

Prototyping the Idea

Creating the prototype was a fun challenge. I wanted to keep it lightweight, optional, and true to Figma’s clean design system. Here’s how I approached it:

1. Identified the problem from personal experience (and shared frustrations).

2. Keep the solution simple: an optional naming step with a pre-filled field.

3. Built a prototype in Figma itself, refining it with feedback from other designers.

What Do You Think?

I love what’s being done at Figma and whether we see something like this implemented in the future or not, I’m glad I got to scratch this itch — exploring a small enhancement that could make a big difference.

Let me know if you’ve thought of this too or what other wacky ideas haunt your sleep.

Till next time 👋🏾 …

Originally posted Here

What Are Variables in Figma? 🐙

Figma variables are reusable, adaptable values that you define once and apply across your project. Variables can contain information like colors, font sizes, spacings, and even theming details. When a variable is updated, every place it’s used in your design changes automatically.

In simple terms, variables are like “smart labels” that you can attach to design properties. Want to change the main button color across all screens? Just update the color variable, it’s that easy.

Why Do Variables Exist? ⏳

Variables were introduced to solve a few key problems that designers commonly face:

1. Maintaining Consistency: For large projects, it’s crucial to keep colors, font sizes, and spacings consistent across hundreds of screens. Variables make this easy by allowing centralized control.

2. Saving Time: Instead of updating each design element manually, variables let you make one change that cascades across the entire project. This saves loads of time, especially with complex designs.

3. Theming and Adaptive Design: With variables, you can quickly switch between themes (like dark and light modes) or make designs responsive to different screen sizes.

4. Aligning with Development: Developers already use variables in code, so this makes design-to-development handoff easier. Everyone’s working with the same values, reducing errors.

How Do Variables Work in Figma? 🪄

Variables are organized into Collections and Modes to make adaptive design easy to manage.

Collections

• Collections are groups of variables organized by function, like “Colors,” “Text Styles,” or “Spacing.” For example, you might have a “Brand Colors” collection and a “Secondary Colors” collection.

• This organization keeps everything tidy and makes it easy to locate specific variables, even in a large project.

Modes

• Modes let you create variations within a collection — think of them as different “versions” of the same set of variables.

• For example, a “Colors” collection might have two modes: Light Mode and Dark Mode. Each mode contains the same color names but with different values, so switching from light to dark mode is seamless.

Applying Variables

• To use a variable, select an element, like a shape or text, and choose the variable to link it to. Now, when you update the variable, any element using it will change automatically.

When and Why Should You Use Variables? 🤔

When to Use Variables

• Theming: If you’re creating designs with multiple themes (like a light and dark mode), variables are perfect. Set up modes in your color collection, and you can toggle themes with ease.

• Responsive Design: Variables make it easier to adjust layouts for different screen sizes, letting you define sizes or spacings that adapt based on the screen.

• System Maintenance: If you’re building or managing a design system, variables keep things consistent across multiple screens or projects without needing frequent manual updates.

Why Use Variables?

• Easy Updates: Change one variable, and your whole project updates. This means less work and a faster design process.

• Consistency: When multiple designers are working on a project, using variables ensures everyone sticks to the same color palette, fonts, and other design elements.

• Scalability: Variables make it easier to expand a design system without introducing errors or inconsistencies.

• Adaptive Design: Responsive interfaces and themes become manageable with variables, as you only need to change values in one place.

Related Concepts 🔮

Figma variables integrate seamlessly with other key design elements in Figma, making your design process even smoother.

Components and Variants

• Variables bring additional flexibility to components and variants. You can apply variables to different properties of a component, like background colors or font sizes, making each variant easy to adjust.

Styles

• Styles in Figma help save and reuse properties like color, text, and effects. Variables enhance styles by making them adaptable. For instance, you can link a style to a color variable, so changing the variable updates every instance of that style across the project.

Design Tokens

• Variables work similarly to design tokens in development. They act as a bridge between design and code, where variables from Figma can translate directly to values in code. This streamlines the design-dev workflow and keeps everyone on the same page.

Variables vs. Styles: What’s the Difference?

Both styles and variables improve design consistency but serve different purposes:

• Styles are fixed and best for static, unchanging values, like a fixed color or text style you’ll use repeatedly.

• Variables are adaptable and ideal for values that need flexibility, like themes or values that should change across devices or contexts.

Variables in Figma are a game-changer for building adaptable, scalable, and consistent design systems. By using them, you can control key aspects of your design from a single place, making updates fast and keeping your entire project cohesive. Whether you’re managing a single theme or juggling multiple, variables save time and reduce errors, transforming the way you work.

Ready to try variables in Figma? Start with a small project and see how they improve your workflow. You’ll find that variables make designing not just faster but a whole lot easier!

Originally Posted Here

If you’re a UX designer, you’ve probably heard a wide range of opinions about what makes a great portfolio. Some say to keep it simple, others swear by creativity and visuals. One designer even claimed that a UX portfolio should be “boring” to look at. But is that really the way to go? Spoiler: Not quite. While it’s true that UX portfolios need to focus on usability and process over pure aesthetics, they definitely don’t have to be boring.

In this article, I’ll break down what actually makes a portfolio effective, memorable, and professional — without the risk of putting a recruiter to sleep. Think of this as your go-to guide for creating a UX portfolio that balances function and personality, with insights into what hiring managers want to see.

1. Showcase Your Design Process, Not Just the Final Product 🕵️

One of the biggest portfolio mistakes is showing only the polished final screens. UX isn’t just about pretty interfaces; it’s about solving problems. Hiring managers want to know how you approach these problems and the steps you take to find solutions.

What to Include:

• Problem Statements: Begin each project with a clear problem statement. What was the challenge? This could be something like “improving user onboarding” or “increasing retention in the checkout flow.”

• User Research: Describe the research methods you used, whether user interviews, surveys, or competitive analysis, and highlight key insights that informed your design decisions.

• Iterations and Testing: Include early wireframes, prototypes, and examples of how your design evolved based on user feedback or testing. This shows that you’re willing to adapt your ideas based on real data.

• Reflection: Wrap up each project by reflecting on what worked well, what didn’t, and what you learned. This part may seem small, but it’s a powerful indicator of your growth as a designer.

Hiring managers love portfolios that tell a story through each project. If your portfolio shows that you understand and embrace a user-centered design process, you’ll stand out as a thoughtful and thorough candidate.

2. Keep the Layout Clean, Simple, and Intuitive 🎨

A portfolio is, in many ways, a UX project in itself. Imagine a hiring manager visiting your portfolio — if they can’t easily navigate it, they’re going to assume you might struggle with creating user-friendly interfaces in real projects. The design should be easy to navigate, uncluttered, and focus on showcasing your work, not overwhelming viewers with visuals.

Design Tips for Usability:

• Simple Navigation: Use a straightforward layout with clear labels. Categories like “Case Studies,” “About,” and “Contact” should be visible from the top-level menu.

• Scannable Text: Make sure your portfolio is easy to scan by breaking up long paragraphs, using bullet points, and bolding key points.

• Consistent Design Language: Stick to a consistent visual style throughout. Use the same typography, color palette, and spacing for a cohesive experience.

• Responsive Design: This might seem obvious, but your portfolio must be mobile-friendly. A recruiter or hiring manager could be viewing it on any device, so don’t leave them pinching and zooming.

A clean, minimalistic layout doesn’t mean “boring” — it means professional and intuitive, making your work easy to access and digest.

3. Balance Visual Appeal with Functionality 🧞‍♂️

Visual appeal doesn’t mean going all out with animations and complex graphics, but it doesn’t mean settling for boring, either. You can (and should) add visual interest subtly and strategically. A visually appealing portfolio helps showcase your design sensibility without overshadowing your work.

Subtle Enhancements to Make It Stand Out:

• Microinteractions: Small animations on hover states, buttons, or transition effects can make the site feel polished and engaging.

• Sophisticated Color Palette: Choose a restrained, professional palette, but don’t be afraid to add an accent color to highlight headings or buttons.

• Typography: A good mix of fonts can add a touch of personality. Try a strong, distinctive typeface for headings paired with something clean and readable for body text.

These enhancements keep your portfolio engaging without overwhelming the viewer. Aim for simplicity and elegance — this way, you’re still the “main character,” not the “special effects.”

4. Curate Your Projects Carefully 🔮

Here’s a quick tip: You don’t need to include every project you’ve ever done. Less is more. For a UX portfolio, 3–5 strong, well-documented case studies are far more impressive than a long list of every project you’ve worked on. Focus on projects that showcase your strengths, skills, and unique problem-solving abilities.

Tips for Curating Your Case Studies:

• Show Variety: Choose projects that represent different aspects of UX, such as user research, wireframing, prototyping, or usability testing.

• Tell a Story: Approach each case study as a story with a beginning, middle, and end. Walk the viewer through your design journey, explaining your approach and the choices you made along the way.

• Highlight Impact: Whenever possible, include real results. Metrics like “20% increase in engagement” or “40% drop in bounce rate” can be extremely compelling.

By curating a few strong projects, you’ll avoid overwhelming your audience and make sure every project leaves an impression.

5. Add a Personal Touch with an “About” Section 🪆

Your “About” section is where you can let your personality shine through. UX design is a human-centered field, and hiring managers often look for designers who have empathy, passion, and a genuine interest in improving user experiences.

What Makes a Strong “About” Section:

• A Brief Introduction: Summarize your background, skills, and UX philosophy in a few sentences. This isn’t your life story — think of it as your “elevator pitch.”

• Professional Photo: Including a professional photo adds a friendly touch and helps humanize your profile.

• Call to Action: Invite viewers to reach out. Include an email link or a contact form, making it easy for hiring managers to get in touch.

A personal “About” section reminds viewers that there’s a real person behind the work, adding a layer of relatability to your portfolio.

6. Show How You’ve Grown as a Designer 📈

One of the most impressive traits in a designer is a growth mindset. Your portfolio doesn’t have to be filled only with “perfect” work — it should show how you’ve grown over time. If you’ve taken on different roles or responsibilities, mention that progression. This helps hiring managers see your development and understand how adaptable you are.

Ideas for Showing Growth:

• Reflections on Each Project: Add a “What I Learned” section at the end of each case study to show how you’re constantly improving.

• Skill Development: Use your “About” section to mention new skills, tools, or techniques you’ve picked up recently.

• Feedback Loops: Show instances where you responded to user or stakeholder feedback, emphasizing that you’re adaptable and open to input.

7. Create a Strong First Impression with Your Homepage 📇

The homepage of your portfolio should grab attention immediately but keep it simple enough that viewers want to explore further. This is where you introduce yourself, your strengths, and maybe even show a snippet of a recent or favorite project.

Elements for a Compelling Homepage:

• Tagline: A brief tagline that encapsulates your approach or area of focus (e.g., “UX Designer Specializing in User Research and Problem Solving”).

• Hero Project: Consider featuring one of your best projects on the homepage to give an instant glimpse of your skills.

• Clear Call to Action: Make it easy for viewers to start exploring your work with a button leading to your case studies or contact info.

A memorable first impression can make the difference between a recruiter clicking away or staying to explore more.

Why “Boring” Isn’t the Goal for Your UX Portfolio

Ultimately, a UX portfolio that’s too “plain” can risk blending in with others and may not fully communicate who you are as a designer. Remember, hiring managers are looking for portfolios that reflect the qualities needed for UX design: empathy, problem-solving, clarity, and creativity. By focusing on structure, story, and subtle design enhancements, you can create a portfolio that’s polished, professional, and totally “you” — without the “boring.”

Key Takeaways 🪄

How to Build a UX Portfolio That Gets Noticed

1. Show Your Process: Go beyond end results to show the thinking behind each project.

2. Prioritize Usability in Your Layout: Keep it clean, simple, and easy to navigate.

3. Add Visual Appeal Thoughtfully: Use subtle enhancements that don’t overshadow your work.

4. Curate 3–5 Strong Case Studies: Quality over quantity will make the biggest impact.

5. Be Human: Add a friendly “About” section to show who you are.

6. Show Your Growth: Reflect on each project and demonstrate how you’ve improved.

7. Make a Memorable Homepage: Grab attention but keep it professional and focused.

With these tips, you’ll have a UX portfolio that’s far from boring and exactly what hiring managers want to see. So get started, and make your portfolio a showcase of you — your process, your personality, and your skills as a designer.

By following these strategies, your portfolio will feel thoughtful and impactful. Good luck, and may your future hiring managers be hooked from the first click!

Originally posted Here

As a visual designer, I’ve learned that it’s not always the big, bold changes that leave a lasting impression — sometimes, it’s the tiny little details that make all the difference. And when it comes to designing intuitive, delightful experiences, micro-interactions are the secret sauce.

You’ve seen them. Maybe you didn’t notice them at first, but once you start paying attention, you can’t unsee them. They’re the subtle animations that happen when you hover over a button, the little sound that plays when you make a selection, or the smooth transitions that make an app feel alive. It’s these small design choices that turn an ordinary interaction into something memorable.

What Exactly Are Micro-Interactions?

Micro-interactions are the small, single-purpose interactions that occur when we use a digital product. Whether it’s an app, a website, or a digital ad, micro-interactions guide users through tasks and provide feedback. They are designed to make the experience smoother, more intuitive, and — dare I say — fun!

Think about it: when you click a heart icon to “like” something on Instagram, and it pulses for a second before filling with color — that’s a micro-interaction. It’s simple, yes, but it makes the action feel more satisfying and reinforces your engagement.

Why Micro-Interactions Matter ?

As a designer, I’ve come to realize that micro-interactions are an essential part of user experience. They help with:

1. Providing Feedback: Users want to know that their actions are being noticed. A subtle animation when clicking a button confirms that the action was successful.

2. Enhancing User Flow: Smooth transitions between pages, or a soft bounce when a user hovers over an element, helps them navigate an app or website more easily.

3. Building Personality: Every brand has its own “voice” and personality. Micro-interactions can bring that voice to life. Whether it’s a playful animation or a sleek, minimalist effect, the way a product responds to a user says a lot about the brand.

4. Creating Delight: Let’s face it — users love feeling special. A little confetti when they complete a task, or an animation that reveals new content, adds that “wow” factor to an otherwise mundane experience.

The Power of GIFs: More Than Just Fun Animations

In my current role, I’ve had the chance to incorporate GIFs into everything from product newsletters to client announcements. These little loops of magic are a great example of how micro-interactions can be expanded to add movement and energy to a design.

For instance, in our product newsletters, I created GIFs that show off new features like our AI chat function. Instead of relying on static images or long paragraphs, GIFs make the explanation quick and fun, offering a visual demonstration that grabs attention. It’s like turning a dry product update into something your users actually want to watch!

And when it comes to client announcements, I designed GIFs in a 16:9 ratio, perfect for social media sharing. Now, clients can share their achievements with us in a lively, branded way, and even tag us in their posts. It’s a win-win!

How Micro-Interactions Transformed Our Design

When I first joined the team, there was a noticeable lack of these tiny design touches. I immediately set out to fill that gap — adding micro-interactions to buttons, transitioning elements, and yes, GIFs that breathed life into otherwise static content. The result? A website and products that felt more engaging, intuitive, and human.

The feedback from both the founders and clients has been fantastic. People are noticing the polished, professional vibe of the design — and the subtle touches of fun that make the user experience feel uniquely “us.”

In Conclusion: Embrace the Small Stuff

In the world of design, it’s easy to get caught up in the big decisions: layout, color schemes, typography. But let’s not forget the power of the little things. Micro-interactions and GIFs aren’t just fluff — they serve a purpose, whether it’s guiding users, enhancing engagement, or building a brand personality.

So next time you’re working on a project, consider adding that tiny animation, that playful hover effect, or that little congratulatory GIF. Trust me, your users will thank you for it — and you might even catch them smiling as they interact with your design.

Originally posted here

Illustration has never been my strong suit. Designing user interfaces, experiences, and products? No problem. But creating illustrations that perfectly reflect a brand’s unique style? That’s another challenge.

After three years as a designer at Lemonade, working on web and mobile products, I gained a deep understanding of the brand’s distinct visual language: clean lines, a minimalist color palette, and that unmistakable pop of vivid pink. This got me wondering — could Midjourney and today’s AI capabilities actually fill in my gap in illustration skills? Could I finally bring my vision and design ideas to life on my own, without needing a professional illustrator? With that question in mind, I decided to dive in and test it out for myself.

As I began experimenting with AI-driven illustration, I couldn’t ignore the ethical questions this choice might raise. Could AI tools like Midjourney impact job security for professional illustrators? For me, the decision to use AI wasn’t about avoiding the costs of hiring talent but about exploring how AI could complement my creative process, especially in the initial stages of visual experimentation. My goal was to see if AI could help streamline parts of the workflow — like quickly visualizing ideas or iterating on brand consistency — while still appreciating the unique skills and depth that only a professional illustrator can bring.

The challenge of achieving brand consistency

Achieving true brand consistency with AI involves more than just typing in a prompt — it’s about capturing the subtle details that reflect the brand’s core identity. Lemonade’s illustration style may seem straightforward at first glance, but designers know that simplicity demands precision. It’s a style built on clarity: minimalist lines, grayscale tones, and that unmistakable pink accent. Together, these elements create a look that’s instantly recognizable.

Directing Midjourney to think in brand language

1. Analyze existing brand illustrations: I used ChatGPT to create a foundational prompt by examining a variety of official illustrations, paying close attention to line quality, spacing, proportions, and color use. To keep the prompt simple, I decided to leave out pink initially, knowing it could be added later without confusing the AI.

2. Select a reliable, iconic object for prompt testing: I selected an iconic object — a Mini Cooper. Its unique structure allowed me to see how well Midjourney could capture clean lines and simple, recognizable shapes. Using this as a reference helped me evaluate each prompt adjustment without introducing too many variables. I recommend choosing an object you’re thoroughly familiar with, so you can easily spot any deviations from its true form.

3. Refine through iteration: While Midjourney successfully captured the style for the Mini Cooper, other objects like buildings or animals lacked consistency. To address this, I refined the prompt with a focus on specifics like composition — how each illustration should interact within its space, considering curves, relationships between objects, balance, and angles. These refinements helped align the illustrations with the brand’s unique perspective, making each object feel cohesive and purposefully positioned.

To further enhance consistency, I incorporated the — sref command with a range of official illustrations as style references. These included examples of broad structural shapes, rounded forms, depth, architectural elements, and line breaks. This combination enabled the AI to achieve a more unified brand look across diverse object types and forms.

Achieving brand precision, solo

After several iterations, I developed a powerful, versatile prompt that captured the style precisely, essentially illustrating how each object would appear in the brand’s visual language. This prompt became a foundational template: I only needed to replace the object description, and Midjourney consistently generated cohesive, brand-aligned illustrations. I was pleasantly surprised by the level of precision and creativity the AI brought to each illustration.

The future of AI-driven brand illustration

This experiment has opened my eyes to the potential of AI in scaling a brand’s visual identity across platforms. Imagine a company launching a new line of products — with the right AI setup, the brand’s unique style could be instantly applied to each new product, streamlining the visual identity process and enabling designers to adapt quickly while maintaining consistency. For designers seeking effective illustration solutions, experimenting with AI-driven tools can be a game-changer.

This process allowed me to experiment, test ideas, and visualize concepts while staying fully aligned with the brand’s guidelines. It isn’t just about output; it can help companies refine and sharpen their design language by requiring designers to create a precise textual description that captures the brand’s essence. This exercise enhances the brand’s clarity and strengthens its core identity, giving designers a solid foundation to approach future illustrations with a sharper, more structured mindset.

While Midjourney’s results may still require final touches — such as vector conversion, line refinement, and detail enhancement — it represents a significant step toward independence for designers who struggle with illustration, all while maintaining brand consistency.

Learning to break down style requirements and refine prompts can elevate design skills and expand possibilities in brand illustration, making rapid prototyping and brand alignment both efficient and achievable.

Quick tips to get started

1. Analyze the brand style:
   Dive deep into the brand’s visual language, identifying every detail — line quality, colors, proportions, and composition. This understanding will guide you in creating a prompt that captures the brand’s essence.

2. Select a familiar, consistent object:
   Start testing your prompt with a single, iconic object that you know well. This will help you assess consistency and refine details without introducing too many variables.

3. Refine the prompt thoughtfully:
   Focus on specifics like line weight, shadow behavior, spacing, and object relationships. Adjust each element to bring your prompt closer to the brand’s unique look and feel.

4. Build a prompt library:
   Save your most effective prompts to create a “prompt bank” you can easily reference for future illustrations, maintaining consistency across projects.

5. Make final adjustments as needed:
   AI-generated results often need minor tweaks — vector conversion, line refinement, or detail enhancements — to achieve production-ready quality. These adjustments ensure polished, brand-aligned visuals.

Originally posted Here

What is a reward system?

First, let’s clarify what we mean by ‘reward system.’ You might have come across this term in an introductory psychology class or in discussions about design, where it’s often asked, ‘How might we make the experience feel rewarding to users?’”

In neuropsychology, the reward system refers to neural structures that drive desire, pleasure, and positive reinforcement.

Central to this system is dopamine, a neurotransmitter that significantly influences reward-motivated behavior.

When exposed to rewards, the brain experiences an increase in dopamine levels. By designing experiences that stimulate this reward system, we can motivate users to repeat certain behaviors, boosting engagement, satisfaction, and loyalty.

What is a habit loop?

Looping pathways refer to circuits in the brain where information is processed cyclically — often involving the reward system.

Specifically, a habit loop is composed of three key components:
1. Cue
2. Routine
3. Reward

Understanding this concept can help designers create products that encourage desirable and positive user behaviors. Designers can effectively guide user behavior toward beneficial outcomes by integrating cues, routines, and rewards into the user experience.

Applying these concepts to product design

To create effective habit loops, designers should identify appropriate cues, define desirable routines, and align these with the rewards.

Let’s look at an example. Suppose we are creating a fitness-tracking app.

1. Cue

The first element of the habit loop is the cue or trigger. This is what initiates the desired behavior. In the context of the fitness app, we could design a push notification reminding the user to complete their daily workout or log their meals.

The goal is to prompt users to open and interact with the app.

2. Routine

The routine is the behavior the user performs in response to the cue. For the fitness app, this could include activities like logging their meals, recording their workouts, or completing a fitness challenge.

One way to strengthen the routine is by creating a seamless and enjoyable process for habits like logging meals or workout routines.

This could include an intuitive UI, one-click entry options, or voice commands for hands-free interaction. Overall, how can we provide a frictionless experience for users so that the app aids them in achieving their goals?

3. Reward

The reward is a critical element that reinforces the habit loop. In our fitness app, rewards could be implemented in a variety of ways:

• Instant gratification: Provide immediate feedback when the user logs a workout or completes a challenge. This could be through appealing visuals, positive affirmations, or celebratory animations.

• Progress tracking: Show the user their progress over time. Visualizing data like weight loss, muscle gain, or improvements in endurance can be very rewarding.

• Social recognition: If the app has a social component, accomplishments could be shared with friends or the app community, offering social recognition as a reward.

• Gamification: Implement elements like badges, points, or leaderboards. Earning a new badge for hitting a milestone or ranking high on a leaderboard can be a powerful reward.

Summary & Ethics

The ultimate goal of designing with the habit loop in mind is to encourage repetition and positive habits. When a product successfully leverages the reward pathway, users will be more likely to follow the signals and maintain a routine, thus forming a habit.

In this case, I’ve illustrated these concepts using a fitness-tracking app as a practical example. However, the psychological principles discussed here have far broader applications. They can significantly improve human behavior and help craft a cohesive user flow.

While these strategies can increase engagement and motivation, they must be used responsibly. Designers should avoid creating addictive behaviors and always respect the user’s autonomy and well-being.

By understanding how the brain’s reward and loop pathways function, product designers can create experiences that fulfill user needs and engage and motivate them meaningfully and ethically.

Originally posted Here

Subscribe now

I’ve been in the web design business since 1998. It has gone through some phases, but the place its at right now feels the weirdest in a long time.

For years UX designers battled the “dribbblization” of the industry. What it means, is creating eye-candy projects and posing them as serious work.

Beautiful at first glance, but either impossible to code, or completely dysfunctional.

Form is taking over function. Again.

With animation tools and tutorials easily available, we get them animated too now. Here’s an example.

The problems with this design is high loading time (most people will click away), very vague and unconvincing copy and vertical animations that distract you from the main action.

It may look good, but it won’t work well. Or at all.

Understanding design

Let’s take a step back.

What is the role of a website? 99% of the time it’s to sell something. To get you to click a button.

Beautiful background with mountains and a person gazing into the distance doesn’t sell. Sure, it tickles your sense of aesthetics. I’ll give you that.

But on its own that’s only a piece of artwork. Nothing more.

The newest design trend

Currently we see a trend of pretty images merged with mediocre UI exploding on social media.

Designs like this gets hundreds of reshares and millions of views.

Let’s dissect this one:

The main issues

In the image above I outlined the main issues. Let’s dive a little more into them now.

• Most of the copy is vague and not matching the product. It’s basically not convincing — just random words that are there to fill space.

• The image in the background has a sole purpose to be eye-catching. Sunsets, mountains, gazing into the distance — there is also no connection to the product here. It’s pointless.

• If there are forms (and there usually are to fill more “visual space”) some of the fields are forced and plain pointless. Forms should be as short as possible — always. Just an email field would do here.

• Buttons usually have very small typography to hide the fact the text is also vague, repetitive, or both. Barely visible text on the button makes it a lot harder to convert.

• If there’s navigation, it’s often just an excuse to show a glassmorphic panel underneath. It often has meaningless elements just to fill the space.

A plague of cooks

Don’t get me wrong. There is nothing wrong with creating artwork like that. It’s also fine to animate it nicely. Do some shooting stars. Some clouds moving. Knock yourself out!

There is an artistic element in web design and we can and should embrace it.

The problem starts when this gets passed around as real projects.

They’re not. A few years ago we used to call it “unrealistic dribbble shots”, now they moved from Dribbble to social media.

Algo-gaming with bad consequences

The popularity of these posts is of course abused by people who want to grow their networks. The problem starts when most junior designers start believing that this is how a design should look like.

If it’s popular, it must be good, right?

What customers want?

When making websites for clients, we may think they want to get as many sales as possible. After 25 years of doing that I can assure you it’s mostly not the case.

Regular people treat design as close to art. They want a pretty painting on their domain most of the time.

Is it all good then? Should we continue doing fancy, animated websites to keep those clients happy?

If you want them to go out of business, go ahead!

When working at Squareblack we learned that the customer is only sometimes right. Our role, as designers, is to guide them through towards the most performing outcome possible.

If they earn lots of money with our work, they’ll more likely to come back for more.

If they love the website because the sunset reminds the CEO of that one bike ride he took when he was a kid, but conversions are at 0% you won’t get that call again.

Unless they like burning money.

Another example

Let’s quickly look at another example — this one’s also animated. It’s a job searching website that “launches your career”. Or it’s supposed to do it, but nobody has an idea what it really does.

What we have here is a parallax animation, moving clouds and a button that only shows up after 8 seconds. The whole thing also takes 31 seconds to load.

This will get you clicks on social media, but it won’t get people to register.

Let’s fix it!

Step one: Analyze

The first thing to do is to analyze and annotate the design. It doesn’t matter if you’ve done it, or you came in to redesign the mess some other designer made.

Annotate all the potential issues and be ready to explain to the client what went wrong here — and why!

Once you get all the annotations in, the first step is redoing the copy. Chances are (even if low) that the visuals might still fit, or require only a few tweaks.

Step two: improve

Here’s a quick fix of the copy pasted right into the main layout (ignore the fonts) and an explanation on how it shapes the user decision (on the right).

At this stage we also annotate (both physical and digital) and show our proposal to the client that way. Leave no stone unturned. They may not instantly get why something is done that way.

Your role here is to show it’s not random. That there is a plan. Reason.

Design.

If you want to see a full breakdown of the steps and some examples from my real client work, I made a video that’s part of my free design course.

When improving the website, the copy, or the marketing message is the most important part. But there are also other factors like loading speed, cognitive overload (too many animations) and low level aesthetic.

What it means, is that the website doesn’t have to be ugly to perform. It neeeds to start with a proper focus on conversion and then on aesthetics. Not just the looks and skipping the function like most of those shared designs do.

Step three: Test, test, test

Design work is not done when the design is done. That’s because design is never truly done. What many designers forget is that after you complete your project you still have developer handoff, quality assurance and most of all testing and improving to perform.

When working with clients you need to stress that part out. If they’re forward thinking it may get you a long-term job, and them more sales.

It’s a win-win situation.

What can you test?

The easiest thing to test is copy. You can tweak and create multiple versions of the main text on the site and see which one performs best.

You can also test different visuals, backgrounds, colors and icons.

In some cases a different person used in the header can also increase the conversion. Just remember it all has to make sense. It has to be tracked, analysed and improved.

And that is your job as a designer. It’s not about cooking a pretty art piece.

Do that in your free time.

Originally Posted Here.

Subscribe now

But once I got past the different looks, I realized they all felt surprisingly familiar. Despite my lack of budgeting experience, I wasn’t totally lost. Why? Because I’ve spent years using apps that nudge me to build habits — fitness apps to get me off the couch, Duolingo to keep my Spanish from gathering dust, and more. And they all rely on the same psychological trick for habit-building. These apps don’t just track things — they encourage you to keep coming back. It’s all built on a model called the Hook Model, which uses four key stages to keep you engaged: Cue, Action, Reward, and Investment.

So, let’s break down this model using three very different apps — Duolingo (language learning), Peloton (fitness), and Mint (budgeting). We’ll see how they use the Hook Model to get you invested in habit-forming journeys, even if you’re just trying not to snooze your morning alarm.

The Hook model: how apps make habits stick

At the heart of habit-building is the Hook Model, a framework for designing habits that keep us coming back. It works in four simple stages:

1. Cue — This is the trigger or prompt that nudges you to start the habit. A cue reminds you to log back in, take action, or stay consistent.

2. Action — Once you’re hooked by the cue, the app prompts you to take a small, achievable step, whether it’s logging an expense or doing a quick workout.

3. Reward — After the action, you get a little dopamine boost — often in the form of a badge, streak, or encouraging message. This keeps you coming back because it feels good to win, even in small ways.

4. Investment — Over time, the app tracks your progress, showing you how far you’ve come and motivating you to keep going. This is where your actions start to feel like a long-term commitment, encouraging you to stick with the habit.

Now, let’s see how this model plays out in three wildly different apps.

Cue: Setting up the challenge

The first stage in the Hook Model is the cue — that initial nudge to start a habit. Each of these apps has a different way of pulling you in, but the strategy is the same: set up a challenge and prompt users to get started.

• Duolingo: Every day, Duolingo sends you that dreaded “You’re going to lose your streak!” notification. It’s a small but powerful reminder that plays on your sense of consistency. The “daily challenge” becomes hard to resist because you don’t want to lose the progress you’ve already made.

• Peloton: Peloton hooks you with “challenges” that get you to commit to a regular workout routine. These challenges often have clear, time-bound goals like “10 days of cardio,” which are tough to ignore once you’ve signed up.

• Mint: Mint’s approach to cues is very similar with a challenge to change you spend less in a given category. By simply bringing your attention to your finances, Mint primes you to think about budgeting as a habit.

Each cue is different, but all of them are designed to start you on a habit-building journey.

Action: Taking small steps with progress bars

Once you’re primed with a cue, the next step in the Hook Model is the action — a simple, achievable step that makes it easy for users to engage. Often, this action is linked to a progress bar, which encourages you to keep going to “finish the job.” This taps into a cognitive bias known as the Zeigarnik Effect, which states that humans are more likely to remember unfinished tasks and feel compelled to complete them.

• Duolingo: Duolingo shows you a progress bar that tracks how many lessons you’ve completed, pushing you to reach the “finish line” and keep your streak alive. The “almost there!” bar makes you want to complete it just for the satisfaction of seeing it filled.

• Peloton: In Peloton, every workout adds to a tally that shows your cumulative progress. By visually marking your achievements, Peloton encourages you to complete a session even on lazy days because it gets you one step closer to your overall fitness goal.

• Mint: Mint’s progress bar is more subtle, but it’s there in the form of monthly spending summaries and goals. Seeing your progress on a goal like “Save $500 this month” turns the abstract idea of saving into something tangible, encouraging you to take those extra actions toward financial health.

These tiny, achievable actions help you get invested and keep coming back, thanks to that itch for completion.

Reward: The power of random badges

Every habit needs a reward, and apps are masters at dishing these out. Badges, streaks, or congratulatory messages may seem trivial, but they’re actually powerful reinforcers. They tap into our love for unexpected rewards — a psychological concept known as variable rewards. This randomness can make the experience more exciting and enjoyable, as you’re never quite sure when the next reward will come.

• Duolingo: Duolingo gives you random badges for everything from language milestones to daily streaks, and it’s surprisingly addictive. These small wins give you a dopamine boost, making you feel like you’re achieving something with every login.

• Peloton: Peloton hands out badges for every kind of workout milestone, from your “first ride” to “five-day streaks.” You get a little rush with each badge, even if it feels random, which keeps you coming back for more.

• Mint: Mint’s rewards are a bit different. Instead of badges, it’s about visualizing progress with charts and graphs. Mint celebrates every time you’re “under budget” or reach a new savings milestone, making you feel accomplished — even if it’s just avoiding a few extra expenses.

These rewards feel random enough to keep you guessing, making every action feel like it might lead to a little victory.

Investment: Long-term tracking for lasting motivation

The final stage, investment, is where the app really solidifies its place in your life. This is the part that keeps you around for the long haul by showing your progress over time. Investment features typically include dashboards or summaries that remind you how far you’ve come, giving you a sense of long-term achievement.

• Duolingo: Duolingo’s language levels and streak counts remind you of how much effort you’ve put in, making it harder to quit because you don’t want to lose your progress.

• Peloton: Peloton’s workout history shows you every ride, run, or workout you’ve completed. This tracker gives you a sense of accomplishment, making you feel like you’ve built up something worth continuing.

• Mint: Mint’s dashboard is all about the long-term view, showing you charts of spending over months and years. It’s a subtle way to encourage consistency, as you start to see patterns and trends in your spending and savings.

Each app’s investment features help you feel like you’re building toward something meaningful, increasing your commitment and making it harder to walk away.

Conclusion: The power — and pitfall — of habit-building apps

In the end, it’s fascinating to see how budgeting apps like Mint use the same habit-building strategies as fitness and language apps. By following the Hook Model — Cue, Action, Reward, Investment — these apps turn daunting goals into manageable daily tasks, making budgeting, exercising, and learning languages feel natural.

But here’s the catch: while these techniques are powerful for building positive habits, they can also lead to “app fatigue” over time. When every app in your life is trying to build a habit, it can feel overwhelming to keep up with all the reminders, badges, and progress bars. Still, if you’re trying to make a positive change, these apps show just how effective habit-building can be.

So, whether it’s budgeting, working out, or learning a new language, remember that building better habits is a journey. And with the right app nudges, you might just find yourself sticking to those good habits without even realizing it.

Originally posted Here

Subscribe now

It took me a few years to look back at what happened during this acquisition journey, objectively; the way it affected me as an individual and as designer, and the way it shaped the emerging organisation. Here are a few reflections during that process, and a few things I would’ve done differently that may help others experiencing this.

Business as usual? No.

It all started on the wrong foot. I’ve severely underestimated the importance of this change, trying to ignore it as much as possible. In the end, the company went through acquisitions before I got there, and it looked like they did just fine. Why bother then? I’ve kept my focus on ongoing projects, peeking out behind my laptop to listen to a few announcements, assuming we’ll get an email or two, and nobody will bother us anymore.

As one might expect, the first to be affected were executives and senior management. These higher-up role changes used to sound like a high stakes version of musical chairs to me, hoping that the people I know will still be around by the time the music stops. Instead of disregarding this, just looking into the new reporting structures could’ve helped me get a sense of mid-long term focus in the organisation. Luckily, my ignorance was only followed by a positive surprise, since things changed for the better. In the past, engineers, data analysts and designers were all mixed and mashed at the leadership level. As a result of the acquisition, each function got individual leaders with specialised expertise, thus roles had better representation on higher level, scaled accordingly, with unique approaches for career paths. Imagine a less positive scenario though, in which design is given less presence in the company at leadership level. Looking at other functions that experienced this, it would’ve affected my freedom to take on initiatives, my involvement in strategic discussions and ultimately my growth.

There’s acquisition bias in decision-making

Since we were competitors before the acquisition, their main product (an app) has been analysed several times in the past, discovering both great and terrible features. Using a mix of frameworks, open data and comparative user studies, the consensus was that their consumer-facing experience was falling behind. The acquisition added a layer of subjectivity to this conclusion. It only took a couple of months to notice a change in some people’s attitudes, with strong or even harsh views softening up. Suddenly, some of their solutions didn’t seem so bad anymore, with negative things becoming interesting. I fell into a confirmation bubble too, being biased by this growing shift in mindset, mostly focusing on positives.

Not clarifying this bias early on, made it difficult to find joint solutions later, and it did not feel right, knowing deep down that we’re avoiding tough conversations. Unfortunately I did not find a way to surface these observations to the larger audience, without overcoming my fear of polarising them, having to facilitate discussions at a level I wasn’t comfortable with, back then. This is perhaps one of my biggest shortcomings during the entire process, since I ended up following the majority far too many times. I believe I could’ve made my point clear more often and avoid issues coming later, with way more complexity.
As obvious as it may sound, data provides the best argument in these cases, not only to guide an objective path forward. I could’ve tried to combine as many sources of knowledge as possible, e.g. sales numbers, customer care topics, dug out those qualitative user research findings, market analyses, or just blame the process and say it’ll all be done later by others. Unfortunately, what I noticed is that if very little data is involved, there is a risk important decisions will be heavily driven by biased arguments, by a majority or by politics building to please the new organisation, rather than users’ needs.

Identify opportunities and balance out busy work

The behaviour that surprised me the most was not resistance to change, rather instant embrace. I found it odd to see people quickly ditching past initiatives and plans, to accommodate whatever vision the new group has. The truth is that some people will feel their role is redundant, and they’ll try to get themselves visible with every little opportunity, no matter how small or big of a task they pick up. This resulted in a bunch of busy work flying in from a bunch of new directions, many landing on my table. Requests like updating presentations to match a new styleguide, supporting marketing teams efforts, replacing assets in flows, using new templates for files, did not feel like a priority to me, while we were ongoing large organisational changes. Eventually, they did contribute to a feeling of unity, but could’ve been done at any time. Getting an influx of work during times like this is natural and simply pushing back until you find just the right type of project isn’t realistic. It’s more about finding a balance between low and high impact work, and honestly it’s also fun to get out of the usual pace and try out some new things. While you make sure you don’t stop other’s momentum, you should also figure out how to contribute to bigger goals. Luckily, in my case, I had enough support to keep a healthy mix of small tasks while supporting broader questions affecting real user challenges.

One aspect, which I wrongly classified as busy work in the beginning was collaborating with people outside of my immediate reach. I kept hearing people from sales, customer care, or marketing trying to communicate needs they identified as important to the rest of the company. Honestly, helping them felt like an uphill battle in the beginning, at times wondering whether putting effort in translating their data and terminology into user needs was worth it. In the end, working together to express their concerns brought up critical aspects in the user experience that we would’ve missed otherwise. It also resulted in an opportunity for me to work on higher level user journeys across teams and functions, something that didn’t happen regularly before.

Get a sense of values and maturity

This is an obvious one, but I can’t stress enough how big of an impact it had on my mental health, in the long term. Treating an organisational event of this magnitude almost like a new job might sound like a hassle, but also forced me to take a decision: commit to stay or move on. I stayed, not fully convinced in the beginning, but willing to give it a try and see what they’re all about. However, understanding values, intricate ways of working or cultural changes seemed boring. I was already imagining scenarios in which I’m swooshing in with my amazing skills, presenting mind blowing solutions, improving every user flow out there within a month. Once again, I was wrong.

It was quite difficult to get past my initial skepticism and find a way to relate to broad, company values in a practical sense. I realised after a while, that it’s not only about the words and materials used to express these, but more about their adoption. If a company manages to inspire people to adopt high level values in their daily work, in their own individual way, it’s doing something right. Obviously, values themselves sounded good too.

Getting a feeling of culture was next. I decided that the best way to capture this was to stop daydreaming and take more concrete actions. First, participate in everyday ceremonies to observe dynamics between functions with a focus on designers’ collaboration with developers and managers. The second thing was to get involved in ongoing projects to get a sense of the way teams approach complex problems. Do they have the experience and processes to react in a calculated manner to find great solutions, or do they mostly adopt quick and dirty workarounds, and move on? Do they have a support structure that enables decision taking, or do they rely on whoever gets to talk the most in a meeting?

The hope was that by putting it all together I’d be able to understand whether the bigger organisation was projecting a false image into the world, hiding behind buzz words. Again, luckily, I discovered a company that was well intended, transforming, but still had a lot of work to match their image. Throughout this process, I also learned that the new company was less mature in adopting product development and design processes, but they committed to improving this moving forward. Another question was forming in the back of my mind: I can work with this, but am I willing to spend the next years going through similar pains just to reach the same level of maturity? Or is it time to move to a place with these things already in order? I decided to stay and do things again, but better this time around.

Speculate, but move on

There are aspects of an acquisition that cannot be made public until the process is finalised: employee contracts, new roles, shifts in product strategy, overall brand changes, etc. There are usually clear guidelines what the company can and cannot answer in advance, but since we are human, part of our natural instinct is to speculate and find explanations if we’re not given one. What I noticed is people who spend too much time trying to guess what will happen tend to adopt a pessimistic attitude towards work, in general. For them, putting effort into current initiatives doesn’t seem to make sense anymore, since “who knows what will happen anyway”. What worked for me was to listen to these conversations as I would listen to users, looking into nuances, words and attitudes to figure out who was willing to put the effort and adapt to changes. It’s toxic to sit in a group that constantly speculates, is cynical or creates drama. Try to move away from them. In the end they didn’t only negatively influence the quality of my work, but also drained my energy.

Present the work, not yourself.

There’s a point in an acquisition when people move from experiencing the others’ product as a user, to getting an in depth internal view of how the product really works and performs. A big part of my work back then was presenting product flows, insights and opportunities to their teams. Since our problem spaces were similar, you can imagine so were some of our solutions. In my mind, the solutions I’ve contributed to were great, assuming we’ll just move on, exchange some knowledge, and get to ship things right away. I realised after a while, that even though people were showing a genuine interest in learning about my approach, it took weeks of repeating the same data points in different contexts, to get knowledge to stick. At that point, I started doubting both the solutions and my story telling skills — why aren’t they mesmerised? why aren’t they just dropping their work and adopting my ideas? why aren’t we developing this already???

First, it would’ve been be a better approach to gradually introduce new information rather than show an avalanche of artefacts right away. Sending a bunch of links to lengthy reports and design files with hundreds of screens had the adverse effect. People did have other things to work on as well. Looking back, it’s almost embarrassingly obvious how much I was trying to push my own agenda, trying to back it up with tons of references. Perhaps it’s a natural response to the whole feeling of being acquired, but it also surfaces areas in my self-confidence that I need to improve on.

Most questions during presentations were more about metrics and impact on users, and less about solutions’ details, definitely less about how I got to those solutions. Sometimes, I’ve worried too much to make my individual contribution visible, getting lost in presenting sketches, wireframes, diverging and converging throughout the process, losing the audience on the way. I could’ve learned way more about their focus, earlier on, and then figure out where do I want to bring in value. It seems obvious saying this now, but instead of throwing everything and hoping that something sticks, get people curious with concise insights and strong, validated statements, to begin with. This will make it easier for everyone to quickly understand the value your work can bring to current user problems you’re all trying to solve for.

Have a backup plan

No matter how transparent this process is, acquisitions can quickly become volatile. It could be something that wasn’t considered properly before, which results in budget cuts, or decisions on which features to keep maintaining. It could also be someone leaving and destabilising teams as well, everyone goes through their own judgment process, they might not like the change and leave. Eventually I got to enjoy this process , since I finally had a good reason to recap all the projects I’ve contributed to, figuring out how to document these in my portfolio. It’s always surprising to see how much you’ve done in the past, ideally without dwelling too long in the feeling of nostalgia. Then, I’ve spent a bit of time to get a sense of the job market in the design world and reflect on what would be a next step, just in case. Moreover, I realised that there’s no immediate guarantee that my career ambitions will be fulfilled in the new organisation. It was unlikely that someone would shut off opportunities for designers out of the blue, but as mentioned before, designer’s responsibilities can be wildly different in between companies, e.g. what if I don’t have the same freedom to conduct user research, and I’m expected to focus a lot more on supporting devs to create UIs? It doesn’t necessarily mean the approach can’t be changed, but the starting point will be different.

Design is difficult to merge

Building any kind of team means matching people on multiple levels, as skill, seniority, personality traits, specialisation, with the list going on for a few more rows. Having a cohesive team requires time and strong leadership that can identify what kind of gaps need to be filled based on present and future needs. Well, an acquisition might just ignore all that. In my case, both design teams were understaffed which lead to simply merging us all together, honestly, just hoping for the best. On top of that, each team had taken quite different approaches to their role in the company. One mostly busy creating UIs, trying to question tasks given to them by managers and engineers, while the other was transitioning to supporting discovery processes, scoping out work earlier on and relying more on design systems for decision-making. Merging was not straightforward. Each team had their pains to address, vision for ways of working, ideal structure, roles to add, tooling to buy, collaboration models to try out. How do you bring all these things together with as little friction as possible?

What I noticed is that top-down decisions tend to help in this situation, especially around team structure and roles, offering a foundation to build on; a foundation that provides enough freedom to try things, while having clear constraints. Generally, having a leader with a strong vision in a newly formed design group is needed, to expedite some decisions. The alternative is analysing endless possibilities framed as conversations instead of actions, which I unfortunately experienced until our group did get a leader. It all happened just in time to get going. There is a period of figuring things out during an acquisition, but sooner or later you need to get things done. You do not want to be in a position of still discussing basics ways of working in your team, by the time new projects get started. Looking back, I see that instead of pushing so hard for my own perspective of how the team should work, I could have helped create a stronger, more cohesive group and then push together in the same direction. Thankfully, due to everyone putting effort in this collaborative process, things worked out quite well, but it took a long time to figure it all out. If we were to start a design team from scratch, would it be formed by the same type of people? Not sure…but I’m happy to have experienced this process.

Embrace it, or not.

It’s tough to be acquired, things change and change in itself is difficult to deal with. No matter what you read and how many opportunities might come up, there is an emotional aspect to an acquisition that should not be ignored. However, dwelling on what was, and what could’ve been isn’t healthy either and constantly referring to the past will wear you down together with whatever passion you’ve got left for design.

Ignoring the change will eventually mostly get back to you because you missed the opportunity to influence it, and woke up by the time it’s all done. Pushing back on decisions by then will not only be difficult, but most likely out of sync with everyone else’s focus. Take time in your busy calendar early on, get informed and try to understand what this process means for you. Stay if you think there’s something worth building upon, or simply move on to try something else.

Originally posted Here

Subscribe now

I recently came across a new list of ready-to-use design systems. While discussing some of them with fellow designers, I had another thought that has been bothering me for some time — most of the design systems I see are not design systems.

So why may the design system you see not be an actual one?

Let’s start by defining a Design System. Nielsen and Norman’s “Design System 101” describes it as “a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels.” According to this quotation, such a thing will solve most design issues. But what I see in the wild design world is usually a huge and very beautiful library of components that probably demonstrates some high Figma skills but not a set of standards for solving these issues.

I have seen companies and solo designers invest lots of time and effort in building one, starting from the research of the existing screens, trying to adopt some solution as a baseline, adding a bunch of color shades, transparency levels, and industry-specific components, but if I open one, I’m usually quite confused. I don’t understand how to use it.

Of course, I know how to use components and variations, layouts, and color libraries. But in my opinion, this component library thing only solves the visual consistency issue and does not serve us as a proper system.

So what is missing?

When it comes to real-life tasks, we all face a huge problem — as designers, we forget to document use cases and match them with the flows and components we designed. We all have been in this situation when you have multiple tasks, stakeholders, and managers asking you to create a design, believing that they know exactly what it should look like, some outdated pages we didn’t have time to work on. When we want to deal with the mess and start working on a design system, we mostly make our lives easier by creating organized files and libraries, but we don’t think about the bigger picture.

I can come up with a long list of examples, but if you are reading this, you probably have one even better from your experience. Think about something simple, e.g., showing full info in case there’s not enough room for the full-length text. You probably instantly thought about tooltips, expand, hover mode, or pop-ups to solve this issue — all of these things could work perfectly. And you have these components in your library. But how do you know which one to pick?

Based on your experience, similar use cases, or discussions with the team, you will select one of the components and use it in the design. The next month, you or another designer from the team may do it differently, so there will be more than one solution for the same issue in the product.

While it may not seem catastrophic, when the product grows (and that’s why you probably started working on a design system), these issues aren’t easily solved by design validation or knowledge sharing and review sessions. Even if we can solve these inconsistency issues, why create them in the first place?

I strongly believe that building the Design System often gives us a false sense of security that we did a great job. And it doesn’t mean that we didn’t. We worked hard, probably gained new UI skills, and made the engineering team’s life a bit easier. But the task wasn’t completed. In six months, any new designer, or even you, will try to reinvent the wheel and create inconsistency instead of beating it.

So what would I suggest? Document your work, describe what problem your component solves, how to use it, and its limitations. If you decide on the maximum number of items in your navigational menu or the number of steps in the form, document it, stick to it, and make sure that it’s available to the rest of the people involved in the project.

I can’t say that working on something less than a documented design system is not valuable. But having something that really works for you and doesn’t just provide quick fixes would feel much better.

Originally posted Here

Not too long ago, Figma rolled out its AI features, and my work account got access to them. Naturally, I couldn’t wait to experiment, playing around with imaginary tasks. The feature that intrigued me the most was the ability to create a draft. I used it to generate mock app designs and website elements, and it all looked pretty promising. The elements were modern, and the customization options allowed for some fine-tuning, making it seem like a great tool for creating initial concepts. But the real test came when I tried using it on an actual work project.

Testing “Create Draft” on a Real Task

Currently, I’m working on a media asset management system, and I recently received a piece of technical specifications from an analyst — perfect for testing this feature. I copied the text verbatim into Figma’s prompt, excited to see what it would come up with. This is a text:

Create mini-workspace for “Registration in ORD.” It includes:

A button “Upload list for registration in ORD.” Upon clicking, the user should be able to upload a single .xlsx file.
A list of previously uploaded files (similar to reports in an admin panel).
Successful file: It has a green checkmark or simply a status of “Successful” + visible upload date and time + the ability to download the file itself.
Unsuccessful file: It has a cross/status “Processing error” + upload date and time + the ability to download the file itself. Errors for each specific record will be visible inside the file.
File in processing: It has a status “In processing” + upload date and time + the file itself.
By default, the most recent file is visible + the user can expand to view the full list of previously uploaded files.

The first draft was generated using Figma’s Basic Site blocks. It came out looking somewhat like what was described, but clearly, this was not a final design that we could use in production. Still, it was a start. Keeping this draft in mind, I decided to try another approach.

Exploring Different Layouts

I didn’t want to rewrite the prompt too heavily because that would defeat the purpose of the experiment. Instead, I thought about making the design more compact and switched to Figma’s Basic Apps generation set. This time, I was hoping for a vertical composition that would take up less screen space. The result was an interface that was still functional but more compact. It had a list of files, status indicators, checkboxes that weren’t in the original requirements (but Figma added them anyway), an upload button, and even an “add” button.

The “Medieval Elephant” Effect

This whole process reminded me of how elephants were depicted in medieval Europe. People back then had never seen elephants, but they had heard stories from travelers, so they used these vague descriptions to draw what they thought an elephant might look like. Similarly, Figma’s AI doesn’t fully understand the purpose of each element. It knows certain things should exist — like tables, columns, and drag-and-drop zones — but it doesn’t understand why. It’s like an eager assistant who’s trying hard to guess what you need based on half-baked knowledge.

My Version

With Figma’s drafts in front of me, I built my own version (Don’t be too strict, this is only V1) of the interface using actual project components. I took inspiration from the Basic Site draft for the drag-and-drop zone, and from the Basic Apps set, I used the dividers between elements in the uploaded files list and the overall structure of a single uploaded file.

What really impressed me, though, was the prototype creation function. Figma’s AI nailed it there, producing a prototype that closely matched my expectations. It was smooth and accurate, giving me exactly what I needed to envision how the interactions would work.

Conclusions

Can the “Create Draft” feature replace designers? Not yet. Does it reduce the time spent searching for references? Perhaps in some cases. On this task, the most interesting part for me was that when I receive a task description from an analyst in text, as someone who primarily thinks in visual images, I spend some time analyzing the text to understand what exactly is being asked of me. The “Create Draft” function gives me a kind of pencil sketch from someone who knows nothing about interfaces, but it helps me analyze the text description more quickly.

As I understand it, Figma is planning to introduce a feature that will let you use your own component library for generation. When that rolls out, this tool could become much more powerful and useful in everyday design workflows.

Elefant images from here:
https://kottke.org/18/01/medieval-illustrations-of-what-europeans-thought-elephants-looked-like

Originally posted Here

Context

I am part of a small design system team that supports dozens of B2B products, each with different scopes.

As the Design System grows, so does the need to update established patterns and create stronger foundations that supports a constantly evolving system. To better meet the needs of our diverse product ecosystem, we need a consistent and scalable foundation.

One of the most fundamental elements is color.

Colors define the brand and bring life to the entire system.

Currently, the colors in our design system are adaptations from the brand palette.

However, since these colors were designed primarily for marketing and visual design, some adaptations and additions were needed to respond to specific digital use cases.

New colors have been added to the palette that could be used to build the layout for digital products.

We still faced gaps, especially in specific use cases like differentiating component states (hover vs. active), meeting color contrast for accessibility, creating data visualizations and others…

Also, the initial logic behind our palette got lost over time, so whenever a new use case required a unique color, it was added to the palette without much logic behind it, leading some inconsistencies and accessibility issues.

Furthermore, the design system was continuously evolving, so it became challenging to dedicate time to thinking holistically about the color palette and ensure it was as consistent and robust as possible.

The Need for Change

Throughout 2023, new challenges arose, design tokens became a priority and the color palette needed to address the following:

• Improve accessibility by achieving WCAG compliance.

• Improve Data visualization.

• Support multi-theming including dark mode.

To avoid repeating past mistakes, we decided to invest time and resources into a comprehensive approach to improve our color palette. We wanted to adopt new concepts and needed a clean slate to prevent future issues.

We observed major design systems like Carbon, Goldman Sachs, and Atlassian for inspiration, which helped us avoid their mistakes and focus on the most critical steps.

Creating a Base color set

Instead of starting from scratch, we leveraged from brand colors. This gave us a head start and ensured continuity with the brand’s identity.

💡 We applied the same saturation and brightness levels (HSL) used in the brand colors to create new tones for our system.

After evaluating the full color spectrum, we defined 10 core colors for the system, which will cover a variety of use cases such as warnings, categories, and charts.

Building a Color Scale

Once the base colors were established, we created a range of shades for each, from the lightest to the darkest.

We followed a pattern being shared by major design systems.

Each color scale should have 10 shades:

• 5 shades that ensures , at least, the minimum contrast with dark text.

• 5 shades that ensure the similar level of compliance with light text.

According to the WCAG 2.1 guidelines, normal text must maintain a minimum contrast ratio of 4.5:1 against its background color, while large text and graphical elements require a ratio of at least 3:1.

Using an 8px Scale

We defined different lightness stops following the 8px scale where each stop represents a shade.

Light shades: 8, 16, 24, 32, 48.

• Starting from the base value;

Dark shades: 54, 68, 76, 84, 92.

• By subtracting from the extreme value (100);

💡 Following this strategy allowed us to ensure that our colors are adaptable to both light and dark themes.

For example, If a button with a background with a lightness stop 16 in light theme, it will be 84 in dark theme.

Leonardo: Automating Color Scales

We used Leonardo, a tool that generates color scales based on base colors and allows manual adjustment of lightness stops.

With Leonardo we’re able to automate the process of creating multi color scales.

As we wanted to keep the core brand colors in our system, we had to make a few test iterations and manually fine-tuning after using Leonardo.

Focus on accessibility

During fine-tuning, we also had to make adjustments based on color contrast ratio between text and backgrounds to make sure, for every color scale, on each step, the color contrast ratio is the same.

For example, If a background filled with Blue 60 color produces 5.05:1 contrast with light text.

A background filled with Red 60 color should produce a similar contrast ratio.

This ensured that the same accessibility rules were met for all colors with balance and consistency.

Test in real scenarios

We conducted extensive testing to ensure its effectiveness across different use cases. Special attention was given to data visualization accessibility. We also began exploring a dark theme, making sure the palette would adapt smoothly. Additionally, we ensured that the colors would cover interactive states for KDS components (hover, active, focus,…) and represented different severity levels (success, warning, error) across components.

Conclusion

This process has resulted in positive outcomes, particularly in improving accessibility. However, it remains iterative and will continue evolving with the design system’s needs. We are confident that this scalable and robust color palette will better serve a wider range of our adopters use cases.

Most of all, we’re happy because now we stablished solid guidelines ensuring that by following this process, colors can be added or updated into the system.

Originally posted Here

I couldn’t shake the thought.

With all the buzz around Figma’s new AI tool — capable of generating a fully-fledged UI from just a prompt — it felt like something fundamental was shifting. I was hearing the same rumblings everywhere: Is UX/UI design dying? Are designers being replaced by AI?

To get to the bottom of it, I set out to do what any good writer would: talk to the very people at the heart of the debate — product designers. My goal was to understand their fears, their hopes, and their take on this rapid evolution.

But as I dug deeper, I uncovered something unexpected. This wasn’t a story about AI replacing designers; it was about the transformation of design itself.

Talking with the Creators

My first stop was a conversation with Jamie, a seasoned product designer with decades of experience. He had seen design trends come and go, and his calm demeanor suggested he wasn’t easily rattled.

“I’ve been around long enough to see plenty of ‘game-changing’ tools come and go,” he said, gesturing at his tablet. “But Figma AI feels different. It’s smart — too smart, maybe. Sure, it can generate a UI. But it doesn’t understand the ‘why’ behind the design.”

I pressed him to elaborate. What did he mean by the ‘why’?

“AI might know how to place a button, but does it know why the button should go there? Does it understand the frustration of a user struggling to navigate a healthcare portal at 3 a.m.? That’s empathy, not data.”

Jamie’s point struck a chord. UX/UI design is more than creating layouts; it’s about solving problems for real people in real situations. AI can replicate the ‘how,’ but can it ever truly understand the ‘why’?

The Fear of Losing Craft

My next conversation was with Lila, a vibrant young designer with neon-colored hair and boundless energy. Her take was less about AI replacing jobs and more about what would be lost in the process.

“It’s not just about jobs,” she explained. “It’s about the craft. There’s something irreplaceable about the late nights of tweaking details, of iterating, and of testing. That’s where the real magic happens. Figma AI can churn out a good-looking interface in minutes, but it doesn’t struggle. And sometimes, the best ideas come from the struggle.”

Her words reminded me that design isn’t just output; it’s a process. The struggle and iteration are what give design its depth. And that’s something AI — no matter how advanced — could never replicate.

The Pragmatic View

Then there was Mark, a product manager with a no-nonsense attitude. He had a more practical view on the whole thing.

“Look, AI is a tool — just like Photoshop, Sketch, or Figma itself. Designers aren’t going anywhere. They’ll just shift from pushing pixels to creating the systems that AI operates in. Figma AI is smart, but it’s not autonomous. It still needs designers to give it purpose, context, and direction.”

Mark’s perspective opened my eyes to a bigger picture. The future of design isn’t about whether AI can replace designers; it’s about how designers will evolve. They won’t just be creating UIs anymore — they’ll be designing the very frameworks that define how AI operates.

Why Would Figma Risk Replacing Designers?

As I continued my conversations, a question kept nagging at me: Why would Figma create a tool that could potentially replace the very designers who use their platform?

The answer, I found, was simpler than I thought. Figma wasn’t trying to replace designers — they were trying to remove the roadblocks between creativity and execution. In their view, AI was a tool that could handle the repetitive tasks, allowing designers to focus on higher-level creative and strategic work.

They weren’t killing design; they were amplifying it.

The Solution: Humanize the Process

Here’s the thing: UX/UI design isn’t dying. It’s evolving.

Figma AI, or any other AI tool for that matter, doesn’t have the ability to feel empathy, understand human behavior, or craft experiences that resonate on an emotional level. It can create beautiful interfaces, but it can’t create meaningful experiences. That’s where human designers come in.

The solution to this new era isn’t to resist AI, but to embrace it. Product designers need to shift their focus from doing the labor of design to mastering the art of it. They’ll move from executing ideas to shaping them — from building interfaces to designing entire systems that integrate both human and AI input.

Designers will no longer be just the creators of UIs; they’ll be the architects of user experience, emotion, and connection. The real value in design has always been human, and that’s something no AI can replace.

What’s Next for Designers?

The future of design isn’t bleak — it’s bright. But it requires a shift in perspective. Designers won’t be replaced by AI; they’ll evolve alongside it. The role of the designer is transforming, not dying. The question is not if AI will replace designers, but how designers will adapt and redefine what design means in this new era.

So, is UX/UI design dying? No. It’s becoming more human than ever.

Originally posted Here