I am a product designer and I am writing this article to help other designers who are trying to find how to install Claude code and setup Figma MCP to Claude

In order to install Claude code you need to have a Claude pro plan.

Step 1

Go to Claude code docs and scroll down to install Claude Code.

You can copy command from here and paste in your command line.
Press Win+R (windows) then type cmd, for Mac OS search terminal.

Btw if you are installing for windows, first install Git in your pc.

Step 2

Run the copied command in your terminal or in command line.

You have to give authorization and give pro plan access while installation.
Once installed you’ll get a message like this once you install Claude.

Step 3

Copy the mentioned path and open advance system settings (windows).

Click on Environment Variables and double click on Path. Then click on New and then paste the copied path and press OK.

Step 4

You can run Claude code in your terminal or in your favorite IDE terminal. You just need to type claude in the terminal.

Installing Figma MCP to Claude Code

First go to Figma file, then switch in to dev mode and enable MCP server.

Then go your Claude running terminal and add following command and run it

claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse

You can check if Figma MCP is connected by running following command in the terminal.

claude mcp list

Wohoo you are good to go!

You can check my video on setup Claude Code

I am a product designer and I am writing this article to help other designers who are trying to find how to their Figma designs with Cursor/ VS code.

Cursor

Step 1
First go to your Figma file and switch to dev mode. Click on Enable MCP on the Right side panel.

Step 2
Go to Figma MCP Catalog (Click here)

Scroll down to this section and click on Add MCP to Cursor. It’ll open the Cursor (Make sure to install cursor before doing this :-p)

Step 3
Cursor will open cursor Tools & MCP settings

Click on install. And it’ll install the server and after that you can see the MCP server as shown below in the list.

And now you can go to your Figma file and copy any frame link and paste your IDE agent ask to implement it

VS Code

Step 1
First go to your Figma file and switch to dev mode. Click on Enable MCP on the Right side panel. And copy the MCP link.

Step 2
Open VS code and press Ctrl+Shift+p (win), Cmd+Shift+p (mac) to open command Pallete. Then Type MCP and select Add server

Then select HTTP and paste the copied server link

Then give a server name and press Enter. Now you have successfully added the Figma MCP. You can check your MCP by clicking on Extensions-> MCP Servers.

You can check my video to on how to setup Figma MCP

Happy vibe coding!

While searching for a villa for a vacation with my friends, I stumbled upon the stunning Pekoe Villa, which boasts an incredible view. However, when I visited their website for more information, I realized it didn’t do the villa justice, so I decided to redesign it.

Since this is a simple website I created a simple IA (information Architecture)

For the above-the-fold section, I decided to feature their stunning video, subtly masked with the villa’s name. The parallax effect adds a dynamic touch, capturing users’ attention and motivating them to explore the site further, ultimately helping to lower the bounce rate.

In the following section, I provided essential details about the villa, along with a booking option for available dates. To give users a better sense of what to expect, I placed a video alongside the information.

Next, I introduced a gallery and a brief history of the villa, which helps build trust and instills confidence in potential customers.

I then added an “Experience” section to inform users about nearby attractions and the ideal times to visit them, allowing guests to plan their stay more effectively.

Reviews play a crucial role in deciding whether to purchase a product or book a vacation spot. To enhance trust and confidence, I added a section dedicated to customer reviews for those considering a stay at the villa.

In the final section, I included contact details and a map to the villa’s location for easy navigation.

How did I test this

Since this is a redesign and I don't have permission on the domain I don’t check on bounce rate and user engagement. But by sharing framer prototype with few people I was able to validate the mental model behind the website and confidence about this information architecture is working.

I shared Figma prototype with few people to get their feedback.

The redesign is a good start and effectively moves the website forward. However, further testing with additional users is needed to determine if any adjustments to the layout or content are necessary. Implementing heatmaps and other analytics tools can help us understand bounce rates and conversion rates, allowing us to assess the effectiveness of the design.

This is the final design.

https://drive.google.com/file/d/1Gg_-jEjy05KasiwomYFJtvbUCwBLvCVU/view?usp=sharing

Thank you

Reach out to me on shihanmalik.com | shihanmalik07@gmail.com | https://lk.linkedin.com/in/shihan-malik

check my designs at https://www.behance.net/shihan-malik

Website Redesign To Increase User Engagement was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.

If you’re new to the world of UX or a non-designer curious about the UX process, this article is for you. Let me explain the UX process through the lens of a weight loss journey.

1.Set Goal(s) / Identify Problem
When you aim to lose weight, you begin with a clear goal, often motivated by personal challenges like improving health or boosting self-esteem. Similarly, in UX design, identifying the problem and setting a goal is crucial. Your objective might be to enhance user satisfaction, increase engagement, or streamline the user experience.

