Hand-off Designs to Dev like a Boss with Zeplin
HTML-код
- Опубликовано: 31 май 2024
- Handing off designs to development is hard. There are so many problems that you can run into and collaborating in design teams is no easier. But Zeplin can help with those issues and a whole lot more.... Remember to Subscribe goo.gl/6vCw64
Try Zeplin Today
zeplin.io/
Go beyond specs. With Zeplin, you can publish finalized designs from Figma, Sketch, Adobe XD and Photoshop. Zeplin also helps the team collaborate by providing much needed organization and structure to native design files, And Lastly Drive consistency by surfacing design system elements where developers can easily reuse them. Then, go even further by using Connected Components to extend designs to code!
🏆 //////////// Join my members community to get access to perks:
You can get this starting and ending design file
designchamps.io/
👋 ////////// Join the Discord Server and meet other creatives
/ discord
0:00 Intro
0:50 What is Zeplin?
1:38 Tour
1:55 Customize
3:00 Projects
3:33 Spec Mode
5:08 Version Control
6:00 Workflow
8:40 Design Systems
9:59 Outro
------------------------------------------------------------------------------------
🤝 //////////// My Courses, Templates, Free E-Books, & 1:1 Mentorship
www.jesseshowalter.com/
👋 ////////// Follow me on Social
Instagram: / imjesseshow
Twitter: / imjesseshow
📫 ////////// Sign up for my Monthly Newsletter
www.jesseshowalter.com/newsletter
------------------------------------------------------------------------------------
🖥️ ////////// I build most of my websites using Webflow
webflow.grsm.io/4495884
💻 ////////// I host all my websites with Hostinger
www.hostg.xyz/SH5fF
🎵 ////////// Elevate your videos with record-label quality music from Musicbed
share.mscbd.fm/imjesseshow
📸 ////////// The Equipment I use
www.amazon.com/shop/jesseshow...
The best intro video for zeplin so far!!!.AWESOME VIDEO...been looking at so many videos and this is the best!
Just worked with my first dev outside of my job and there was so much confusion and things wrong when only given Figma file. This seems like a life changer.
Awesome Jesse, all your videos are so helpful and so professional
Thanks for your efforts! It was a very useful video, I only heard about this tools but I was a little Lazy to discover what it is. Thanks!
This is interesting. I have a design that I have to hand-off to devs and would prefer them not going in figma as it can be daunting if you have no idea what to do.
im excited now i have something i can handoff to myself as I design and build i want it to be accurate thanks for the info
Great video! is there a way to export all the redlining in a screen as a pdf/png? meaning a file that the engineers can open and preview all the specs in one?
Thanks, Jesse. Another informative video. The instructions at the beginning of your video (e.g. multiple workspaces/sections) only apply to the paid version of Zeplin. I tried following along but couldn't. That should be made clear in the video.
So well explained!
How do you get the modal window inside of Figma to appear when you want to export to Zeplin? Let us say it is closed and not open.
Why use zepline if you can do the exact same thing with figma, xD or even sketch.
How do you select all frames ? what is the keyboard shortcut?
What’s the point in using Zeplin if Figma has it built in (it’s called Inspect and does exactly the same thing without a time needed to sync every single time)?
Figma doesn't have ready-to-use code (preview around some HTML snippets doesn't count). There is no easy way to link your components to code (React, Swift, Vue). Version control - Figma doesn't have this feature (History feature is not even close to the Zeplin feature), and last, but not least, the developer doesn't need to learn Figma. You can send a link, and that's it. So less friction, seamless experience. Of course for designers, it's another step. Still, each time I prepare something in Zeplin for devs, they say it's more accessible and cleaner to understand everything.
Thanks for the video thought.
And 2 years later - Figma released the DevMode and changed our design workflow even better.
It is really good
Where is the benefit than using figma inspect or adobe one?
"v2 final final" took me back😂
please do a full zeplin course with live project .. thanks
Love your content, but make sure you let us know in the beginning if its sponsored content, Like LTT does. This helps us really understand what you as a person/creator really use or really love and what you don't like as much but its just for the bread and butter or mayo, whatever you prefer.
I only feature products and tools on my channel that I whole heartedly believe in
@@JesseShowalter Where do you stand on this now that Figma has branching and more version control features on the organization plan ?
I am still a little skeptical, can someone share what makes the redundancy worth the cost? Like versioning, what makes zeplin's versioning better than figma? Or when a color style is renamed in zeplin, does that style update in figma or do I have to go in and change my style in figma as well? If my design team of 45+ uses a fully built out figma library and we merge it with zeplin, are we now maintaining 2 "points of truth"? organizing and managing files does look cleaner, but what makes it worth implementing zeplin when the same organization grouping and categorizing is in figma. And other than the truly exciting part about the the dev access to code and git integration, what makes zeplin's dev features better than figma's? (from the video it looks basically like getting the same info in almost the same format)
My team's handoff process is pretty clean and efficient with figma, we have a designer 'page' for exploration, we have a development page that is always the latest work, and we have a task branch that is handed to the dev and their task. If a dev note comes back and we have an edit, designer tweaks the dev page and updates the task branch. When dev is released the branch is archived. If we used zeplin what are some of the specific direct 1 to 1 feature improvements, why do you think it's easier for a dev in zeplin vs just learning figma.
I know this is a lot. Maybe a whole new video. I manage a design system for 45+ UXers and several (no idea of how many) devs, all working on a 40 something product suite - I was asked if zeplin is worth the investment, and should we look at adding it.
All comments welcomed and appreciated! Thank you for this video and opportunity to ask you.
It would be nice if these “sponsored” or “affiliates” are noted/announced in the beginning of the video as such. Other than that, great video!
I only feature tools that I use, have used, or will use.
Is this event still a thing?
I’m a front end dev. I received some Zeppelin Ziplin files. I found the software buggy and not as nearly good as this video. This video is just a commercial!
Hi, what would you advice using instead of Zeppelin then?
Why would you use this over Figma?
Figma is far better right?
I have a question. Can I call myself a frontend developer if I can design great web and mobile apps with figma, sketch or adobe XD and also use zeplin to organise and generate codes in either react.js vue swift etc. does that make me a frontend developer, because I believe once I am able to generate code for the backend developer, then I am a frontend developer.
A developer actually CODES (not makes mocks with design software), so you are not a developer.
@@PriscillaThen but it's rare anyone code from scratch in this dispensation, if I design a mobile App on figma and convert the design into react or swift or vue.js and I hand over to the backend developer to continue the data part...that is actually my question. If that makes me a frontend developer
@@Jeremiahviews it does not, you are a designer utilising frameworks to generate code. Front-end developers actually need to write code.
@@jamesc4183 Noted thanks
Oh my god!!! I just realized why every UX Design job demands Zeplin as a requirement, because it literally writes the code for developers???? oh my god.
Watching this video 2 years after you published it on a trial/free account... the UX/UI of this app is so different that I cannot follow along. Either I need to buy a license to see it like you do, or they've impaired the service to a un-useable state. The service in this video looks great but the (zep)Lemon I'm presented with in 2023 is just another junk product that wont let me try it to decide if I want to buy it.
Just get a crack version of photoshop and do what ever you want.
No professional is using cracked applications, at lest none that have the integrity to handle client work with any semblance of trust. And why would we if it’s helping us earn a living, definitely enough to pay for the tools we’re using to earn that living. If your advocating for using apps illegally (and better yet using photoshop to do this work) you’re on the wrong channel. The Fortnite videos are thataway…