Mobile-First
Loading "Designing for Mobile First"
Run locally for transcripts
๐จโ๐ผ We have 5 screen size to implement, but let's first focus solely on the mobile design in Figma.
๐ฆ Tailwind uses a ๐ mobile-first breakpoint system by default, and prefixed utilities like
md:text-5xl
only take effect at the specified breakpoint and above. With that in mind, building designs for mobile screens first with Tailwind feels very natural. You don't have to do it this way, but it certainly has advantages.๐ฐ Hot tip: While we're only building the mobile design, you should definitely look at larger screens to see what the design is doing, and infer layout decisions based on that.
Page layout and content sections
Understanding how the page content is laid out as a whole, across all screen sizes, is the key to a successful implementation.
Before jumping into styling the heading, paragraph and list of logos, the first point of focus should be to work out the CSS layout mechanisms involved in this design.
Figma's auto layout feature
A while back, Figma added great new tools which very much align with how developers think about layouts.
The auto layout feature is a great example of that. It's basically the equivalent of Flexbox, and it completely transforms the way you create designs in Figma.
๐จโ๐ผ Before jumping in this exercise, spend some time inspecting how the various screens are designed in the Figma file. Click on things and look for the "Auto layout" section in the right sidebar. You will learn a lot about the intent of the designers.
Are you ready?
๐จโ๐ผ Here's our plan of attack in this exercise:
- Build the structural layout for our page
- Style the text content (logo, heading + paragraph) section
- Style the logo tiles section
๐จโ๐ผ Without further ado... let's jump in!