Using a Sketch file in Axure

rp-7
newbie-question
#21

Add to Jappo’s list:

  • better touch, multi-touch & gesture support!!
  • nice to have: better responsive/adaptive behavior - right now workflow is too clumsy and it’s easy to screw up your design as you modify breakpoints
#22

I am new to Axure and getting my way through Sketh. Have Sketch filess been able to incorporate with Axure to make prototypes? Axure would be my first priority of adopting a hi-fi prototyping tool if it works well with Sketch SVG files!

Beta has already been released?

Thanks.

#23

Hi Dizz, welcome to the forums!

The beta for this feature isn’t out yet, but as Rachel mentioned above, it’s something that we’re working on. To be notified of beta updates, you can use the in-tool notification method or check this forum thread: http://www.axure.com/c/forum/technical-troubleshooting/19696-axure-rp-8-beta-channel-updates-update-release-notes-release-candidate.html

#24

I also, like many here, vote +1000 an Axure/Sketch integration. Like it or not, the trend happening worldwide is that Sketch is being used for wireframing. Like it or not, mostly users are NOT going to use Axure for layout. By not offering Sketch integration, it’s one more reason for companies to only adopt Axure for some special projects, but not as a way of life.

Agree with below:

#25

Bump for updates + text kerning

#26

+1000 for a Axure plugin for Sketch or any easy way to work with my 2 prefered tools because the current workflow between these tools is a real nightmare for me :frowning:

#27

Yes - current workflow with Sketch is a nightmare. I recently has to take an Axure Prototype and reverse engineer (a.k.a. redo it) into Sketch. This is because devs and some approval workflows in this org require Zeplin for commenting and dev notes.

Would love for Axure to kick all the other “solutions” butts and throw it’s prototyping muscle into the enterprise UX ring that Sketch & its accoutrements seem to be dominating.

#28

Hi OrangeAX & popweb,

Would you be able to test out the functionality in the new RC build 3330? Feel free to grab the download here:

www.axure.com/rc#3330

Per Rachel’s post above, after copying / selecting “copy SVG code” from Sketch and pasting into RP, try right-clicking the image and selecting “Convert SVG to Shapes”:


If you encounter any errors with this, please send over copies of both the RP files and SVGs you’re using. If those need to be kept private, feel free to attach them in an email to us at support@axure.com. Thanks!

#29

This doesn’t work in any sort of convenient way, unfortunately. First of all, why do I have to convert an SVG to a shape at all? Why doesn’t it do that immediately as soon as I paste an SVG? Secondly, if I copy/paste from Sketch, it ends up being a bitmap, not an SVG. The only way to get it in as an SVG is to go through the whole export process in Sketch and save the SVG image as a file and then drag that image into Axure. That is way too much work. Finally, I want to be able to just copy a whole bunch of layers at once or an entire artboard in Sketch and paste it directly into Axure. Once again, that will not work because it just ends up being one combined bitmap with all the layers flattened. We honestly need a legitimate and seamless solution for moving assets back and forth between Sketch and Axure. It is a huge drawback at the moment, having to manually recreate assets in Axure all the time. I essentially have to build my widget component library twice, in order to use both tools, which is very tedious.

In addition, it would be great if Sketch shared styles were transferred over as Axure styles, if possible.

#30

Hi danlode,

Thanks for the feedback! When copying/pasting from Sketch, were you able to do so by selecting “Copy SVG Code” after right-clicking the layer? Since SVG data aren’t included via a simple copy in Sketch, the option “Copy SVG Code” would need to be selected. Hopefully that can help as an alternative to going through the lengthier export process. You can also use “Copy SVG Code” in Sketch for multiple layers at a time. (Rachel’s post is a good reference for that part of the workflow; I also went ahead and added a small edit to my post to clarify.)

As you mention, the SVG data of a Sketch layer are imported into RP initially as an individual image widget. Even so, this imported asset still preserves SVG data and retains its clarity after resizing in the editor or prototype. You can double-check this by viewing the generated HTML and inspecting the output for the corresponding SVG file.

