Now that you've built your responsive design wireframes and done the visual design, it is time to discuss how to use Fluid to speed our responsive design workflow.
- [Instructor] In this video we will cover Fluid for Sketch.…Fluid is a plugin that provides a means to create…more constraint-based layouts in responsive design.…It's based on auto-layout constraints.…Here in the Toolbox, go ahead and select our search box,…type in "fluid", go ahead and click Install.…It may take a moment to install.…This is a big plugin.…Go back to Sketch.…Let's double check to make sure it's added.…Not quite.…It does take a minute sometimes.…And there we go.…
Now what we're gonna have to do as the first thing…is go ahead and click Fluid, Show/Hide Toolbar.…This way we have our toolbar accessible to us…in order to go ahead and start editing constraints.…So in this case let's take the top bar here…and click Edit Constraints.…And for this, what we want to do…is center on the horizontal axis.…Go ahead and pin it to zero-zero on both right and left.…
And that's all we're gonna do for this first one.…Go ahead and click Preview,…and now you'll see this preview screen from Fluid.…You go ahead and click Resize, and pick iPad Pro Portrait,…
- Extending Sketch
- Building a style guide
- Using styles and symbols
- Working with artboards
- Making responsive wireframes
- Using responsive design plugins: Artboard Zoom, Sketch Focus, Craft, and more
- Exporting your design
- Building a mobile app for iOS, Android, or watchOS
- Integrating other tools in your Sketch workflow
Skill Level Intermediate
UX Design Tools: Flinto for Macwith Nathan Manousos52m 49s Beginner
1. Using Outside Resources
2. Beyond the Basics
3. Responsive Design
4. Mobile Design
5. Extending beyond Sketch
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.