UI/UX Design and Prototyping Features

[Zaxx81]

Any plans to incorporate some Adobe XD, Sketch, or Figma like features to link animations or states between artboards (which would include a preview to go through the UI/UX)?

[Alex Rafter]

I'm also hoping they strengthen the UI / UX design and prototyping features.

[3DJ]

Wish they would as well. I prefer to stick all in with the Affinity ecosystem. I also wish that they created the css properties of elements like in PS and AI, but I think I read somewhere they would never do that. Hopefully they offer some sort of prototyping click through a atleast.

[Glicky]

Animation and UX features is a popular request, and the best suggestion i saw in the forums, was to add an "Animation Persona" in A Designer.

Will be great  

[dominik]

2 hours ago, Glicky said:

Animation and UX features is a popular request, and the best suggestion i saw in the forums, was to add an "Animation Persona" in A Designer.

Will be great  

I do not understand this. What is the relation between UI design and animation?

Best regards,
d.

[3DJ]

Just now, dominik said:

I do not understand this. What is the relation between UI design and animation?

Best regards,
d.

UI design can and should account for Micro interactions. These are typically short animations. Thats one reason. The other is for prototyping a layout. Being able to show what your intent is when someone clicks a button.

 

-Jim

[Mithferion]

Maybe for version 2.x, as some of this has been talked about by Matt Priestly, Lead Developer for Designer.

Best regards!

[dominik]

16 minutes ago, 3DJ said:

UI design can and should account for Micro interactions. These are typically short animations. Thats one reason. The other is for prototyping a layout. Being able to show what your intent is when someone clicks a button.

Hi @3DJ,

thank you for your explanation. I now have an idea what the relation between UI design and animation is (I myself come more from the static layout side of things  ). I'm not sure if this is part of Serif's plans. Only time will tell. I'll follow this discussion.

d.

[3DJ]

10 minutes ago, dominik said:

Hi @3DJ,

thank you for your explanation. I now have an idea what the relation between UI design and animation is (I myself come more from the static layout side of things  ). I'm not sure if this is part of Serif's plans. Only time will tell. I'll follow this discussion.

d.

Hi @dominik I’ll be interested in what they do. I had hopes that maybe one day they would make an After Effects competitor but I think thats some heavy lifting for anyone to match, but if anyone can Affinity can! I still use affinity Designer on iPad to make my svg’s  and they export perfectly to a great app called Keyshape App on Mac that I can then animate with css for web and other apps. Its a great workflow.

[dominik]

3 minutes ago, 3DJ said:

I had hopes that maybe one day they would make an After Effects competitor but I think thats some heavy lifting for anyone to match, but if anyone can Affinity can! 

I think this is a far call. I see your enthusiasm, so why not dream 

d.

[retrograde]

On 7/9/2019 at 10:49 AM, 3DJ said:

Hi @dominik I’ll be interested in what they do. I had hopes that maybe one day they would make an After Effects competitor but I think thats some heavy lifting for anyone to match, but if anyone can Affinity can! I still use affinity Designer on iPad to make my svg’s  and they export perfectly to a great app called Keyshape App on Mac that I can then animate with css for web and other apps. Its a great workflow.

I checked out Keyshape after reading your post. It's pretty sweet. It's a slick, small footprint svg animation app that is pretty intuitive and much faster to get rolling in than say After Effects which, after viewing some AE tuts on youtube, can be a pretty deep dive. It doesn't have any interactive features, strictly animation, but fairly easy to get some quick professional results and it outputs to a variety of web and video formats right out of the box and Lottie files as well if you use a free plugin. It also has some simple vector editing capabilities so you can make small adjustments to your shapes right in Keyshape if need be. They have a 14 day full trial, I made a few animations within the time period then bought it for 40 bucks Canadian. Less than the price of 1 month of After Effects... :-)  Until Serif comes up with something similar,  it'll be my "go to" for simple animation work.

So thanks for the heads up 3DJ!

[nicjrich]

Getting into the UI Design space would be awesome. Could stick within one ecosystem and that would make my face very happy! It would also be cool if symbols went across files. Like I could link a logo from Affinity Designer into my UI design.

[Robert Petras]

A dedicated UI design tool from Serif would be much more appreciated by designers, who unfortunately have to use Sketch or Adobe XD, Figma, etc.

I would gladly pay for a new UI design and prototyping software to Serif if they could bring this to life in the future.

Just dreaming about a full circle: print, design, photo and prototyping tools under the Affinity umbrella could be a perfect toolbox for any creative professionals.

Affinity Proto could be a game-changer and a disruptor in this arena. 

As I see, there is a huge demand for a non-subscription based prototyping tool in the market.

[nicjrich]

I also think it would be nice to have an app actually take full advantage of the hardware you have. The Affinity apps use system resources efficiently and all of their apps have never dipped below 60 fps no matter that I throw at it.

[John Mevis]

It's just Dream - prototyping tools from Serif - Affinity Proto ❤️

[John Mevis]

