Skip to main content
designd39194439
designd39194439
Participant
November 18, 2024
Question

Are web designers now building straight in XD rather than photoshop for website builds?

  • November 18, 2024
  • 2 replies
  • 1150 views

Web Designer Seeking Help on Design Process - XD  Photoshop

I've been working in photoshop for 20+years. I've been at my company for 15. Ive always pretty much created my photoshop designs and handed off to developer or if I was building just went straight from PSD to Wordpress. In more recent years I've been using InvisionApp to show clients a rough layout of their site, and for the developers to get an idea of how things will work and connect for said project.

Since InvisionApp is ending, I looked into XD and a few other programs to replace it, but I'm a confused on if these programs exist solely for the client and team to review OR if they are ALSO can be and are typically used to build a design and hand off to developer as well?


What are web designers doing these days as their beginning to finish process?

 

  1. Building in Photoshop and then uploading to an app to show clients but still have a separate psd for dev's? I did one project by importing screens from photoshop, but it was clunky in XD to work with and XD doesnt have the tools like Photoshop to achieve some of the graphics I'd like to create.

  2. Building entire design in XD (or the like) and not using Photoshop at all just maybe for some image design? But then how are you giving raw files to developer? Can they easily access all they need straight from XD  to build the site? 

    It doesnt make sense to create in photoshop then have to recreate all the screens in XD. Invions was easy b/c all I did was upload the screens and add hotspots. I know you can do this in XD, but it was buggy.

    What is the typical process these days?

    This topic has been closed for replies.

    2 replies

    creative explorer
    Community Expert
    creative explorerCommunity Expert
    Community Expert
    November 19, 2024

    @designd39194439 I have to agree 100% with @Spas K. With Xd on the way out, it sometimes doesn't make any sense moving forward especially where you coming from Photoshop to Figma. Granted, the learning curve may be easier with Xd because it's an Adobe product. I still teach Xd only because some of the job postings are still requesting Xd designers...so, if I can get students foot in the door because they know how to use Xd over Figma, the more power to them....I still teach them Figma because it's always good to have both in their tool belts. 

    m
      Spas K.
      Community Expert
      Spas K.Community Expert
      Community Expert
      November 18, 2024

      The workflow for the past 6-7 years has been to build directly in Xd or other UI/UX design software, and use Photoshop and Illustrator for image or vector editing alone. Xd has a Design Spec prototype view mode through a link you generate and send to your devs. They open it up in the browser, and can download assets, inspect CSS properties and see sizes, spacing, etc. They can also open .xd files saved offline in Adobe Xd, if they have access to it.

       

      However, since 2022 Xd has been in maintenance mode and is no longer being actively developed. Adobe attempted to acquire Figma - another more advanced UI/UX design tool, similar to Xd, but the deal was blocked by regulators. Figma has since far surpassed the abilities of Adobe Xd, and Adobe has deemed it unprofitable to further invest into Xd's development. So I would not advise you to invest time into learning Adobe Xd and building a workflow around it, as its future is very uncertain and it will likely be discontinued completely in the following years.

        designd39194439
        designd39194439Author
        Participant
        November 19, 2024

        Thank you, I appreciate the detialed response. Is it not possible to just upload an entire screen/jpg to Figma and overlay hotspots on top to navigate to other pages (Home to About, etc)? I downloaded a Photoshop plugin on there and uploaded the psd, but it only came through as a flattened image not layered psd.

        At the moment, I have to check with my work about this process as it would be a switch and would change how our devs access and use design files.

        I know having just a whole jpeg doesnt seem to make sense for the purpose of Figma, but at the moment until I have time to learn it better, get approval from our team, and also we pay for the Adobe Suite and get XD as part of that package, would Figma be able to do a very simple presentation like I mentioned above  (like Invision App would work w/ jpegs)?

        I just need a way to present my jpegs in a working way to link them, etc for the purpose of commenting and approval by clients. Eventually and soon, I'd like to familiarize with builging in Figma or XD, but thats a drastic change overnight for me and will take time.




        Spas K.
        Community Expert
        Spas K.Community Expert
        Community Expert
        November 19, 2024

        You can do that. You can draw a rectangle without fill and stroke where you want your hotspot, and then attach an action to that rectangle to send the user to a different page. You can achieve that in both Xd and Figma.

         

        Here's a short video on how to do that in Xd. Make sure artboard size matches the size of your design, and set Scrolling: Vertical on the artboard. Then adjust the viewport height. You can now add a rectangle and point it to a different artboard on the Prototype tab.

         

        The process in Figma is the same, with some differences in the interface.

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices