FireFox is blocking Twitter content

To view content on tw-rl, follow these steps...

  1. Click on the shield in the address bar.
  2. Toggle the switch at the top of the panel.
Sign In →
Sign In →
Read Thread
10 keys to nailing responsive design in @figmadesign Aka: How to become your engineering team's favorite designer 👇
1. Start with mobile • It's easier to expand on your designs than to simplify • You're defining most elements as 100% width which means you just have to communicate the max-width of something as you move up breakpoints
2. Keep a consistent layer list order across breakpoints • This ensures you're not requiring changes to the HTML structure • You can accomplish a lot by simply updating auto layout directions, padding, spacing, and your styles! • Showing/hiding things is totally fine 👍
3. Communicate WHERE your changes are happening at each breakpoint • Are you making changes to the page layout itself? • Are you making changes to individual components? Don't assume developers can spot everything that's changing from breakpoint to breakpoint
4. Take advantage of responsive units • Do you mean 64px? Or do you actually mean 10%? • Make sure engineers know what your intentions are. (You can add a simple sticky note to over-communicate how a certain element should resize)
5. Decide what is fixed and what is fluid We often have 3 variables to consider: 1) Padding from parent container 2) Size of our UI element 3) Space between elements As device sizes change, at least one of these variables has to change. 👆 Communicate which one it is
6. Auto layout all the things... • Your designs are almost certainly going to be implemented with flexbox so using auto layout forces us to think through how each component will actually be built • Setting things to "fill container" makes our components inherently responsive
7. See things in columns and rows • As device sizes shrink, a common pattern is to take elements that were once in a row, and stack them vertically within a column • If you're building with auto layout, this is a single button to click 👍
8. Organize your files by breakpoint • I then add a note in front of each breakpoint to document what design changes are being made • Make sure you know the breakpoints your devs are using and how they are referring to them!
9. Design at the smallest possible width within a given breakpoint • Sure, your UI looks great at 1024px. But these layout rules have to work all the way down to 768px as well... • Make sure your designs work in the worst-case scenarios! I'll show max/min sometimes 👍
10. Use variants to define how components evolve at different breakpoints • This strategy can be used for individual components or entire layouts! • This also makes updating your UI a breeze as changes are inevitably made
If you couldn't tell... I'm having way too much fun working on the responsive module for @figmaacademy 😅 We're going deeeeeeeeep...
If you found a little nugget of goodness from this thread… Click into the first tweet below and pass it along 👇
Ridd 🏛 @Ridderingand10 keys to nailing responsive design in @figmadesign Aka: How to become your engineering team's favorite designer 👇
TLDR: • Over-communicate what is changing from breakpoint to breakpoint. Don't assume developers can spot the difference • Use auto layout and think strategically about your layer list • Use variants for component and layout changes • Design around worst-case scenarios

My Notes:

Select to add to your #gallery:
Ridd 🏛

Pro Curator

$99 /yearPay what you can