Creating the new @mbd website was a challenge.

Every component had to be light/dark mode responsive.

Here's how I nailed the design...

Make your app, feed or mini app feel more personal with AI powered recommendations. Incubated @a16zcrypto CSX'23 -  getembed.ai

It all began in Figma with the design system. I created color tokens and variables for both light and dark modes.

After the initial draft of the homepage and essential components began to take shape, I transferred both the Design System and Designs to Framer. (Yes, I should have started directly with Framer, but development wasn't part of the initial scope.)

The home page was ready, but the client needed graphics to explain the product better. I experimented with framer animations, ensuring every div and element used the design system for full mode responsiveness.

After delivering the first animation, I found a Safari bug. So, I redid it using fewer divs. This solved the issue.

It has been and will continue to be a wild ride! I'm happy to be part of @mbd's journey as a fractional designer.

Follow to get the best of Farcaster using @mbd - AI Recommendation Engine for Web3. @a16zcrypto css23. Ex-ML Lead @Chainlink. Ex-Sr Data Scientist @AWS.

generative artist. digital design. — https://www.dennis-chilas.work —hosting /gradients

Nope, we’re now using framer as source of truth and I’m still using Figma just for ideas exploration.
I know there are plug-ins to sync tokens

very nice overview emanuele! are the design tokens synced automatically to framer? 111 $degen