YoVDO

Master Layout grids (Figma, Adobe XD and Sketch)

Offered By: Skillshare

Tags

Adobe XD Courses Bootstrap Courses Sketch Courses Figma Courses

Course Description

Overview

In this course we will see what are layout grids and how to use them consistently for our designs. No matter if it's for an app or website or even a physical product like a poster, a brochure or even our CV.

You will learn the theory behind the grids and we will see how to make the most common grids like Bootstrap (4 and 5!) and the mythical and so much talked and used 8px grid.

As well we will cover how to make proper typographic decisions in order to stay on the grid and followa proper baseline vertical rythm.

No matter the software you use we will see how to make layout grids in the most common prototyping tools like Figma, Adobe XD and Sketch.

For this course you don't need any previous knowledge on the tools or on grids.


Syllabus

  • 1 - Introduction
  • 2 - What the hell are Layout grids (Theory)
  • 3 - Bootstrap Layout grid
  • 4 - 8px grid explained (and settings in Figma)
  • 5 - 8px grid in Sketch
  • 6 - 8px grid in Adobe XD
  • 7 - Congratulations

Taught by

Bruno Sáez López

Related Courses

Introduction to Bootstrap - A Tutorial
Microsoft via edX
Advanced Styling with Responsive Design
University of Michigan via Coursera
Responsive Website Basics: Code with HTML, CSS, and JavaScript
University of London International Programmes via Coursera
Responsive Web Design
University of London International Programmes via Coursera
Front-End Web UI Frameworks and Tools
The Hong Kong University of Science and Technology via Coursera