Nonetheless, your feedback has been a big help and I’ve spoken directly with my product manager about your concerns. Let us know if there’s anything else we can do to help or elaborate on in the meantime. Thanks!

#31

Hi! Yes, selecting all my layers and selecting Copy SVG Code worked great. The problem is that all my text fields are shifted up after being imported into Axure. I had to reposition each of them individually because they were not in the same place as on my Sketch artboard. See my screenshot below. The one on the left is how it looks in Sketch and the one on the right is how it looks in Axure after Copy as SVG Code and pasting into Axure:

Text Fields Misaligned.png1496×1292 150 KB

My bigger question is why not just create a Sketch plugin like Invision, Marvel, UXPin, CanvasFlip, and almost every other new prototyping tool out there? I honestly just want to be able to select some or all of my artboards and import them into Axure with all layers preserved and converted into shapes automatically. Each artboard would be a separate page. Then, I want it to seamlessly sync, moving forward. That means if I make additional changes to the imported artboards within Axure, I should be able to send it back to Sketch and update my corresponding artboard. If I make additional changes to my artboards in Sketch, I should be able to sync again with Axure and have these changes reflected on my Axure pages, without losing the interactions, notes, etc. that I already created within Axure. UXPin does a horrible job of this. Every time you reimport your Sketch artboards, it destroys all your documentation notes and interactions. I trust that you guys could do this way better!

Trust me, you guys NEED to get this integration right to keep up with the competition. We must have true, robust, 2-way Sketch/Axure integration with zero bugs. I have tried so hard to get my team to adopt Axure, but they have consistently resisted because they love starting out the build of their layers and screens with Sketch before going into another tool to make them interactive. For them, the lack of true Sketch integration with iterative syncing and updating capabilities is a non-starter and a complete deal breaker for them. There are so many new UX people coming out of bootcamp programs like General Assembly and Startup Institute these days. Every one of them is trained on Sketch/Invision workflows. This means it is extremely hard to get them to transition to Axure, because they love the layout capabilities that Sketch offers during the earlier wireframing and higher-fidelity comp design. One of the things that makes Sketch so desirable and powerful is its Artboard construct, which allows them to layout flows of screens and see them all at once, rather than just one screen at a time, like in Axure. Once it comes time to make things interactive, that is where Axure could beautifully fit into the UX Designer workflow. Instead of exporting to Invision, which is extremely limited in terms of true interactivity (basically a glorified PowerPoint), or UXPin, which is terribly buggy and slow, they could sync their artboards to Axure. This will put all of Axure’s industry-leading prototyping power into their hands, while still allowing them to use Sketch as they see fit. This could be the perfect marriage, if you guys recognize it in time. If you don’t, it honestly may be very problematic for Axure as a company, as more and more bootcamp UXers enter the job market. Consider what I am saying as the canary in the coal mine. I’ve watched this transition happen across the industry very rapidly. Full Sketch integration is vital, and that is why the other interactive prototyping tools out there have quickly prioritized it on their roadmaps. Some do this integration quite well, while others leave a lot to be desired (inconsistencies, bugs, loss of data). In the end, there is no other interactive prototyping tool that can match up to Axure’s years of product maturity and refinement. For many, this all becomes irrelevant if it can’t play nicely with Sketch though!

Finally, my last request to complete this ecosystem and get Axure back inline with the competition is an auto-spec, redlining mode within AxShare. Axure is quite behind the competition when it comes to this. We need something just like Zeplin, Sympli, Avocode, Invision’s Inspect Mode, and UXPin’s Spec Mode. I should be able to view any published Axure prototype, click on an element and have it show me all the relative padding, hex colors, font styles, etc. I should be able to instantly download graphical assets in the formats required for iOS, Android, Web, and more. All of these tools have a fairly similar feature set, but it is something that is totally lacking in AxShare. This means, with Axure, we have to manually create notes to describe all these CSS style specifications. This also means there is so much more back and forth between designers and developers, because they can’t just explore these styles and assets on their own. With AxShare, we have to spoon feed it to them.

