CSS export for layers

[CiTroNaK]

Hi,

it would be great if you add CSS export feature like CSS Hat (https://csshat.com).

 

I think that every HTML & CSS coder will buy your Affinity Designer and stop using expensive Photoshop :-)

 

Thanks.

 

Petr

[10on12]

+ 1

[amartinezanaya]

+1

[zeebaf]

+ 1

 

I want this feature too before buying

[MEB]

Hi CiTroNaK, amartinezanaya, zeebaf,

Welcome to Affinity Forums :)

This is something that's being considered. I don't know much details at this point and it certainly may take a little if we move forward, but we are looking into it.

[Wrestler7]

Bumping this thread since I think a feature like this would be hilariously neat :) 

[VIPStephan]

I think that every HTML & CSS coder will buy your Affinity Designer and stop using expensive Photoshop :-)

 

Professional web designers/developers don’t use Photoshop to design websites in the first place.

[rebeccaturnerdesign]

Has any progress been made with this? I would be interested if this was implemented. 

[CiTroNaK]

Any news?

[MEB]

Hi CiTroNaK,

Welcome to Affinity Forums :)

No, sorry no news/progress regarding this.

We are mostly focused in completing what's on designer's roadmap first.

[SMA]

Professional web designers/developers don’t use Photoshop to design websites in the first place.

There seems to be one upcoming promising software that can do this, Scarlet Macaw:

http://scarlet.macaw.co/

[paulera]

Wanna drop my +1 here too.

 

Just saying, a feature to generate code is not just to make developers' job easier, specially because in a full development team devs don't usually make the UI designs. It would in this case connect teams, creating a shorter path and improving consistency between designers and frontend developers, saving a lot of time (therefore $).

 

I think it would be a gamechanger and convince companies to try moving from Sketch to AD.

[bellyanalytical]

this++

[VIPStephan]

Just saying, a feature to generate code is not just to make developers' job easier, specially because in a full development team devs don't usually make the UI designs. It would in this case connect teams, creating a shorter path and improving consistency between designers and frontend developers, saving a lot of time (therefore $).

Your premise is wrong, though. First of all, CSS does nothing without HTML, so you need to export HTML, too. And the point of HTML is primarily to give content a certain meaning (see https://en.wikipedia.org/wiki/Semantic_HTML)The problem we have now is that no graphics application (or WYSIWYG editor) can know the meaning of an object someone “drew” on a canvas. So, the best that application can do is throw up a lot of divs and a lot of bloated junk code in general.

 

Therefore, it doesn’t make the jobs of any developer, who takes their profession seriously and has at least basic work ethics, any easier; they would have to rewrite the bloat properly anyway. HTML/CSS export could at best serve prototyping (a way Fireworks went, for example) but would never be suited for production environments.

[SMA]

Your premise is wrong, though. First of all, CSS does nothing without HTML, so you need to export HTML, too. And the point of HTML is primarily to give content a certain meaning (see https://en.wikipedia.org/wiki/Semantic_HTML)The problem we have now is that no graphics application (or WYSIWYG editor) can know the meaning of an object someone “drew” on a canvas. So, the best that application can do is throw up a lot of divs and a lot of bloated junk code in general. Therefore, it doesn’t make the jobs of any developer, who takes their profession seriously and has at least basic work ethics, any easier; they would have to rewrite the bloat properly anyway. HTML/CSS export could at best serve prototyping (a way Fireworks went, for example) but would never be suited for production environments.

Guys, if i can ease the tension a little, for those interested in a WYSIWYG app, you might wanna pay attention to the developments in Scarlet Macaw: http://scarlet.macaw.co

Serif is not focusing on this for now, they are limited in size and resources should go to more important issues, like coming up with a robust perspective tool in A.Designer for example. I hope they're listening. It kills me that Carapace (http://www.warrenmarshall.biz/carapace/) can do it and Designer needs to play catch up!

 

I also happen to think that if you want to be good web designer, go learn front-end too. Don't be lazy! I'm doing that now. And i'm only getting started.

Those intimidated/confused by floats/clear for e.g. in CSS, there's a better alternative by learning flexbox! There are so many paths to learning ya!

 

Hope i make sense.

[SMA]

Hype is another interesting HTML animation software: http://tumult.com/hype/pro/

[Grozev]

Guys, if i can ease the tension a little, for those interested in a WYSIWYG app, you might wanna pay attention to the developments in Scarlet Macaw: http://scarlet.macaw.co

 

 

That actually looks pretty neat, I can totally see myself using it, or using it in combination with AD, thanks for the link :) Let's just hope that the PC version won't come too long after the Mac one.

[chirpy]

Hype is another interesting HTML animation software: http://tumult.com/hype/pro/

 

Guys, if i can ease the tension a little, for those interested in a WYSIWYG app, you might wanna pay attention to the developments in Scarlet Macaw: http://scarlet.macaw.co

Serif is not focusing on this for now, they are limited in size and resources should go to more important issues, like coming up with a robust perspective tool in A.Designer for example. I hope they're listening. It kills me that Carapace (http://www.warrenmarshall.biz/carapace/) can do it and Designer needs to play catch up!

 

I also happen to think that if you want to be good web designer, go learn front-end too. Don't be lazy! I'm doing that now. And i'm only getting started.

Those intimidated/confused by floats/clear for e.g. in CSS, there's a better alternative by learning flexbox! There are so many paths to learning ya!

 

Hope i make sense.

 

SMA, Macaw has been abandoned. No work/progress has been made on it in years. Macaw was developed by a group of kids that gave everyone a lot of hype and promise and then under delivered and then sold the company to InVision, which has done nothing with it.

I would avoid Macaw like the plague. I like InVision, but it's too late for anything good to come of Macaw.

If you are looking for something like it, then Webflow is your best bet.

[diego]

I get that it would take a lot of work to build a fully featured HTML/CSS exporter, and I understand VIPStephan's comment about CSS having no meaning without HTML. But some HTML tags like p, H1, H2, etc are used pretty universally. AD already has character styles - couldn't these be converted to CSS code fairly easily?

[SMA]

I get that it would take a lot of work to build a fully featured HTML/CSS exporter, and I understand VIPStephan's comment about CSS having no meaning without HTML. But some HTML tags like p, H1, H2, etc are used pretty universally. AD already has character styles - couldn't these be converted to CSS code fairly easily?

AD will be one heck of an app should they implement this CSS feature. I really hope they are llistening to this and planning for implementation sometime in the near future.

[Wiredframe]

An inspect persona would be best I guess. There should also be a interaction / animation persona.  ;)

[Heres Johnny]

+1 for CSS

[c8luna]

What are you wanted to be exported/imported via CSS?

At the very least, I would just like it for the ability to copy the basic style (font, color, stroke, fill) from without having to retype it in CSS or the other way around.

[msimek]

I like the current 1.6 beta of the Designer app. I drew a website design in it and now I want to code it.

 

But I feel like back in the old days of Photoshop, when I need to ques every dimension, unit (pt to px conversion), color, gradient etc, by hand.

 

Current and most used apps for web/UI design have a decent way of CSS properties export, which provides clear definition of a designer intentions. Just look at Sketch, Photoshop, Avocode etc. they all have it, because it's a must for using a design further in a development chain.

 

Please Affinity, consider this feature (or API for it), if you're serious about targeting Designer for the UI design area. Thanks.

[saivan]

I agree, this is a much needed feature. In order to have simple effects like a hover effect, I need to painstakingly target every element individually in my code. Its just not a very good way to design.