How to Hand-off UI Designs to Developers (Figma vs Zeplin)

[@haydar5774]

Let's go! The GOAT is back.

[@njengathegeek]

You noticed that too

[@Mizko]

Thank you guys! I’m humbled ✌️ I’ve been swamped with finalising the new office and course. More details soon! But I’m back!

[@k-turner]

I was wondering the same thing

[@Mizko]

@@k-turner Day made. Thank you!

[@franciscomsosa]

I'm almost done finishing up a bootcamp in UX and UI design, and I'm trying to familiarize and up skill myself to industry standards as much as I can by watching videos like this one. Personally I really value honest opinions when the solution promoted is also the sponsor. Thank you for the honest opinion and for the video!

[@emsvincoffee5184]

Thank you so much, Mizko! As a beginner designer, this content didn't just help me understand how Zeplin works but also provided very insightful ideas about how to organize and manage my projects. Wishing you and your team continuous success.

[@Silverjerk]

As a fellow UX design lead, I appreciate these kinds of videos, where you dig into workflows and real-world scenarios. I'd love to see is a deep dive into file structure, project architecture, and how to manage large product design and development. In a real team environment there are so many factors that go into managing these assets that it can be overwhelming trying to organize and keep the seams together. I adopted a similar setup, with notes, a marquee (as I call it) that denotes status, the scope of the screens it covers, and short descriptors, as well as tooltip like pop-outs for even more screen or even element-specific notations.

[@dwilson420]

Love this video! Zeplin makes handoff so much faster.

[@Mizko]

10000%

[@njengathegeek]

This is so educative, I had to watch it till the end with so many rewinds. Nice one g.

[@Mizko]

Thank you Chris!!

[@atishchakma7634]

please make a video that properly explain about 'UI UX project Documentation" it will so much informative for all the designers out there who are stuck in documentation system and did not moving forward to do actual real life project. Thanks for this video Mizko, you're such a true mentor for us. whatta explanation!

[@gokalpbayramli]

Great Video! Zeplin is a great and convenient tool ... but it can get pretty expensive since every developer has to have a paid seat. It also disconnects the design files from the developers. Doing the design and hand-off in Figma pushes you to stay organized in your design files. An update for Figma, to show the screens in an isolated mode would be great! Zeplin is great for PM, customers, analysts. Just my thoughts 😀

[@danianla12]

Thank you for sharing your thoughts! I'm a solo designer at an startup with a lot of developers and I was considering using Zeplin to do the hand-offs

[@Mauritz86]

I totally agree. Before Figma (at the Peak of Sketch) it was great to have a tool for handy hand-off but Figma completely changed that. And even If the hand-off is more organized in Zeplin, it's a bit of extra effort and overpriced for a hand-off only tool. Nevertheless i also Like the ux of Zeplin. Easy and straight forward.

[@lunchisonme]

I used Zeplin years ago. Replaced with Figma. But came back today to see how it has changed. And there are lots of features here which are good and would help. BUT those prices are so off the charts. I was looking for DevOps integration and one project in the Org tier immediately puts our entry point for Zeplin in the Enterprise tier. As a relatively small but growing team, sadly this discounts all the Zeplin benefits in a heart beat. Very disappointing.

[@moonsandbears]

Great video, love the honest take at the end and amazing practical examples of design hand-off. Thanks a ton !

[@Junnanma]

Man, I haven't been able to keep up with your videos. Wish I watched this earlier. Did not know Zeplin has iterated into such a great complementary tool to Figma!

[@azharhabeebmohamed.s6672]

Perfectly explained - Thank god

[@granttheemperor2529]

Yooooo, it's just as if read my mind before doing this video. Thanks so freaking much 🙏🏽🙏🏽

[@Mizko]

Haha, maybe I did!

[@granttheemperor2529]

@@Mizko 😂

[@dave_dj1658]

Always heaps of value. Thank you mate!

[@Mizko]

Thanks for taking the time and letting me know! Makes my day.

[@s.hammad]

Super Awesome video mate! The best part that it gave insights to the workflow process which was so helpful. Would greatly appreciate more videos like these one where we can see more workflow process. Thanks again for the quality video. Keep up!

[@Ex3c.]