Similarly, when in design mode in Axure, I have no way of seeing relative spacing like I can in Sketch. Sketch allows me to simply hold down the Option key after highlighting an element and then view all the surrounding pixel spacing between that elements and others on the screen. This saves me the time-consuming task of moving an element right up against another and then manually count pixels as I nudge it away until it is appropriately spaced.

I apologize that some of these comments belong in other parts of the forum. However, within the context of this thread, I thought it would be helpful to provide some more overarching context. Product companies often get stuck thinking about small, individual features, such as this Convert SVG to Shape, without recognizing how it needs to fit in the broader holistic workflow/process of their users. I am doing my best to give you a real world view of what your users are desperately begging for. I can guarantee you that my company, team, and situation is not unique. I talk to many other UX folks in the community and they have run up against similar obstacles. None of the tools out there have the polish, extreme power, and sophistication of Axure. However, many of us feel like you guys are developing huge blindspots by not paying enough attention to shifting UX trends, valuable competitive features, and evolving designer workflows amongst emerging UX students that revolve heavily around Sketch.

I have used Axure since the very early days and always believed in your mission. I am extremely confident that you guys can get this right, but it needs to happen soon, because many of us UX leaders are really starting to feel an increasing amount of pain amongst the teams that we manage, as we hire young designers. Axure needs to join the UX design tool ecosystem with better integrations and cross-team communication tools before it is too late!

I am happy to speak to any of you, in depth, if you want more detailed feedback on anything that I have discussed above. This is my challenge to you and I hope you will accept it!! :cool:

Text Fields Misaligned.png1496×1292 159 KB


#32

Hi! Yes, selecting all my layers and selecting Copy SVG Code worked great. The problem is that all my text fields are shifted up after being imported into Axure. I had to reposition each of them individually because they were not in the same place as on my Sketch artboard. See my screenshot below. The one on the left is how it looks in Sketch and the one on the right is how it looks in Axure after Copy as SVG Code and pasting into Axure:

Text Fields Misaligned.png1496×1292 150 KB

My bigger question is why not just create a Sketch plugin like Invision, Marvel, UXPin, CanvasFlip, and almost every other new prototyping tool out there? I honestly just want to be able to select some or all of my artboards and import them into Axure with all layers preserved and converted into shapes automatically. Each artboard would be a separate page. Then, I want it to seamlessly sync, moving forward. That means if I make additional changes to the imported artboards within Axure, I should be able to send it back to Sketch and update my corresponding artboard. If I make additional changes to my artboards in Sketch, I should be able to sync again with Axure and have these changes reflected on my Axure pages, without losing the interactions, notes, etc. that I already created within Axure. UXPin does a horrible job of this. Every time you reimport your Sketch artboards, it destroys all your documentation notes and interactions. I trust that you guys could do this way better!

Trust me, you guys NEED to get this integration right to keep up with the competition. We must have true, robust, 2-way Sketch/Axure integration with zero bugs. I have tried so hard to get my team to adopt Axure, but they have consistently resisted because they love starting out the build of their layers and screens with Sketch before going into another tool to make them interactive. For them, the lack of true Sketch integration with iterative syncing and updating capabilities is a non-starter and a complete deal breaker for them. There are so many new UX people coming out of bootcamp programs like General Assembly and Startup Institute these days. Every one of them is trained on Sketch/Invision workflows. This means it is extremely hard to get them to transition to Axure, because they love the layout capabilities that Sketch offers during the earlier wireframing and higher-fidelity comp design. One of the things that makes Sketch so desirable and powerful is its Artboard construct, which allows them to layout flows of screens and see them all at once, rather than just one screen at a time, like in Axure. Once it comes time to make things interactive, that is where Axure could beautifully fit into the UX Designer workflow. Instead of exporting to Invision, which is extremely limited in terms of true interactivity (basically a glorified PowerPoint), or UXPin, which is terribly buggy and slow, they could sync their artboards to Axure. This will put all of Axure’s industry-leading prototyping power into their hands, while still allowing them to use Sketch as they see fit. This could be the perfect marriage, if you guys recognize it in time. If you don’t, it honestly may be very problematic for Axure as a company, as more and more bootcamp UXers enter the job market. Consider what I am saying as the canary in the coal mine. I’ve watched this transition happen across the industry very rapidly. Full Sketch integration is vital, and that is why the other interactive prototyping tools out there have quickly prioritized it on their roadmaps. Some do this integration quite well, while others leave a lot to be desired (inconsistencies, bugs, loss of data). In the end, there is no other interactive prototyping tool that can match up to Axure’s years of product maturity and refinement. For many, this all becomes irrelevant if it can’t play nicely with Sketch though!