2.Planning
Next, for weight loss, you come up with a diet plan and a workout routine. These plans give you a structured path to follow. In UX, you also need a plan. This involves understanding what users need, designing user interfaces, and mapping out how users will interact with your product. Having a plan keeps you on track toward your objectives.

3.Follow the Process
Then comes execution. In weight loss, this means sticking to your diet and workout routine consistently. In UX, it means research about your problem, working on your design, testing it with users, and making changes based on their feedback. Being consistent and dedicated is key in both areas.

4.Measuring Your Success/ Testing
Measuring progress is another important step. When losing weight, you regularly check your weight to see how close you are to your goal. In UX, you use tools like analytics and user feedback to see how effective your design is. Metrics like user engagement and satisfaction scores help you understand how well you’re meeting your goals.

5.Maintaining
Finally, reaching your goal is the reward for all your hard work. Whether it’s hitting your target weight or creating a seamless user experience, achieving your goal feels great. But just like maintaining your weight requires ongoing effort, keeping a good user experience involves continuous monitoring and improvement.

Conclusion
In conclusion, both weight loss and UX design need a clear goal, a solid plan, consistent execution, regular measurement, and ongoing effort. By seeing these parallels, you can approach UX design with the same discipline and dedication that you’d apply to a weight loss journey.

Just as a good diet and workout routine lead to a great life, a good UX process leads to a great product.

Thank you for reading…

Writing this story made me wonder if I should share it or not, because it’s about a pretty bad thing that happened to me. You might have heard of Sundar Pichai’s cockroach theory. Well, this is my version of it, and it’s all about a little cockroach.

One day, just like any other pandemic day (where every day feels like Monday!), I was working at my desk with my wired headset plugged in. I spotted a small cockroach wandering around. I wasn’t scared, so I let it roam while I listened to music. So next minute I was looking for it, it’s on my desk near my fingertips. Rest is history :-p.

In my panic, I quickly moved backward, accidentally knocking over my two monitors. They fell to the ground, shattering into pieces. Luckily, my laptop survived.

What really got to me wasn’t the broken monitors, but how I reacted to a harmless bug. If I’d just stayed calm and moved away, I wouldn’t be writing this now.

But from this mess, I’ve learned something valuable: we can’t control what happens around us, but we can control how we react. It’s a lesson in perspective and resilience. So, next time a bug crosses my path, I’ll remember to take a deep breath before reacting.

Read my other articles
https://shihanmalik94.medium.com/

So this article is a short and sweet one for sharing my knowledge on brain activities and user experience. Lets Start…

It is obvious that all experiences we have in our lives are defined by our brain and brain chemicals. Even our feelings such as happiness, sadness, pleasure, excitement, nervousness define by our brain;

So what are brain patterns?

Let me explain to you by an example

Remember the first time you try to do something? Maybe driving or moving to a new place? You were so cautious about every little detail.

Suppose you are moving to a new location, in order to get there first you might look around for landmarks, shops, ask directions from people on the street or maybe use a map for the navigation.
Still you manage to ended up in a wrong place.. :-p

So what will happen after a couple of days or week? Do you still use a map to get in to that place? Do you even look around the road?
The answer is “No”, unless you are a kid.

So why is that?

The reason is that your brain keeps track of the information related to directions to your new place.
All the roads, navigation points, shops, landmarks and almost everything you see in the daily basis are mapped in your brain. So you don’t need to worry about or give that much attention to get back to your place.

This applies to every task you do.

That is why we human beings are so hesitate to take first steps of doing something. Because our brain be like “Dude I can’t help you this time I don’t have any experience”, but after you getting used to it your brain is like “You just chill I’ll take care of this.”

So what is this has to do with your product experiences?

This is the exact reason why companies maintain a design system and a brand strategy. Because our brain always follow patterns.

And this is why you better follow mobile design patterns. IOS and android users are having different mind sets and patterns when it comes to using apps. If you failed to deliver the basic user patterns, the chance of getting removed your app is higher.

But there is also a con when using patterns. This actually depends on your primary goal and user audience. Same patterns bring same experience which means some users find this boring. And this doesn’t separate you from your competitor. As people, we love excitement and to experience some new things. So if you can break some rules and bring a out of box solution, don’t step back to Do it…

This article is actually bring up my opinion. If you have a another opinion I am glad to hear that.

If you enjoy this article give 20+ claps :-)

My Portfolio

• UI UX Design - Shihan malik
• Shihan Malik on Behance
• Shihan Malik

Read my other articles

Shihan malik - Medium

Brain Patterns and User Experience was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.

This is a short article about our mind that I thought worth sharing with you guys. This has some takeaways to UX people.

First of all, I have a question for you, so take your time and answer this question before reading my answer.

Question