I love this, it came at the right time, also please can you make another video on how to Deliver to a developer solely using figma. Like a tutorial video 🥺🥺🥺

[@fernwehtwl]

Hello Mizko! Im curious to know if his designership course goes even more details than this video regarding hand off to developers. All of the lessons in the master figma class is really short like 4-5 minutes and this video is a really good 20 minutes of packful information

[@Mizko]

The course provides more detail, resources and techniques on the handover process. It’s not the length, but the insights shared :)

[@fernwehtwl]

@@Mizko thanks for the clarification Mizko! Im curious to know though if there is a promotion/discount coming up soon? I learned that the price has jumped up since last year and Im wondering if you can offer a discount to help those that are financially strapped but still want to learn figma.Thank you:)

[@ogundejiabiola3080]

This was interesting to watch. I love the explanation

[@Mizko]

🙏🏼

[@johntaiwo2]

Your videos are really awesome. Thanks for this

[@SmartJantaFinanceandBusiness]

Great Video😍👍!!... i want to add a point here: That why to dupliacte the page or add a comment in Zeplin??.... As we can simply add a comment in Figma saying that we have removed the referal code!😀

[@Mizko]

Great question. The example I provided was overly simplified. Normally in a real project, there are many more changes than just 1.

[@vaishnaviv7676]

Underrated video! gonna use zeplin now ^_____^

[@Gulperioztan]

It is a great video thank you so much. You saved the day for me❤😊🎉

[@chrisronan]

Hiya Mizo! Chris from Texas here. Are you still using Zeplin today in lieu of figma dev mode? Personally I’ve been using dev mode and it’s ok. But when trying to be hyper organized I’m finding a case for cracking open zeplin again. Hope you are well!

[@nouztrade]

Valuable and helpful content! Thank you mate

[@Harry-xe8kh]

Important content Thank You 🥳

[@Mizko]

Glad to hear Harry!

[@mdshafqatullah4996]

Hey dear can you tell me how many days it's taken for the whole project, I need an honest reply pls...

[@thaole-cv6qb]

Hi Mizko, can I ask why I don't have the button "Add all colors". THanks a lot.

[@apexaramani2297]

It was reaaalllyy helpful! Thanks!

[@youwen9829]

That's really helpful, thank you!

[@Pankhuri910]

Hi Mizko, Your videos are super helpful in my UI/UX design work. Can you make a video on the frame naming conventions? In the above video for an example it says sign up/1.0.3-sign up unified. How do you decide if it would be 1.0.3 or 1.1.3 or 1.2. 3. Please share. Thanks a bunch!

[@TravisHi_YT]

The concept you're looking for is called "Semver".

[@user32352]

you design for the mini? apple resources come in 14 pro size for components and layout, wonder what the best is to use

[@avalonstd]

Love it! Thanks man!

[@Mizko]

Thanks!

[@uiaugust97]

Now it would be the best time to do Dev Mode vs Zeplin (Including the price)

[@bigbadbur7832]

Great Video, very informative and helpful Mizko, could you also do one on how to prepare the design for stakeholders or clients?

[@yashodalangatad]

Great video! How prototypes are handled in zeplin? how to export prototyped screen from Figma to zeplin and how zeplin handle this?

[@braids1272]

How many screens / pages for example would you consider a project that would be more beneficial to use Zeplin?

[@ogunleyejuliet4101]

Hiii, thank you for your amazing content

[@Mizko]

Thank you!

[@vidhunnan]

Hey hey Mizko. This is wonderful. Have following a simlar structure myself. Would love to know how you manage organising files for a super product which has 3 or 4 business verticals and verticals are divided into teams in Figma? And some of features also cross over with different design teams within a product org.

[@darwinalvarez8597]

Thank man! This is gold 🔥

[@AsmaButt-st7wv]

Hi mizko, can you please provide the file link of this for learning purpose

[@bvs455]

