Tim Tries: Figma, Zeplin and Storybook. Mind is blown...

I sometimes just try out new tech or web services for the first time and give my feedback as I go. This is the #timtries Series. In this video I look at Figma, Zeplin and Storybook. I recently learnt how nicely all these tools integrate so developers get a MUCH better DX. Zeplin acts as the hub and the creative source of truth for development, QA, business analysts, UX and creative people.
Conclusion: Mind is blown... Zeplin CLI is amazing.
Disclaimer: this content is not sponsored and my opinions are honest and real time.
Follow me here:
Buy me a coffee: www.buymeacoff...
Website: timbenniks.dev/
Twitter: / timbenniks
Github: github.com/tim...

[@pedropaulino6289]

Great tutorial, my friend. The only thing I would consider updating is to add your video feed to the upper corner right of the window, so we can read the command line interface. Other than that, thank you for for the help: Already deploying my Storybook builds on Github!

[@timbenniks]

Thanks! I will take that into account!

[@agnemedia624]

Wow Tim, this is fantastic. Thank you for the quick run over connections and options this tool can do and connect workflow from A (design) to Z (application components)

[@jnjnczk7805]

Really good video. I have qq. Why you using Figma + Zeplin + Storybook not just Figma + Storybook? It seems to be simpler and faster to use only 2 tools

[@timbenniks]

Zeplin is just really good as a design source of truth but you don’t really see that in this video. It has a great way to show a style guide, color guide, typography and it’s inspect system is top notch. On top of this it can link out to a bunch of other systems and it’s therefore amazing for business analysts, clients, QA, UX designers etc. The point is that zeplin is the hub and the other sources plug into it.

[@jnjnczk7805]

@@timbenniks Thanks for the answer. Yes, Zeplin definitely helps with these things, but I wonder if it's not adding another tool (learning something new + budget + time), Figma has it all + you do not waste time synchronising with another tool,, only with Storybook. Maybe some short series on Design System development and documentation preparation? It would be great!

[@timbenniks]

I’ll have a look into it. If Figma does more I’d love to explore. Less tools is always better :)

[@timbenniks]

Beniamino Marini Wow! I’ll have to check this out.

[@emilz0r]

as a dev, not designer, i really hate having to go through a jungle of designer specific controls to get to the things i need in figma. zeplin strips all this out. plus you can see and go back in the history of when the designers pushed new changes, and can be sure whether or not the designer added something or if you are going mad.

[@ilandiamond5555]

Very cool man !

[@jon8236]

You can also add either the figma or zeplin component to storybook so you can compare design and code in one place.

[@timbenniks]

Cool! Do you have some links to documentation? I’d love to explore this.

[@j0hannes5]

@@timbenniks you can do this by adding a Figma link to the React component. Then a Figma iFrame pointing to the Figma component shows ups in Storybook.

[@j0hannes5]

kzbin.info/www/bejne/pmPWi353hbSEjtU

[@shutterradio]

Well, looks like we gonna need new specialisation for that, like devOps but for design :)

[@timbenniks]

Lambda functions to sync designs and content into a designOps environment. Haha.

[@PhilippUnterreiner]

it's already happening, there are job titles for this

[@FordArran]

dude! it helped my beginner ass so much!

[@timbenniks]

That’s exactly why I make the video. Thanks for watching!

[@FordArran]

@@timbenniks Much appreciated

[@redarus3969]

Hi Tim. This video is amazing. But I have a question to ask you. The button example in this video (Component 1), I made some update/changes to the button on Figma, will the button (Component 1) be updated in Storybook also?

[@timbenniks]

Hey, thanks! I'm afraid not. However, this video is a little old, so perhaps nowadays they have a much better integration...

[@aaronruiz816]

The only thing this video is missing is you wearing a big gold chain.

[@keithprice3369]

Oh, man! You just totally dismissed the most important feature. I want to know if it's possible to make a change in Figma and have it auto show up in REACT.

[@j0hannes5]

there is a Figma plugin called "Anima" it gives you (somewhat redundant, but working) React code for your Figma components. It this wasn't possible when this video was made.

[@AlexandraC]

Zeplin gives you the React snippets automatically. I think you need an extension you get get on their website, it's like an add-on

[@emilz0r]

if you mean that changes in figma automatically changes code and commits it to git and publishes the changes to a storybook instance to the web, then this is not possible, and will not be in many many years. the auto-generated react code that other people mention is not ready for production in any means, and should only be used as reference when implementing the real thing.

[@rileydavidjesus]

@@j0hannes5 It's not worth it unless you really like styles components

[@j0hannes5]

@@rileydavidjesus not sure what you mean. But I found a better alternative called plasmic.app which accomplishes what @emilz0r says is years off

[@kindasport]

Cool Video. But Figma also has a Inspect tab were you can see CSS and measurements. I don't see the point of using Zeplin. In fact at least for me, I would have a hard time selling this to my customers. Figma & Storybook okay. But Zeplin is like Invison: Obsolete.

[@timbenniks]

Times change, tools adapt. I think zeplin still plays an important part as the heart of the design system. It’s more for being the source of truth and it is immutable with history and classification. Figma is still a design / edit tool. Think of huge companies, give them Figma access and things might go wrong due to editing capabilities etc.

[@skoizumi291101]

Thanks for the great video. I have a question. I am a developer. Our web designer is awesome but he is not necessary deep knowledge of css. He always designs in Figma and publishes components in the zeplink. Is it worth to hook up zeplink with storyboard? I almost have to create storyboard by myself referencing, fonts, and components in zeplink. I am curous how others developers are communicating with designers if you are using storyboard.

[@ElectricBlanket1122]

You mean storybook?

[@ElectricBlanket1122]

Storybook is for playing around with the component which you can't do either on figma or zeplin. It's there as a demo of the component and all its capabilities which you can play around with. Like check what kind of colours it can take in, or what it does on action etc etc, compared with figma/zeplin which would have a one dimensional representation of the component, and to demo different states you have to copy past for show. For communication, designers can use storybook to see how you've implemented the coded version of what they've designed and whether that is functionally and design wise accurate. They can use storybook to user test and approve your implementation.

[@skoizumi291101]

@@ElectricBlanket1122 sorry yeah I meant Storybook!

[@marwanlouhichi8329]

Thanks for the great work ! Is there a similar tool for developing language such as Swift (IOS) and Kotlin (Android) ?

[@timbenniks]

Actually zeplin shows Swift styling. It’s a setting somewhere :)

[@marwanlouhichi8329]

@@timbenniks Thanks for the answer !

[@TwoLeggedTriceratops]

Off-topic but you're like a white 50 cent