Bridging the Gap Between Design and Code with Segun Adebayo

Coders and creators of all kinds use CodeSandbox to prototype and share their ideas. This creator profile showcases the sandboxes of Design Systems expert and Entrepreneur Segun Adebayo. We chat to him about how he turned a problem into a way to break down barriers between designers and developers.

Segun is an Engineering Manager for UI and Design Systems at Tradeling and is the creator of the React component library Chakra UI.

Check out his profile on CodeSandbox for templates and experiments that explore how to start with and use Chakra UI.

How would you describe your work?

My work focuses on improving the productivity of product teams by creating effective design systems. I help with the high-level strategic components of a design system and navigating thorny topics like CSS architecture, component-based development, responsive web development, accessibility, device testing, and more.

How did you get into it?

I was a UI Designer for about 4 years and created UI kits, designing over 500 screens. I noticed it was challenging to convert designs to code, and working with other libraries made this even more difficult. So I first learned how to build composable React components from top influencers in the React community, then, to apply this knowledge, I created a web resume builder called Careerlyft. This led me to create a component library that made it easier to add new features faster, so I decided to open source. And Chakra UI was born.

Who are the people or projects that inspired you while you were learning?

There are many! Ryan Florence's courses on React Training and reading his code (especially his funny comments). Kent C Dodds' testing library course and reading his code, too. As well as TypeScript fundamentals by Mike North on Frontend Masters. And learning from Styled System as well as Tailwind CSS and it's styling paradigm.

What are you excited to learn next?

I'm passionate about figuring out how to help teams code components at the speed of design, along with bridging the gap between design and code using computer-based learning, pattern recognition, and framework-agnostic components.

A tip for beginners

Learn the basics! So that's Semantic HTML, not just HTML. Pay attention to the HTML elements, their meaning, and possible attributes they can take. That's also the basics of CSS, how the HTML structure affects the way you style elements and mobile-first media queries. I recommended learning just enough JavaScript to help you get started with React. Then dive into accessibility and assistive technologies.

A project to fork

Fork this example and follow the Getting Started guide to learn how to get to grips with Chakra UI.

Profile pages on CodeSandbox are where you can share your sandboxes and let folks know a little bit about yourself and your creations. They're a great place to showcase your work and link from your website, social bio, or resume. Register or sign in to make your own.