aiux
PatternsPatternsNewsNewsAuditAuditResourcesResources
Overview

Setup

  • Install GitHub Copilot
  • Your First Code Suggestion
  • Workspace Setup for Designers

Core Features

  • Autocomplete & Code Completions
  • Chat for Design Questions
  • Inline Code Explanations

Prototyping Workflows

  • From Design to Interactive Prototype
  • Building Responsive & Interactive Layouts

Developer Collaboration

  • Reviewing Developer Code
  • Communicating with Your Dev Team
  1. Guides
  2. /
  3. GitHub Copilot Guide for Designers
  4. /
  5. Workspace Setup for Designers
SetupLesson 3 of 10

Workspace Setup for Designers

2 min readGitHub Copilot for Designers

Configure Copilot for your design workflow. Learn settings and shortcuts that make coding faster.

Every designer codes differently. Let's customize VS Code and Copilot to match how you work. We'll enable keyboard shortcuts and adjust settings for comfort.

Essential Settings

1

Open Settings

Click File > Preferences > Settings (or Ctrl+, / Cmd+,)

2

Search for Copilot

Type "copilot" in the settings search box

3

Enable Inline Suggestions

Make sure "Copilot: Inline Suggest: Enabled" is checked. This shows gray suggestions as you type.

4

Customize Auto-suggestions

Look for "Copilot: Auto Suggest" and set it to your preference (on, off, or only on demand)

5

Save and Restart

Settings save automatically. Restart VS Code for all changes to take effect.

Recommended VS Code Settings
{
  "github.copilot.enable": {
    "*": true,
    "plaintext": false,
    "markdown": false
  },
  "editor.inlineSuggest.enabled": true,
  "editor.inlineSuggest.suppressSuggestions": false,
  "editor.tabCompletion": "on"
}

Key Keyboard Shortcuts

  • Tab = Accept suggestion
  • Escape = Reject suggestion
  • Alt+[ = See previous suggestion
  • Alt+] = See next suggestion
  • Ctrl+Enter / Cmd+Enter = Open Copilot Chat (quick explanations)
Privacy Tip

GitHub Copilot uses your code to improve suggestions. If you work on sensitive projects, you can disable Copilot for those files by adding them to .copilotignore in your project folder.

← Previous LessonYour First Code SuggestionNext Lesson →Autocomplete & Code Completions
← Back to GitHub Copilot Guide for Designers overview

On this page

  • Essential Settings
  • Key Keyboard Shortcuts

aiux

AI UX patterns from shipped products. Demos, code, and real examples.

Have an idea? Share feedback

Get daily AI UX news

Resources

  • All Patterns
  • Browse Categories
  • Contribute
  • AI Interaction Toolkit
  • AI UX Audit
  • Agent Readability Audit
  • Newsletter
  • Documentation
  • Figma Make Prompts
  • Designer Guides
  • All Resources →

Company

  • About Us
  • Privacy Policy
  • Terms of Service
  • Contact

Links

  • Portfolio
  • GitHub
  • LinkedIn
  • More Resources

Copyright © 2026 All Rights Reserved.