Building an OpenGraph image React component in CodeSandbox, based on a Figma design

Chris Biscardi
InstructorChris Biscardi

Share this video with your friends

Send Tweet

We build a React component that implements our Figma design with the intent of creating screenshots in a headless browser later. We use Emotion, a CSS-in-JS library, Flexbox, and React Textfit to build a scalable OpenGraph image. We cover using complex CSS selectors with multiple pseudo-selectors as well as common Flexbox layout techniques such as space-between.

~ a month ago

instead of using the /** @jsx jsx / pragma, use /* @jsxImportSource @emotion/react */