Skip to main content

​
DesignByExamples

DesignByExamples is an open-source documentation that explains core product design concepts through clear definitions, practical guidance, and real examples across modern design tools. This project is built on a simple idea:
Design tools change.
Design concepts don’t.

​
Why DesignByExamples exists

Most design documentation today is:
  • Tool-specific
  • Feature-driven
  • Hard to translate across platforms
As a result, designers often learn how to use tools without fully understanding:
  • What problem a concept solves
  • When it should be used
  • How it applies across different tools
DesignByExamples flips that approach. We start with the concept, then show how that same concept is implemented in tools like Figma, Framer, Lovable, and V0.

​
What you’ll find here

Every concept in DesignByExamples follows a consistent structure:
  • What the concept is
    A clear, plain-language explanation.
  • When to use it
    Practical scenarios and decision guidance.
  • Core principles
    The rules that make the concept work.
  • How it works across tools
    Side-by-side explanations of how different tools implement the same idea.
  • Common mistakes
    Patterns that lead to fragile or inconsistent designs.
The goal is not mastery of a single tool —
the goal is transferable design thinking.

​
Who this is for

DesignByExamples is for:
  • Product designers building real-world interfaces
  • Designers transitioning into design systems or design engineering
  • Engineers who want to better understand design intent
  • Anyone working across multiple design tools
If you’ve ever thought:
“I know how this works in one tool, but I don’t really understand the concept behind it”
You’re in the right place.

​
Open source & community-driven

DesignByExamples is an open-source project. That means:
  • Anyone can contribute
  • Concepts evolve as tools evolve
  • The documentation reflects real-world usage, not marketing narratives
If you care about clarity, systems thinking, and better design collaboration — contributions are welcome.

​
A note on tools

Tools are important.
But tools are not the point. DesignByExamples treats tools as implementations of ideas, not the ideas themselves. Once you understand the concept, switching tools becomes much easier.
Let’s build better systems, one concept at a time.