Stevie from FigMayo

We let you create delicious design system docs directly from Figma 😋

[Stevie from FigMayo @fig_mayo]

📣 FigMayo variables are now in Beta 📣

Automatically sync your variables from Figma to FigMayo. We’re super excited to start testing this one!

If you want to join the beta test, get in touch and we’ll switch them on for you - for free! #figma #designsystem

[Stevie from FigMayo @fig_mayo]

@markjenkins Yep, gotcha. Our solution of attaching frames in Figma is a bit crude right now, but tries to address that - we're working on this tho!
Also, I'm a huge 90s hip hop fan too. Been on a Heltah Skeltah, Sean Price listening spree today 📻

[Stevie from FigMayo @fig_mayo]

@markjenkins Worth a pop as it literally takes 2 mins to build a site, you just need a link to your figma lib. You can add page, section and component notes (from Figma) and attach frames to components, so there's a fair bit of contextual info you can add right now.

[Stevie from FigMayo @fig_mayo]

@markjenkins We're hoping to ship this by the end of the first quarter now. Would love to grab you for some feedback if you've given the product a try?

[Stevie from FigMayo @fig_mayo]

@markjenkins Hi Mark, what are you referring to?

[Stevie from FigMayo @fig_mayo]

✅ Don’t overcomplicate the process — it’s a product, start small and iterate fast

✅ Have some loose metrics to measure progress — these can be simple but will help get buy-in

[Stevie from FigMayo @fig_mayo]

Starting your company’s first design system can be intimidating.

It doesn’t have to be!

We’ve written a few thoughts about this challenge here.
https://t.co/HQ6eSD8nNI

[Stevie from FigMayo @fig_mayo]

✅ Start with the essentials - what is the smallest slice you can deliver to get moving?

✅ Sell the value! Set the narrative around why this will help

✅ Adoption is key. Get some core allies across teams — a successful DS is one that’s actually used!

[Stevie from FigMayo @fig_mayo]

@svorklab Thanks for sharing @svorklab - agree with your sentiments entirely. We strongly believe in "just enough documentation" for your needs.

We're working hard to introduce more flexibility to add richer contextual docs to your sites, from Figma and also FigMayo itself.

[Sil @svorklab]

Big fan of FigMayo it’s my number one recommendation as a tool for #DesignSystem documentation especially for DS teams of one / smaller teams

Why 🧵

https://t.co/IQinlm4tJz

[Stevie from FigMayo @fig_mayo]

Prop table on the way! this will lay out the structure of your components and let you see variants, booleans and instance swaps.

We'll also show nested components — this will give you an idea of how complex components are constructed. This is all generated automatically 🪄 💫

[Stevie from FigMayo @fig_mayo]

@AdhamDannaway Checks the coast is clear...detaches component

[Chris from UX Playbook ⚡️ @uxchrisnguyen]

I built a design system from scratch; spent weeks to launch.

And no one used it...

3 mistakes I made (so you don’t do the same):

👇👇👇

[Chris from UX Playbook ⚡️ @uxchrisnguyen]

Focus on sharing the message NOT sharing the file.
Focus on quality of context NOT quality of shadows.
Focus on being a product enabler NOT the component police.

If you use Figma, then @fig_mayo is your best option.

Happy building!

[Stevie from FigMayo @fig_mayo]

@buninux Looks great ♥️

[Stevie from FigMayo @fig_mayo]

@disco_lu @figma Next step rendering the entire library as code 😅

[Stevie from FigMayo @fig_mayo]

We've got our first prototype up and running that lets you add any frame from @Figma to your FigMayo site! This will let you add detailed documentation from Figma and attach them to components. All rendered in HTML & CSS - still a bit rough but almost there. @disco_lu

[Stevie from FigMayo @fig_mayo]

Thanks for all the support so far on Product Hunt! It’s very cool seeing all your @Figma design systems being instantly turned into fully-fledged doc sites like this 👉 https://t.co/3JJ5ceo4eK

[Stevie from FigMayo @fig_mayo]

We’re now live on Product Hunt! Shameless request for your support incoming. If you have a Product Hunt account we’d be grateful if you could throw a vote our way. (A jar of mayo will follow in the post 😜) https://t.co/kkL9BBj7qV

[Stevie from FigMayo @fig_mayo]

We’re now live on Product Hunt! Shameless request for your support incoming. If you have a Product Hunt account we’d be grateful if you could throw a vote our way. (A jar of mayo will follow in the post 😜) https://t.co/kkL9BBj7qV

[Stevie from FigMayo @fig_mayo]

Some updates coming this week!

📄 Notes attached to type and colour styles will now be included.
👁 Boolean properties will be shown on components that have them, with the default setting visible.
🖊 Custom fonts! You can upload these so your typography styles display correctly.