In Figma, What is your approach to designing for different platforms, Android, iOS, Web?

over 1 year ago from , Freelance Interactive Designer - matthewortega.co

I've been working on a project that is multi-platform and would like to get some input on how other designers are taking on this task. Currently, I use iOS as my primary design environment, and port my designs to Android & Mobile Web when needed (selected screens). Resources are low, so I don't have time to design every screen for each platform. Even though Figma has components, one small change can be a half day of work making sure there are not errors, and everything is up to date. Open to hearing how the community approaches it.


  • Nelson TarucNelson Taruc, over 1 year ago

    I think your approach is right, one source of truth reference (iOS it seems in your case) and some diff screens as needed for others. One thing I'd also consider are annotation layers, e.g. a layer group for pointing out differences on Android and a layer group for mobile web. Then at regular interviews just duplicate the file like a "design freeze," turn on the Android/Web layers, fade out the iOS layers a little and you have stand-alone guides.

    That way you get to manage just one core file (with two clones) vs. 3 separate ones.

    If you need to hand off to devs, design tokens like Ryan P. mentioned are a great idea, as well as abstracting them out to a separate file but linked to your library(ies). I'm assuming you already have components in a shared library so obviously that is the best approach for managing those.

    Good luck!

    1 point
  • Ryan Parag, over 1 year ago

    I'm in the same boat - my quick way of keeping some items organized was to abstract design tokens (text, colors, shadows, etc.) out to another file. I would then have a components file for each of my environments (web, iOS, android), which would each utilize the design tokens file.

    Hopefully that makes sense, but would be definitely be interested if someone figured out a better way to manage this.

    1 point
  • Elwin Ha, over 1 year ago

    If the project is completely multi-platform, I design for web first (it's the most device agnostic platform), and make sure the design accounts for:

    1. Different device aspect ratios
    2. Pixel density and resolutions
    3. Colour reproduction on difference devices and print media (PANTONE > RGB and P3).

    It's pretty complex to design a fully responsive project in Figma as they lack the tools to do so, so I add in supplementary documentation (sometimes as a comment) or in the brand guidelines.

    I also have a master "frame" for any particular screen of an app, and have other reference child frames for other screen sizes as needed to show how the layout would work in various scenarios and edge-cases.

    Hope that helps!

    0 points