Migration guide
The Blueprint Design System will allow developers, designers, and product teams to work together more seamlessly and sustainably by unifying around a single working set of standards and design principles.
Design updates
The Blueprint system includes significant changes and additions to our design kits, components, and documentation. Designers can look to Blueprint when designing new experiences or translating existing designs.
Design kits
All colors, typography, and visual styles found within our system
Newly designed icons that adhere to the Redfin Visual Language
Styles and tokens for consumer facing projects
Styles and tokens specific for Redfin Premier branded experiences
Redesigned and refactored component library
Redesigned and refactored component library
Blueprint components
Utilizing our new Design Foundations, optimized for consumer facing Web and Mobile Web platforms. These components take advantage of Figma’s latest features and accessibility best practices while aligning with the Redfin Visual Language.
Primitive tokens
Primitive tokens give us a generalized and broad scale for our styles. All Blueprint Foundations have been assigned a primitive token and should be used while designing and developing, when not using a themed alias token.
Alias tokens
Alias tokens are purposeful giving more specificity and context. Blueprint includes alias tokens for our Consumer Theme, used only for consumer facing projects.
Developer updates
One of our goals is for @blueprint/ui to replace both customer-ui and internal-ui, allowing Redfin engineers to pull from - and UXE to maintain - a single, UI library for frontend web development. Thus, we've taken careful consideration to ensure developer experience on Blueprint is faster, simpler, better tested, and more modern.
Storybook
All of our design foundations and components live in our Storybook instance on their own CI/CD pipeline. You can now update props and rerender changes to your configuration instantly.
Image diff test our components within Storybook using Chromatic, with plans to support integration and accessibility testing in the near future.
React, form, and validation updates
Tokens
Blueprint will support the new design foundations using new tokens, which you can think of as universal variables that will scale across platforms.
Frontend isolation
We are actively working with the MicroShack team to ensure you can use @blueprint/ui out of the box within Joist/Next.js apps.
Testing coverage
In addition to Chromatic, we’ve introduced React Testing Library to our testing suite and ensured that our components meet a minimum threshold of 80% statement coverage.
TypeScript
All of our components are written fully in TypeScript. Ever been confused about which props a component takes? You’ll now see all of the types autocompleted when you plug in our new components.
Versioning + changelogs
Thanks to our pipeline, all releases of @blueprint/ui will be versioned. When you install our package for the first time, you will point to a specific version. To see what changed between versions, review our changelog file. We'll announce new releases in #houseof-blueprint-ui so that you can stay up to date.
Guides and documentation
Technical guides and documentation to adopt Blueprint
Need more support?
For additional support please complete the Blueprint Design System Support Form
FAQ
Wait, what’s Blueprint again?
The Blueprint Design System will allow developers, designers, and product teams to work together more seamlessly and sustainably by unifying around a single working set of standards, design principles. This includes design tokens to parametrize Redfin’s design foundations (e.g. color palette, spacing standards, typography, box shadow, etc.); a new library of components documented live in Storybook; and much more.
As a designer, what are the benefits of Blueprint?
• Refactored component library include auto-layout, variants, props, with nested props coming soon • Optimized styles with accessibility and the Redfin Visual Language baked in • More tools and documentation to prototype concepts quicker and easier
As a developer, what are the benefits of Blueprint?
• 100% written in TypeScript • A11y baked into components • Components (especially fields) are easier to use and debug, new validation, plug & play components • CSS written in BEM = no accidental style collisions • Versioned @blueprint/ui pkg means you can upgrade to the latest when ready
How does my product space benefit from Blueprint?
• Build more accessible experiences earlier • Design foundations and vetted components that align to the Redfin Visual Language • Create consistent and predictable experiences for our users
When should I start using the Blueprint Design System?
• If you’re building a new consumer facing feature consider using the Blueprint Design System • Legacy components will no longer be supported, consumer facing teams should migrate to Blueprint when they have the bandwidth
Can I use parts of Blueprint or do I need to redesign my entire feature?
• Teams can use parts of Blueprint, however consider consistency for your feature when mixing Legacy and Blueprint components • Pages with consumer-ui and blueprint-ui may load slower
What are the potential risks associated with adopting Blueprint?
• Blueprint is an evolving system with new components and documentation added over time • Additional development time to fully migrate your experience to Blueprint • Additional QE time implementing and testing all the businesses cases • Pausing new feature development until 100% migration is complete • COP component dependency, these will need to be updated by the TREX team • Potential impact to conversion / metrics should be watched closely