Vectors

Vectors are shapes, icons, and illustrations you create in Figma. In web UIs, vectors are almost always used as icons or decorative elements. Yes, I work with vectors—and I want to help you use them in the smartest way possible.

Why Use Vector Components?

Here's a tip: Always turn your vectors into components before using them in other components (like buttons, hero sections, or cards). This keeps your code DRY (Don't Repeat Yourself) and makes your team happy. Reusable vector components mean less code duplication and easier updates.

info

Turn your vectors into components for easy reuse. Your future self (and your teammates) will thank you!

Practical Example

Let's say you have an icon vector. Make it a component first, then use it in your button:

Icon Component Example

// Icon.jsx
export const Icon = () => {
    return (
        <svg width="24" height="24" viewBox="0 0 24 24">
            {/* SVG path here */}
        </svg>
    );
};

// Button.jsx
import { Icon } from './Icon';
export const Button = () => {
    return (
        <button>
            <Icon />
            Click me
        </button>
    );
};

Common Mistakes

• Copy-pasting vector shapes everywhere instead of using components
• Making small changes to each instance (leads to inconsistency)
• Not naming vector components clearly

caution

Don't copy and paste vector shapes all over your design. Use components to keep things consistent and maintainable.

Best Practices Checklist

• Turn every vector into a component before reuse
• Name your vector components clearly
• Use instances of vector components in other components
• Avoid editing individual vector instances
• Keep your icons and vectors organized in a dedicated folder or section

---

Want more tips? Check out Layer Names and Backgrounds to make your designs Bob-friendly.