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

over 3 years 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 3 years 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 3 years 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
  • Mabel Lesch, 8 months ago

    My approach to designing for different platforms, Android, iOS, Web is to always keep in mind the user experience. I try to make sure that the user can get the best experience out of each platform. Visit this https://masterbundles.com/templates/presentations/powerpoint/summer/ site for best summer templates. This means that I design my app in a way that makes it easy for people to navigate and use my app.

    0 points
  • Elwin Ha, over 3 years 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