Setup for UI/UX Designers and Front-End Developers

Pixabuddy Setup for UI/UX Designers and Front-End Developers

New 2021 setup for UI/UX Design and Front-End Development

Pixabuddy Setup

A good setup always matters for good productivity. This is my personal point of view.🙂 Here is my brand-new setup for UI/UX design and Front-End Development. I want to give you the full information of my setup and give you each of the products link so, that you can easily buy the same product. Let’s start -

Device -

1. 💻 Apple MacBook Pro M1 Chip with 8 GB RAM and 256 GB SSD Storage

Buy link - Click here

2. 🐭 Logitech MX Master 2S Wireless Mouse

Buy link - Click here

3. 🎹 Logitech K380 Wireless Multi-Device Bluetooth Keyboard

Buy link - Click here

4. 7CR Wood Portable Laptop Table (The cheapest one) -

Buy link - Click here

5. Seagate backup plus slim 2TB HDD

Buy link — Click here

6. AmazonBasics 13.3-inch Laptop Sleeve

Buy link- Click here

7. AmazonBasics USB 3.1 Type-C to 3 Port USB Hub with Ethernet Adapter — Black

Buy Link- Click here

8. 🚀 High-speed Broadband connection (In my case I use GTPL connection with a speed of 100mbps )

9. 🔊 A music system ( This is totally optional, I need it because Music helps me to refresh my mind and boost up my work mood 🎧😅.)

Design Tools - (UI/UX Design)

Adobe Illustrator, Adobe Photoshop, Adobe XD (Adobe XD Free), Figma

Get the Adobe Creative Cloud Subscription - Click Here

Figma is Free Software for everyone, and it’s live on your browser. But if you want to download and install it into your local machine, here is the - Download link

Front-End Development -

My stack = Html5, CSS3, SASS/SCSS, Bootstrap 3-5, Node.js, NPM package manager, Homebrew, React, PHP, MySQL, Git, GitHub, Visual Studio Code

All the process to set the environment like 👆

1. Install Visual Studio Code - Download link
2. Install local server XAMPP for OS X ( In my case Apple Silicon) - Open this link and download the file named - xampp-osx-8.0.3–0-installer.dmg and install it locally.
3. Homebrew - Install it 👈 Here is the full guide on how to install homebrew to follow the process and install it. 🚀
4. Install Node.js - Click Here ( Download and install it )
5. React Installation - If you want to run or, create a React App on your local machine 👉🏻 Visit this page
6. Git Installation- https://git-scm.com/download/mac

Optional: I customized my mac terminal. If you want to customize your terminal then watch this video on youtube and follow the steps to customize your own.

You are almost ready with a setup like me 🔥

Let me give you an idea so that you can understand how I use my technology stack.

For any Front-End projects - I use a folder structure like 👉🏻

🗂 Project_name > 🗂 Assets (

🗂 CSS ( 📁 style.css + 🗂 vendors) +

🗂 SCSS ( 🗂 abstracts + 🗂 base + 🗂 components + 🗂 layout + 📁 main.scss + 🗂 pages )+

🗂 Images ( 🗂 icons + 🗂 logo)+

🗂 JS ( 📁 script.js + 🗂 vendors ) ) +

📁 index.html

I use the node-sass compiler to compile the SCSS file into the CSS. Run some automation to build and wrap up the projects and make them ready for the launch. 🚀

Here is something extra, I have installed laravel on my computer because I’m working as a Front-End Developer in KiwisMedia and KiwisMedia is built on laravel framework. So, I need laravel on my local machine to contribute there.

Thank you very much for your valuable time. 🙏 Hope you enjoyed reading this blog.

Find my journey on KiwisMedia - https://kiwismedia.com/@saha

My portfolio website- https://www.pixabuddy.com/

Don’t forget to follow me on social media 🌏- Instagram, Twitter, Behance, Dribbble, Pinterest