I do not want to bend under the market. With Sketch or Figma/XD. On our studio I use Affinity Designer and advocate this tool in every way. At all sites in social networks, I promote the Affinity Designer. Despite the fact that people and developers of other programs and plugins do not give due attention to Affinity apps (for example ProtoPie and other has export from XD, Sketch, Figma). But I believe thanks to the friendly and hard work of the community and the company Serif, We  show the world what Affinity App are (!)

Thanks for attention & sorry for my English:) I just love Affinity apps and I want to big thank for their great applications. Serif is amazing!!!

[fde101]

On 12/26/2019 at 5:03 PM, retrograde said:

It doesn't have any interactive features, strictly animation

You might want to check out Tumult Hype - offers many of those same things plus interactive features for the web: https://tumult.com

[John Mevis]

I discover for my self this cool tool - ProtoPie. So cool and easy for make great prototype. I asked ProtoPie support about importing from Affinity Designer. They said you can make a request and we will consider this opportunity.

Here my request and I would like to ask the affinity community to support my request. This is a great chance to find the possibility to animate our Ui.

https://protopie.canny.io/feature-requests/p/import-affinity-designer

 

Thanks for attention & wish a nice day.

[retrograde]

On 4/17/2020 at 2:07 AM, fde101 said:

You might want to check out Tumult Hype - offers many of those same things plus interactive features for the web: https://tumult.com

Thanks, fde101, I have checked it out and it seems like a pretty good option with some basic interactive features. But you can't really edit vector shapes brought into it other then scale and rotate kinds of edits , it's on a pretty slow development cycle with a very small team and there aren't a ton of users or tutorials out there for professional level types of projects. I am keeping my eye on it though incase it starts to get more promising. It's too bad the options out there are so thin, there really is a need for an After Effects alternative for people who either don't want or need all of those features or who just want to move away from Adobe. 

[fde101]

47 minutes ago, retrograde said:

you can't really edit vector shapes brought into it other then scale and rotate kinds of edits

Agreed that currently there is no way to edit the individual points of imported vector shapes - they are treated more like raster images from that perspective.  They have several threads on their forums discussing this.

You can create and edit vector shapes (using tools similar to the pen/node tools) within Hype itself, including animating the individual nodes.

Currently Keyshape seems to have better compatibility with the outside world and a few extra vector tools (such as boolean operations), but Hype has a more complete set of animation features, such as interactive animations and the ability to create animations that can respond to different sizes of containers (not stuck with a fixed resolution or aspect ratio).

[retrograde]

5 hours ago, fde101 said:

Agreed that currently there is no way to edit the individual points of imported vector shapes - they are treated more like raster images from that perspective.  They have several threads on their forums discussing this.

You can create and edit vector shapes (using tools similar to the pen/node tools) within Hype itself, including animating the individual nodes.

Currently Keyshape seems to have better compatibility with the outside world and a few extra vector tools (such as boolean operations), but Hype has a more complete set of animation features, such as interactive animations and the ability to create animations that can respond to different sizes of containers (not stuck with a fixed resolution or aspect ratio).

Gotcha. I had contacted the Keyshape team about adding interactivity and they said there weren't any current plans to add that capability. 😞 

[Paweł Komarnicki]

Anything UX/Prototyping from Affinity is a must-buy for me — I don't even need the crazy cloud-based hosting etc., I can host it myself easily :-) What I need is a way to link between artboards in a file and export these as a standalone HTML page, optionally with a "device overlay" being just a limited viewport/iframe to hold the image on a fake device screen ;-)

I could even do it myself if there was a documentation of the file format or a plugin system :-)

[Frozen Death Knight]

1 hour ago, Paweł Komarnicki said:

Anything UX/Prototyping from Affinity is a must-buy for me — I don't even need the crazy cloud-based hosting etc., I can host it myself easily :-) What I need is a way to link between artboards in a file and export these as a standalone HTML page, optionally with a "device overlay" being just a limited viewport/iframe to hold the image on a fake device screen

I could even do it myself if there was a documentation of the file format or a plugin system :-)

They did add a feature in 1.9 that is really useful for UI/UX prototyping; Linked Layers. You need Photo to do this in Designer (I really hope they add it to Designer in the future, because it is incredibly useful), but it most certainly a worthy investment. You can create repeating patterns, link fill, line styles, vector shapes and more. The links work across multiple artboards and in all three programs.

Here's a quick video demonstration.

Considering that this is the first official version of this feature, I can't wait to see what they will add to it in the future. 

[karthikreddyandru]

On 12/28/2019 at 5:07 AM, Robert Petras said:

A dedicated UI design tool from Serif would be much more appreciated by designers, who unfortunately have to use Sketch or Adobe XD, Figma, etc.

I would gladly pay for a new UI design and prototyping software to Serif if they could bring this to life in the future.

Just dreaming about a full circle: print, design, photo and prototyping tools under the Affinity umbrella could be a perfect toolbox for any creative professionals.

Affinity Proto could be a game-changer and a disruptor in this arena. 

As I see, there is a huge demand for a non-subscription based prototyping tool in the market.

Yes it would be awesome to have 'prototype persona' in designer.

[Robert Petras]

For now I must go back to Sketch to do my job. That's what it is.