There is a room with two people. Let's name them as Iron man and Captain America. ( I am a marvel fan :-p)

And there are two bins named A and B. So Captain kept his shield in basket B and left the room to buy a Shawarma. ( Have you tried Shawarma? you should!)

In the meantime, Iron man took his shield and put it in the basket A. After some time Captain returned to the room.

So here comes the question, On which basket Captain gonna look for his Shield? Basket A or Basket B? Take your time…..

Answer

Did you think of basket B? Congratulations..! you’re an adult.

I know now you will be like am I a joke to you? that’s obvious. Yes, it is obvious unless you are a 3 yr old. If you ask the same exact question from a 3 yr old, the answer may surprise you. They say basket A.

But why is that?

3 yr old does not understand the states of mind. Simply they don’t understand people having different mindset and mentality. They think what they see and what they feel is what everyone thinks and feels. Crazy right? this how our brain works, with time it becomes more intelligent. This is the theory of our mind.

So what is the takeaway for UX people?

At some point when we designing, we assume things, behaviors of our user audience. Sometimes it works sometimes it not.

But by assuming what user will do and his journey without actually testing with users is actually, the same thing that 3rd-year-old would do.

So next time when you make an assumption, make sure you tested it out with your audience….

You can watch this video that explains this theory and the experiment.

If you enjoy this article give 20+ claps :-)

My Portfolio

• UI UX Design - Shihan malik
• Shihan Malik on Behance
• Shihan Malik

Read my other articles

Shihan malik - Medium

Theory of Mind was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.

An app that needs you to find restaurants near you to catch up with your friends, for an event or… just dining.

How it all started…

This is my very first case study about a mobile app.

I would like to share the way I approached this problem and a few design decisions I made throughout the process.

Since this is my own project, first I had to look for a case to solve. So I looked at my day to day activities and also small problems my office buddies facing on a daily basis.

When it comes to my office mates, “Uber eats” plays a big role in lunchtime to order foods. When I was looking for a case, my mind got stuck on a problem thinking how to find the best restaurant around you for dining or to delivery (because some restaurants have their own delivery system and they haven’t registered in “Uber eats”).

Research phase

As my first approach, I created a google form with few questionnaires and shared with my office buddies and a few of my university friends. The purpose of this questionnaire is to identify their preferred method of finding a nearby restaurant.

The following are some of the results of my questionnaire.

As you can see many people have voted for “ask from a friend” or “search in Google to find a restaurant” and also people who use mobile apps, have chosen “Uber eats” which is not a perfect way to solve the problem of finding the best nearby restaurant.

Define and user flow

After analyzing the questionnaire results, everything was loud and clear for me, so I started to define the problem.

Finding the best nearby restaurant.

One place to analyze all the restaurants around you and in the city.

List all the restaurants and analysis according to your preferences.

After a narrow down scope and defining the primary goal of the application, I created a flow chart that explains the user journey of this app.

Sketching

Before step into sketching, I created a mood board to generate ideas from similar applications and concepts as competitive analysis and then I started to sketch my ideas about how it needs to be done.

Then I started to brainstorm all my ideas by sketching.

Wireframes

When I step into wireframes I made some changes and improvements to the application.

Removed the top left profile icon and add it to the bottom navigation.

Add favorite icon into bottom navigation.

I realized that the importance of accessing the near me map feature so I added a map into the bottom navigation which enables users to easily find their nearest restaurants.

After designing wireframes, I started to create user journey mapping visualization to have a proper look at the user flow.

User Interface Design

User interface design was the next big step.

I started this by selecting colors. I tried to find the best color which represents food and restaurants.

When it comes to food, green and orange colors are a great combination. While I was googling, I found that green with brown and orange with yellow as fantastic combinations.

Design patterns

1. I decided to make designs for the iPhone. So I followed basic ios guidelines when designing the application.

2. Rather than going for the hamburger menu I decided to have floating bottom navigation because it has more visibility and quick access throughout the application.

3. Button sizes and input box sizes set to a minimum height of 44px because it is easy for accessibility.

4. Sign in and register screen has a skip button because it is not necessary to be login to use the application (login requires only to review a restaurant).

So thank you for reading this case study, I would highly appreciate your feedback on this.

Give 10+ claps if you appreciate this ❤

My Portfolio

• UI UX Design - Shihan malik
• Shihan Malik on Behance
• Shihan Malik

Read my other articles

Shihan malik - Medium

Case Study Restaurant App was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.

User = people who use your product or service

Experience = their experience throughout using your product or service (good or bad)

So in our day to day life we are users, who use different products and services. Everyday we visit numerous websites, some of them are familiar websites and some are new. Also we use mobile phones to access social media, various mobile apps, listen to music, web surfing etc;

Is that all? Noooooo…

