Home Forums Pro tips Share your tips! Think modular. Import SVGs.

  • Author
    Posts
  • #5637 Score: 0
    Ben
    Ben
    Moderator
    21 pts

    Importing Sketch files is a great way to move entire projects into UXPin, but if you just need a few items, then export artboards or individual bits as SVGs. This has several advantages:

    • Fewer layers make for better performance and easier asset management.
    • Imported SVGs are vector, and therefore scalable.
    • SVGs are great for making quick visual updates in Sketch for your interactive UXPin prototypes.
    • When you replace an image by dragging a new file onto it, UXPin preserves its interactions.
    • You can easily update graphics in smart elements for site-wide changes.

    Having said that, exporting and importing individual SVGs can get tedious with large projects, which is why UXPin lets you import whole Sketch docs in one go. Which is best? Depends on your workflow. When designing in UXPin itself, then consider keeping your work modular with SVG imports.

  • #6326 Score: 2

    matchubingo
    Participant
    6 pts

    Hey Ben.
    A great feature would be to be able to apply colour to SVG/Vector images.

    Natasza Libich
    • #6340 Score: 1
      Ben
      Ben
      Moderator
      21 pts

      An SVG editor in the app? Sounds tricky, but we can look at it. Out of curiosity, in what instances would you need to edit a SVG’s colors in UXPin?

      • #8547 Score: 0

        kleazenbee
        Participant

        What about letting users apply custom CSS to SVG elements? would that be any easier?

    • #7635 Score: 1

      tklepl
      Participant
      8 pts

      I would also appreciate the ability to set the colour of SVGs.
      Our SVG icon library doesn’t have any fill colour applied since we apply the colour in CSS.

  • #6344 Score: 1

    matchubingo
    Participant
    6 pts

    For example a FAVOURITE icon. Where we would import one instance of it (say it’s white), but when favourited would turn red. We can currently do it with your library items, just would be cool to be able to add custom items to the library that were editable in the same way.

    • #8544 Score: 0

      kleazenbee
      Participant

      One workaround (that’s far from ideal) is to create an icon font using something like fontastic.me and then upload it to uxpin as a custom font. This will allow you to easily change colors for the icons. The main drawback is you need to know the mappings between the letters and the icons (I had to print out a cheatsheet) – also, special characters are also pretty difficult to work with in this case.

      Having editable SVG’s (like how Sketch does it) would be ideal.

      • #8682 Score: 0
        Natasza Libich
        Natasza Libich
        Moderator
        15 pts

        Right, we’d also love to see that happen, but there’s still some way to go before we can. Thanks for pointing this out though!

  • #6345 Score: 0
    Ben
    Ben
    Moderator
    21 pts

    Gotcha, then either sprite ’em or replace them with a MSE. It’s something we can bring up with the team. Thanks for the idea.

  • #6477 Score: 0

    Being able to then export out of UXPin with the layers and .svg files in tact I think would go a long way

    • #6500 Score: 0
      Natasza Libich
      Natasza Libich
      Moderator
      15 pts

      Oh yes, definitely – though right now we have a lot on our plate when it comes to our roadmap, but who knows? Maybe one day 🙂
      Will share it with the rest of the Team for sure! Thanks for the suggestion Ryan!

You must be logged in to reply to this topic. Click here to login or register