Implementing Team Conventions & Automation for a UI/UX Team

H ey there, newbie! Welcome to the world of UI/UX design. Whether you just joined a design team or you're freelancing and want to work smarter, not harder, this guide will help you set up your workflow like a seasoned pro. In a real-world design team, it's not just about making pretty screens in Figma—you also need to work efficiently, communicate well with developers, and automate the boring stuff so you can focus on actual design. Let’s dive into some essential team conventions and automation tricks to make your life easier.

Why Team Conventions Matter

UI/UX teams often work on multiple projects simultaneously, involving designers, developers, and stakeholders. Without clear conventions, inconsistencies in design, communication gaps, and redundant tasks can slow down progress. Establishing guidelines ensures

1. Setting Up Your UI/UX Design Environment

1.1 SCSS & CSS Preprocessing: Why You Need It

You might think, “Why do I, a UI designer, need to care about SCSS?” Trust me, if you’re designing components for the web, knowing how SCSS works will make your life 100x easier.

1. ✅ What SCSS does for you:
   • Keeps your colors, fonts, and spacing consistent
   • Helps you communicate better with devs
   • Saves you from writing repetitive CSS

🚀 How to set up SCSS (if you need to work with it)

• 1️⃣ Install SCSS globally:

                      
      npm install -g sass
                      
                  

• 2️⃣ Set up design tokens in _variables.scss:

                      
      $primary-color: #007bff;
      $font-main: 'Inter', sans-serif;
      $spacing-unit: 8px;
                      
                  

• 3️⃣ Follow a proper SCSS file structure like this:

                      
      _variables.scss
      _mixins.scss
      _components.scss
      _layout.scss
      _styles.scss
                      
                  

📌 Pro Tip: If you’re not coding, at least understand how design tokens work so you can structure Figma designs similarly. It’ll help devs implement your designs exactly as you intended.

1.2 Essential VS Code Extensions for UI Designers

If you ever need to tweak UI code (or just inspect stuff), use these extensions to make your life easier:

• 🎨 For Visuals & Design

  • Color Highlight – Shows color previews in code
  • CSS Peek – Lets you inspect styles without hunting for them+

• 🛠️ For Better Code Formatting

  • Prettier – Auto-formats messy code
  • SCSS Formatter – Keeps your SCSS clean

• 🚀 For Productivity

  • Live Server – See your HTML & CSS changes instantly
  • Emmet – Type shortcuts like div>ul>li*5 and it expands into HTML

📌 Pro Tip: If you're handing off designs to developers, make sure your CSS variables in Figma match SCSS variables—this avoids last-minute design inconsistencies.

2. Code Formatting & Conventions Every Designer Should Follow

Even if you don’t write a lot of code, following basic conventions makes teamwork smoother.

2.1 Keep Your Design-to-Code Naming Consistent

            
    .header {
        background-color: #333;
        color: #fff;
    }
    .header-text {
        font-size: 24px;
        font-weight: bold;
    }
            
        

            
    .header {
        &__text {
            font-size: 24px;
            font-weight: bold;
        }
        background-color: #333;
        color: #fff;
    }
            
        

2.2 Automate Code Formatting (So Devs Don’t Complain)

A messy codebase leads to bugs, misalignment, and long review times. Make sure your team follows the same formatting rules.

Here’s how to auto-fix formatting issues before you even commit code:

• 1️⃣ Install Prettier and ESLint

                      
      npm install --save-dev prettier eslint
                      
                  

• 2️⃣ Set up Prettier (.prettierrc file)

                      
      {
          "printWidth": 100,
          "tabWidth": 2,
          "singleQuote": true
      }
                      
                  

• 3️⃣ Use Husky to auto-format code before pushing

                      
      npx husky add .husky/pre-commit "npx prettier --write"
                      
                  

3. Automating UI/UX Workflows

3.1 Figma Plugins That Save Time

• 🚀 Productivity Plugins:

  • Design Lint – Finds inconsistent fonts, colors, and spacing

  • Unsplash – Insert free high-quality images into your mockups