New

Introducing a new and improved editor powered by VS Code Web

Learn more
arrow_back
Blog chevron_right Highlights
Nov 29, 2020

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.

Siddharth Kshetrapal
Siddharth Kshetrapal
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.



Keep reading about Highlights .

Cloud development inside your network with Tailscale
Highlights Feb 7, 2023

Cloud development inside your network with Tailscale

How Tailscale can connect an application running in CodeSandbox to your private resources.

Enabling communities to learn with CodeSandbox and IngressiveForGood
Highlights May 25, 2022

Enabling communities to learn with CodeSandbox and IngressiveForGood

CodeSandbox in collaboration with Ingressive4Good supporting developers in communities to build and learn new skills.

    Fusing Open Source and Work with Paul Henschel
    Highlights Dec 1, 2020

    Fusing Open Source and Work with Paul Henschel

    Coders and creators of all kinds use CodeSandbox to prototype and share their ideas. This creator profile showcases the sandboxes of web animation pioneer Paul Henschel and we chat about the symbiotic relationship he's forged between his open-source contributions and professional work.

      Curiosity-driven Development with Charlie Gerard
      Highlights Nov 30, 2020

      Curiosity-driven Development with Charlie Gerard

      Coders and creators of all kinds use CodeSandbox to prototype and share their ideas. This creator profile showcases the sandboxes of creative technologist Charlie Gerard and we chat to her about how she harnesses her curiosity to inspire and drive her creative experiments.