Finally, my last request to complete this ecosystem and get Axure back inline with the competition is an auto-spec, redlining mode within AxShare. Axure is quite behind the competition when it comes to this. We need something just like Zeplin, Sympli, Avocode, Invision’s Inspect Mode, and UXPin’s Spec Mode. I should be able to view any published Axure prototype, click on an element and have it show me all the relative padding, hex colors, font styles, etc. I should be able to instantly download graphical assets in the formats required for iOS, Android, Web, and more. All of these tools have a fairly similar feature set, but it is something that is totally lacking in AxShare. This means, with Axure, we have to manually create notes to describe all these CSS style specifications. This also means there is so much more back and forth between designers and developers, because they can’t just explore these styles and assets on their own. With AxShare, we have to spoon feed it to them.


Screen Shot 2017-03-15 at 00.31.19.png596×1372 80 KB

Similarly, when in design mode in Axure, I have no way of seeing relative spacing like I can in Sketch. Sketch allows me to simply hold down the Option key after highlighting an element and then view all the surrounding pixel spacing between that elements and others on the screen. This saves me the time-consuming task of moving an element right up against another and then manually count pixels as I nudge it away until it is appropriately spaced.


I apologize that some of these comments belong in other parts of the forum. However, within the context of this thread, I thought it would be helpful to provide some more overarching context. Product companies often get stuck thinking about small, individual features, such as this Convert SVG to Shape, without recognizing how it needs to fit in the broader holistic workflow/process of their users. I am doing my best to give you a real world view of what your users are desperately begging for. I can guarantee you that my company, team, and situation is not unique. I talk to many other UX folks in the community and they have run up against similar obstacles. None of the tools out there have the polish, extreme power, and sophistication of Axure. However, many of us feel like you guys are developing huge blindspots by not paying enough attention to shifting UX trends, valuable competitive features, and evolving designer workflows amongst emerging UX students that revolve heavily around Sketch.

I have used Axure since the very early days and always believed in your mission. I am extremely confident that you guys can get this right, but it needs to happen soon, because many of us UX leaders are really starting to feel an increasing amount of pain amongst the teams that we manage, as we hire young designers. Axure needs to join the UX design tool ecosystem with better integrations and cross-team communication tools before it is too late!

I am happy to speak to any of you, in depth, if you want more detailed feedback on anything that I have discussed above. This is my challenge to you and I hope you will accept it!! :cool:

#33

I found another bug in the Convert SVG to Shape. It is not translating the font type correctly.

Here is the Sketch style panel for a given text object:


Here is the Axure panel after I’ve copied the SVG code, pasted it into Axure and converted to shapes:


You need to fix the conversion engine so that it actually translates like this in Axure with “Calibre” in the font family field and “Regular” in the font style field. Otherwise, it will not display correctly. Even when I manually fix it, though, the text is still shifted upward about 10 pixels from where it was in Sketch. This seems to be an issue when I use a specially purchased Calibre font, although I suspect there are other fonts that will have similar problems:


Hope that makes sense!


#34

More conversion bugs when changing from SVG to shape…

Axure is not recognizing the converted shape properly because Borders and Corner Radius are greyed out:



In a related note, notice here how my dotted border in Sketch is incorrectly converted into a solid border in Axure:



#35

@danlode,

I agree with your take on the back and forth from Sketch to Axure needing to be more robust - with the current beta features, it makes it so it’s a one way trip to pull in Sketch files and wire up in Axure which makes it less-than-agile for most iterative & collaborative workflows.

That being said I’m pleased with at least this being there, but I agree with you features around this area need to be accelerated for Axure to remain competitive - A lot of people in enterprises are still touting:

Sketch -> Invision for “prototyping” (I agree Invision is crap powerpoint - but I haven’t tried their latest craft/motion or whatever - but I think they’re a bit alpha/vaporware at this point)

& Sketch -> Zeplin for dev spec mode and annotations.

A spec mode is certainly needed too, but if I’d rather have the roundtrip (assuming element names don’t change between the layers on each app) working before the spec mode.

Also, please see this thread now and put bugs with this Sketch import in there: I’ve already posted several and it would be great to have them all in one place
https://www.axure.com/c/forum/feature-requests/21886-importing-svg-sketch-editable-shapes.html

Thanks for being another voice asking Axure to go the right direction!! Personally, I’m happy with their progress but Axure & its workflow is still under great threat unless this development is accelerated - and I agree that if this doesn’t happen Axure will be more and more dismissed in enterprises. If this integration/connectivity happens soon, then Axure’s maturity and power in prototyping will rule this area by far. It still has a far superior lead in terms of interactions and simulating real apps - we just need the glue now to the static design app ruler (Sketch) and the spec mode for dev connectivity.

#36

Hi danlode,

Thanks for all the feedback! I’ve gone ahead and passed along everything you shared with our product management team for review.

For the text-shifting and font conversion issue, this was reported by popweb on this thread, and Alex and I have gotten these two bugs filed with our QA team.

For the border and corner radius issues, I wasn’t able to reproduce either of these. When copying over a Sketch shape with border and corner radius, for example, it pasted into Axure RP with those options enabled. Similarly, copying a Sketch shape with dotted borders pasted into Axure RP with the same dotted lines. If possible, could you take a screenshot of the applied shape settings for both shapes from the Sketch tool? Here’s an example:

00001697.png588×787

Seeing the styles of those two shapes in Sketch–one with border/corner radius and the other with dotted borders–should allow me to reproduce the two issues on my end so I can get those filed with our QA team as well. TY!

#37

Jane,

When I tested these, yes Corner radius wasn’t brought over as an editable attribute into Axure - instead it just created shape control points to simulate the rounded corners (which worked visually for the pasted settings) - however this makes the corner radius no longer editable once it is in Axure, which is less than ideal.

#38

Hi Jane!

Here is the dotted line I tried to import from Sketch:

Screen Shot 2017-03-18 at 21.07.00.png436×696 43.3 KB

Here is the white button with the “9” on it (where corner radius was greyed out):

Screen Shot 2017-03-18 at 21.09.11.png436×600 38.5 KB

Thanks for your help!

#39

@popweb,

Thanks! It looks like Jane is handling the bugs I reported here. If i find any additional ones, I’ll certainly post them in the thread you linked to. Appreciate your support for my product suggestions. I hope that if enough of us speak up that the Axure product managers will finally recognize the importance of 2-way Sketch integration and spec mode and make some moves in the right direction. This is definitely a critical need!

#40

Hi guys,

I was able to reproduce this bug where the SVG loses its dashed border after converting the Sketch SVG into a custom shape in RP 8, and I’ve gotten it filed with our QA team.

As for the issue with the corner radius, I talked to our dev team about this and it turns out this is actually by design. When converting the SVG into a custom shape, that SVG is now a vector shape in RP. You’ll see the same thing when using the Pen tool to create a custom shape or converting a Box widget into a custom shape in Axure RP where its rounded corner attributes will not be available to edit. So while images/rectangles can have rounded corners, custom shapes cannot. Nonetheless, I’ll be happy to pass this along to our product team about the ability to round corners on custom shapes.

Hope this helps!