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
Q: This course was updated on 05/15/2018. What changed?
A: We updated a new number of videos about third-party resources, such as the Sketch App Sources website and plugins like Marketch and Craft, to reflect the most recent changes to those resources.
User Experience for Web Designerswith Chris Nodder1h 49m 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?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
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.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.