What about our transportation?? Train delays, slow buses, traffic jam.. and how many times did you opens a door to the wrong side by not knowing which side it works?

Annnnd your TV remote, how many unused button are there in you remote and how hard is it find a button to open the channel list?

Is it sounds crazy?? these are some of the experiences we are having in our day to day life. We find difficulties on engaging with some of these or all of these things.

But you know what, magic happens..! we are getting used to all these things when we start to do it over and over again. So the pain of doing something during the first few days then become a habit and we barely notice it as a difficulty.

This is actually not an unusual thing. This is how our brain works..! Brain also have a cache memory, ram and a hard drive. All the instructions for your day to day activities stored in the hard drive. Each day, instructions for that particular activity load in to your brain and then you proceed with it (Cool right? no problem at all)

But what happens when you start doing something for the first time. Your brain started to looking for a predefined instructions for that. If your brain couldn’t find anything stored, then brain has to learn that and save it inside.

This is why UX matters for everything. As an UX Designer we have the responsibility to identify these problems. And most of these problems are hiding behind our habits.

This is why we need to follow patterns, which is one of the best practices when it comes to design UI and UX.

Why many large scale companies have their own style guide/branding and a design system?

The answer is simple, for consistency. But why they need a consistency? because people follow patterns, it is so easy to understand a pattern.

Our brain doesn’t need much effort to understand a pattern.

So what if you design an iOS app without considering the apple design guide? People will start to complain!! It is where your app going to review as an one star and have comments such as “this is worst. not working properly blah blah..”. This is not users fault you would do the same if you are in their shoes.

Therefore as humans we all deserve a good experience, comfort with our works and activities. So let’s make each other life’s easier with great user experience..!!

Thank you!!

My Portfolio

• UI UX Design - Shihan malik
• Shihan Malik on Behance
• Shihan Malik

Read my other articles

Shihan malik - Medium

I was an University student in Physical Science faculty, who had no idea about whom I want to be in future or which path I should choose after my studies.

At the University, I studied Computer science, Physics and Mathematics but I had no interest on any of those subjects.

During my first year, I wanted to do a personalized birthday card for one of my friend. That was the first time I started to use Photoshop. From then I used to play around with Photoshop whenever I get a free time. Because it was the best media to express all crazy design ideas which was going in my mind. I did designs for T-shirts, posters, banners and logos for various events happened in my university.

Most of the designs were done for free for my friends because I really enjoyed playing around Photoshop and day by day I fall in love with it.

Eventually I wanted to become a graphic designer, because that’s the only career i heard when it comes to a design path.

As the time goes, during the 3rd year of my university life one of my friend applied for hackathon event. (For me, hackathon is free food :-p) We built up a team with 4 members and went for the hackathon. Magic started at the moment when judges announced that it’s not another hackathon event but a designathon.

Which means it’s a design challenge and no programming or coding work. Yey!! I was amazed with what I just heard and “This is the competition i was waited for whole time” I told to myself.

While listening to further details about the event I heard the word called “UI/UX” It was the first time I heard that word. Quite a surprise to hear this new word and I was very curious to know about it. Is it a method of design or something else? Lot of questions started to going around my mind. I started to google and then I found some interesting definitions as UI/UX means simply how people use a product or service. Interesting..!! Isn’t it?

I was all gear up for this designathon and came up with a fantastic mobile application design for the challenge given by judges. Guess what, we became runners-up and won 50000 LKR. I came home like Sri lanka cricket team who won 96 World Cup..(Actually i have no idea about 96 world cup celebration.)

From that day I started to research about UI/UX. I watched videos, read articles, joined forums/groups, started to follow online tutorials and started to apply for every UI/UX job openings. (Even though some positions required 2–3 year experience)

Then there was a time came where all my friends got internships as Software engineers, QA engineers but i was just applying only for UI/UX positions. Just like a blind lover..

As they say that there is a silver line in every dark cloud, one day I received a call from a company for an interview for UI/UX position. I was over the clouds after receiving this call and then I prepared myself for the interview with some printouts of my portfolio because that is the only way to present my design skills.

I couldn’t be exactly answer for some of the interview questions theoretically but I share what I learnt from my research on UI/UX. Then a week passed. I received a call from that company and they offered me an internship as an UI/UX engineer. That was the best day of my life. I feel like i won a lottery.

I completed my 6 months internship very well and managed to get permanent position as an Associate UI/UX engineer. And the story continues….

I am still a beginner in my career. But i will reach to my goal soon..

I would like to share my story to someone out there who is worrying about their passion or wonder how to start their career in the field they are interested in.

I just want to say “If you want to drive, start on any vehicle. But make sure you go to the destination”.

My Portfolio

• UI UX Design - Shihan malik
• Shihan Malik on Behance
• Shihan Malik

Read my other articles

Shihan malik - Medium