Hi, Mizko! Amazing information! I have a question, your file seems very organized in Figma and you mentioned that you place the variants of the screens vertically. For High Fidelity prototypes, sometimes I need to create new screens so the animations will work (sometimes a kludge because of Figma's current limitation in terms of animation), how do you organize those screens that are just there to make the animations work in the prototype among the variants of the screens? I sometimes struggle to organize my screens because of those aditional screens among the variants.

[@emmapotter2333]

I think if it's a project that big (the one Mizko showed in the video), we should break it down to even smaller parts, group and label them so they look organized, and won't be messy to add some extra screens. What irem said is in Zeplin and I think you are asking how we should do in Figma.

[@bvs455]

@@emmapotter2333 That was the answer I was looking for. Thank you for your reply! Yes, I meant in Figma. I was wondering how the screens should be organized when you have so many screens and interactions for the high fidelity prototype. The links between the screens can be better organized if the screens are placed in a certain order and position so you can better see and understand the connections, but that will sacrifice the organization of all the screens to be better understood by other teams. The new feature that was added in Figma recently, called sections, might make things easier. Maybe highlighting the main screens to differentiate them from the screens that are just there to make the transitions and animations work.

[@1deplatt]

Zeplin might be better for handoff than Figma but then the whole team has to learn another tool. That’s a big ask.

[@Mizko]

Great point, but that’s why I leave the decision with you :)

[@idowutobi9080]

Nice to you have you back Mizko This video is timely

[@Mizko]

I am so happy to hear that you're all enjoying my return! Glad you found it useful

[@albertcona6499]

Hi, we have really trouble exporting components to zeplin from AdobeXD, does your way of exporting components from Figma to Zeplin will also be possible on adobe XD? Becuase currently we are manually reaming all components once we exported it to figma. Can anyone help me? Thanks!

[@DesignDen673]

can you pls make a video on how to organise figma files?

[@bitokay147]

where can i find a coupon code for the master class please?

[@ogunleyejuliet4101]

I am working on a similar project like the one you showcased and i've been stuck 😭, can you post on figma Community ?

[@Mizko]

Ah! Sorry I can't post to Figma Community. This was a real project.

[@simonblanco6716]

Thank you!

[@livshowsfe3229]

Hey mizko, how did you create those button links in your 'general notes' would love a tutorial on that

[@MaIIga]

Hi! any recommendation type web page for animations/gift elements for this type of proyects ? thx :)

[@Dastankbank]

Such a valuable video!

[@desmonwilliamsitorus6817]

in figma you can limit action the viewers to make sure ur file don't mess up

[@МарияБутримова-е2е]

soooo helpful! thx u!

[@sathishramyen4235]

Impressive 🎉❤

[@bagchi_sagnik]

Amazing video!

[@tazz763]

Nice video, but how to export Shadow style to Zeplin ?

[@dave_dj1658]

I don’t think there’s a direct way to do this, but you can create card mock-ups with the shadows you want and upload those as components to Zeplin. If you label them as shadows and specifically annotate them to developers, they should work fine. You just won’t get them in the side panel of “reused components”

[@tazz763]

@@dave_dj1658 thanks, that's what I did, but official there isn't a way like how colours and typography get sync with zeplin automatically, if this works for Shadows then that would be awesome

[@Mizko]

@@tazz763 As Dave mentioned, that's the best way. I will put your request through directly to their team :)

[@thomasdahl2232]

How do you feel about Anima?

[@Mizko]

Hey Thomas! I haven't tried Anima before. I might take a peak at it some time.

[@merisimamovic965]

Great tips!

[@KalvinPatel]

I know I’ve asked this before but wanted clarification. How do I connect your designership to my Figma projects I’m working on so I can use your different variants?

[@andreslopezcontrerasromrto1770]

You have to publish the design system first Using the book icon in the top right corner in the assets panel,

[@karenssss]

thank u so much!!!

[@Mizko]

✌️

[@mallenkb]

Valuable content

[@viktorchernichenko]

Awesome!!!

[@best-deal-on-couch]

Seems like double work for designers... It's easier to present your design to developers with explanations and not pay for zeplin.

[@pollockprogrammer3336]

amazing

[@k-turner]

Quality!

[@Mizko]

Appreciated!

[@k-turner]

Appreciate you! You’re concise and all your videos are extremely helpful.

[@iruarostegui]

Actually, Figma let you create a version history whenever you want…

[@mashakir200]

Thst's why he's gettin paid for it

[@xxxDoku]

cooooool Great videeo Thank u!!!!!!!!

[@VuongNguyen-gv3jp]

Really helpful, thank you so much!!