- 32
- 28 047
Judo
Canada
เข้าร่วมเมื่อ 13 ก.ค. 2021
Judo is a design and build tool for SwiftUI apps that helps freelancers, startups, agencies, and product teams ship native UI faster than ever before. Design app UI with SwiftUI components in Judo’s infinite, visual canvas and generate production-ready code that’s ready to publish or hand to developers.
Design and code, united at last.
Design and code, united at last.
How to Build a Scrollable Tab Bar (SwiftUI Tutorial)
In this video, we’re going to learn how to create a scrollable tab bar, which is an element that you’ll find in many popular apps such as Airbnb and Netflix.
To teach you how to create one, we'll be using Judo-a design and build tool for SwiftUI. For this tutorial, we’ll be creating a scrollable tab bar for an imaginary file manager that will allow us to access four different screens without ever having to leave this home screen.
To follow along with this tutorial, download the starter Judo file: docs.judo.app/en/articles/9518430-how-to-build-an-interactive-scrollable-tab-bar-using-conditionals
➡️ Download the Judo Mac or mobile app: apps.apple.com/ca/app/judo-design-and-build-apps/id1564578427
❓ If you have any questions, please don't hesitate to add a comment below, or ask away in our community: community.judo.app/c/help/
Thanks for watching! As always, please don't forget to like and subscribe 🙌
⏱️ Time Stamps
01:21 Get familiar with the starter file.
02:21 Create a horizontal scroll container.
02:42 Send the file to your mobile device to see your design in action.
03:03 Create an ON and OFF state for each tab.
04:43 Adjust the size to see your entire design.
05:00 Turn the ON and OFF states of each tab into Conditional layers.
08:56 Make each tab tappable by turning the OFF states into buttons.
10:07 Use the Button Style modifier to customize the style of your button layer.
11:29 Use conditionals to make each tab reveal the right screen when tapped.
13:23 Take a look at the Code Inspector.
🧑💻 Judo on the Web
X: judoapp
LinkedIn: www.linkedin.com/company/judoapp
Website: www.judo.app
Mastodon: mastodon.social/@judoapp
To teach you how to create one, we'll be using Judo-a design and build tool for SwiftUI. For this tutorial, we’ll be creating a scrollable tab bar for an imaginary file manager that will allow us to access four different screens without ever having to leave this home screen.
To follow along with this tutorial, download the starter Judo file: docs.judo.app/en/articles/9518430-how-to-build-an-interactive-scrollable-tab-bar-using-conditionals
➡️ Download the Judo Mac or mobile app: apps.apple.com/ca/app/judo-design-and-build-apps/id1564578427
❓ If you have any questions, please don't hesitate to add a comment below, or ask away in our community: community.judo.app/c/help/
Thanks for watching! As always, please don't forget to like and subscribe 🙌
⏱️ Time Stamps
01:21 Get familiar with the starter file.
02:21 Create a horizontal scroll container.
02:42 Send the file to your mobile device to see your design in action.
03:03 Create an ON and OFF state for each tab.
04:43 Adjust the size to see your entire design.
05:00 Turn the ON and OFF states of each tab into Conditional layers.
08:56 Make each tab tappable by turning the OFF states into buttons.
10:07 Use the Button Style modifier to customize the style of your button layer.
11:29 Use conditionals to make each tab reveal the right screen when tapped.
13:23 Take a look at the Code Inspector.
🧑💻 Judo on the Web
X: judoapp
LinkedIn: www.linkedin.com/company/judoapp
Website: www.judo.app
Mastodon: mastodon.social/@judoapp
มุมมอง: 2 402
วีดีโอ
How to Create a Horizontal Scroll That Snaps into Place (SwiftUI Tutorial)
มุมมอง 2.1K2 หลายเดือนก่อน
Learn how you can build a horizontal scroll that snaps into place. We'll be using modifiers such as Scroll Target Behavior and Scroll Target Layout to recreate a horizontal scroll featured in the App Store. To follow along with this tutorial, download the starter Judo file: docs.judo.app/en/articles/9465207-how-to-create-a-horizontal-scroll-that-snaps-into-place ➡️ Download the Judo Mac or mobi...
Accessibility in SwiftUI: Designing for VoiceOver, Dynamic Text & More
มุมมอง 1202 หลายเดือนก่อน
Learn how you can make your SwiftUI designs more accessible by improving some parts of our Apple Mail recreation. In this video, we'll cover modifiers such as the Accessibility Sort Priority, Label, Hidden, Element, and Add Traits, along with tools that you can use in Judo to see how your designs will respond to different user accessibility settings. To follow along with this tutorial, download...
How to Add Scalable, Custom Fonts to your SwiftUI App
มุมมอง 1193 หลายเดือนก่อน
Get to know the Font modifier, dive into Apple's System Font, and learn how to embed custom, scalable Fonts to personalize your Judo designs. To follow along with this tutorial, download the starter Judo file: docs.judo.app/en/articles/9330563-adding-custom-fonts ➡️ Download the Judo Mac or mobile app: apps.apple.com/ca/app/judo-design-and-build-apps/id1564578427 ❓ If you have any questions, pl...
Building Multilingual SwiftUI Apps with Judo
มุมมอง 773 หลายเดือนก่อน
Learn how to preview localizations directly in the Judo Mac app to see how your design will look in different languages. To follow along with this tutorial, download the starter Judo file: docs.judo.app/en/articles/9307833-previewing-localizations ➡️ Download the Judo Mac or mobile app: apps.apple.com/ca/app/judo-design-and-build-apps/id1564578427 ❓ If you have any questions, please don't hesit...
Getting Started with Judo
มุมมอง 9724 หลายเดือนก่อน
Design and build SwiftUI apps. No-code, no compromise. 🧑💻 Get the Mac App: apple.co/44qw71c 🎓 Learn More: www.judo.app 📚 Visit our Learning Center: docs.judo.app 💎 Join the Community: community.judo.app 💻 Judo on the Web: bento.me/judoapp Welcome to Judo! Let's go over some of the main features of the app and then dive into parts of an example Judo file. Get started building in less than 10 mi...
Build a Payment Calculator using SwiftUI Sliders, Pickers, Steppers, Toggles and more!
มุมมอง 1.8K4 หลายเดือนก่อน
Get to know a variety of SwiftUI controls by building an interactive payment calculator, complete with Computed Properties, Conditionals, and Combined Text layers. To follow along with this tutorial, download the starter Judo file: docs.judo.app/en/articles/9255562-building-a-payment-calculator ➡️ Download the Judo Mac or mobile app: apps.apple.com/ca/app/judo-design-and-build-apps/id1564578427...
Designing a Responsive Button
มุมมอง 1885 หลายเดือนก่อน
Artboards are a powerful way to preview a component in various scenarios at the same time. Watch this tutorial to learn how to create a responsive button component and how to use artboards to preview a component in different states. By being able to preview how changes in layout, color, and typography react to multiple scenarios all at once, you'll see why this is a great workflow for building ...
How to Inject Custom Views from Xcode into a Judo Design
มุมมอง 2.4K5 หลายเดือนก่อน
To demonstrate how to inject custom views from Xcode into your Judo designs, in this video, we'll recreate parts of the Apple Maps app in Judo, including a placeholder component for the map, which we will then override with a custom view in Xcode. In this example, we’ll replace our Judo View with a SwiftUI map. To follow along with this tutorial, download the starter Judo file: docs.judo.app/en...
Working with SwiftUI Scroll Views
มุมมอง 1205 หลายเดือนก่อน
When embedding content within a Scroll View container, that content gets displayed within a scrollable area. However, as you design a screen, you’ll only be able to see what’s above the fold. Watch this video to find out the best way to build your scrollable content in Judo. ➡️ Download the Judo Mac or mobile app: apps.apple.com/ca/app/judo-design-and-build-apps/id1564578427 ℹ️ Find out more ab...
SwiftUI Navigation Tutorial: How to Navigate Between Screens
มุมมอง 2.7K6 หลายเดือนก่อน
Navigation is an essential aspect of app development as it enables users to navigate between different screens within an app. Navigation Stacks are used to build series of screens that flow left to right and Navigation Links connect these screens. To demonstrate how to create a navigation hierarchy and how to customize the Navigation Bar for each screen, follow along with this step-by-step tuto...
SwiftUI Modal Presentations: Mastering Sheets & Full Screen Covers
มุมมอง 7216 หลายเดือนก่อน
SwiftUI Modal Presentations: Mastering Sheets & Full Screen Covers
The Ultimate Guide to SwiftUI Stacks & Spacers
มุมมอง 6K9 หลายเดือนก่อน
The Ultimate Guide to SwiftUI Stacks & Spacers
How to Create a Carousel with SwiftUI in Judo
มุมมอง 3429 หลายเดือนก่อน
How to Create a Carousel with SwiftUI in Judo
How to Build a Tab Bar with SwiftUI in Judo
มุมมอง 5679 หลายเดือนก่อน
How to Build a Tab Bar with SwiftUI in Judo
Design and build SwiftUI apps. No-code, no compromise.
มุมมอง 706ปีที่แล้ว
Design and build SwiftUI apps. No-code, no compromise.
Re-create Series: Design Headspace App UI with native SwiftUI elements
มุมมอง 222ปีที่แล้ว
Re-create Series: Design Headspace App UI with native SwiftUI elements
Re-create Series: Design Notion App UI in Judo
มุมมอง 310ปีที่แล้ว
Re-create Series: Design Notion App UI in Judo
Re-create Series: Design Linkdata App UI in Judo
มุมมอง 167ปีที่แล้ว
Re-create Series: Design Linkdata App UI in Judo
Really interested in trying out Judo app... just a few quick questions. Will this export production-ready code? If not what steps are needed from taking an iOS design project to the App Store? Also, can you create/design Mac OS X apps or is this just for iOS apps?
Hey I bought the Judo App when it was $100. My MacBook broke and I just replaced it but I now see there is a subscription in place. How does that work for the people who were told they’d own for $100? Thank you
Hi there, thanks for reaching out! Please send an email to support@judo.app and we'll get you sorted.
How do I move the navigation stack after putting it into a new component?
You can reorder layers by dragging them around in the Layers panel. Let us know if that helps!
@@judoapp I can't move any shapes or text after putting them into a new component. That's what I meant. Any fix?
What the name of this app?
It's called Judo! You can download it for free, here: apps.apple.com/us/app/judo-design-and-build-apps/id1564578427. If you give it a try, we'd love to hear what you think 🙂
@@judoapp Ohh thanks a lot 🌹
Great
And What program do you use for record your screen? Congratulations, judo app is amazing!
Hey, we use Screen Studio! Hope that helps 🙂 And we are so happy to hear that you like working with Judo!
What program do you use for that?
We're using Judo! You can download it for free, here: apps.apple.com/us/app/judo-design-and-build-apps/id1564578427
Great tutorial!!
Thank you!
Really interesting!
What app is this? 🤔 I don't see this look and feel on my xcode
This video is using Judo www.judo.app which is a visual build tool for SwiftUI. Give it a shot and let us know what you think :)
Hey! Love the product. I am wondering if there is a way to add a Segmented Picker or are there any plans to include it in future updates? Thank you
Hey, that's so awesome to hear! To add a Segmented Picker, you can insert the Picker control from the Insert (+) menu and then apply the Picker Style modifier to it to set the Style to Segmented. Hope this helps 🙂
In case you need more details, we have some documentation available on the Segmented Picker: www.judo.app/learn/articles/picker-style-modifier
Thank you! @@judoapp
Besides my curiosity about Judo, I am also curious about that app you leave open in the background where there are files and the artwork for the video thumbnail :) Btw Judo is fantastic. I've been playing with it for three days and have so much fun with it. Looking forward to start building something real soon. Madson.
We're so happy to hear! Don't hesitate to reach out if you have any questions while you're building. With regards to the video, that's just a white desktop background with an Apple stickie for the title. The gradient frame is padding that's added during the editing process in Screen Studio. Hope this helps!
@@judoapp I figured it looks like Apple stickies but couldn't make sure because of the gradient frame, now I know. Thank you so much!
awesome tool!
This is an incredible product.
Thanks! Glad you're getting value from the product. We're going to be adding more vidoes to our TH-cam channel over the coming weeks. What would you like to see?
good
great video CAN YOU MAKE VIDEO HOW CREAT TABVIEW. OR ONVER IN TABVIEW
Thank you! And yes! Check it out: th-cam.com/video/3qMK5BocXKs/w-d-xo.htmlsi=5cyNcdo6ihrleNDO
So fire, per usual
Judo I am decently bad at coding if u ever need anyone to delete production on accident
i am a Judo fan boy
Judo I have a massive crush on your software
dude judo is so cool I don't understand why you guys only have 60 subscribers, this app is so damn helpful in understanding swift UI and how it works and it makes creating flexible UI's so much easier, especially for beginners.
Thanks so much! We're just getting started with new content for TH-cam so you can expect more from the channel. Also, check out the Judo Community - for more resources and to share what you are working on! --> community.judo.app/home