CiTroNaK Posted October 7, 2014 Share Posted October 7, 2014 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 Philippe BOIS, Estrobeda, romanholba and 2 others 5 Quote Link to comment Share on other sites More sharing options...
10on12 Posted October 7, 2014 Share Posted October 7, 2014 + 1 Philippe BOIS 1 Quote Link to comment Share on other sites More sharing options...
amartinezanaya Posted November 4, 2014 Share Posted November 4, 2014 +1 Quote Link to comment Share on other sites More sharing options...
zeebaf Posted August 6, 2015 Share Posted August 6, 2015 + 1 I want this feature too before buying Quote Link to comment Share on other sites More sharing options...
Staff MEB Posted August 7, 2015 Staff Share Posted August 7, 2015 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. Quote A Guide to Learning Affinity Software | Affinity Quick Reference | Call for Camera Images Link to comment Share on other sites More sharing options...
Wrestler7 Posted November 11, 2015 Share Posted November 11, 2015 Bumping this thread since I think a feature like this would be hilariously neat :) Quote Link to comment Share on other sites More sharing options...
VIPStephan Posted November 11, 2015 Share Posted November 11, 2015 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. Quote Link to comment Share on other sites More sharing options...
rebeccaturnerdesign Posted June 7, 2016 Share Posted June 7, 2016 Has any progress been made with this? I would be interested if this was implemented. S_F 1 Quote Link to comment Share on other sites More sharing options...
CiTroNaK Posted October 6, 2016 Author Share Posted October 6, 2016 Any news? Quote Link to comment Share on other sites More sharing options...
Staff MEB Posted October 6, 2016 Staff Share Posted October 6, 2016 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. Quote A Guide to Learning Affinity Software | Affinity Quick Reference | Call for Camera Images Link to comment Share on other sites More sharing options...
SMA Posted October 9, 2016 Share Posted October 9, 2016 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/ Quote Link to comment Share on other sites More sharing options...
paulera Posted October 13, 2016 Share Posted October 13, 2016 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. Quote Link to comment Share on other sites More sharing options...
bellyanalytical Posted October 13, 2016 Share Posted October 13, 2016 this++ Quote Link to comment Share on other sites More sharing options...
VIPStephan Posted October 13, 2016 Share Posted October 13, 2016 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. garrettm30 1 Quote Link to comment Share on other sites More sharing options...
SMA Posted October 14, 2016 Share Posted October 14, 2016 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.coSerif 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. rcorbari and Michel Saguiar 2 Quote Link to comment Share on other sites More sharing options...
SMA Posted November 15, 2016 Share Posted November 15, 2016 Hype is another interesting HTML animation software: http://tumult.com/hype/pro/ Quote Link to comment Share on other sites More sharing options...
Grozev Posted January 13, 2017 Share Posted January 13, 2017 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. Quote Link to comment Share on other sites More sharing options...
chirpy Posted March 4, 2017 Share Posted March 4, 2017 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. Quote Link to comment Share on other sites More sharing options...
diego Posted June 9, 2017 Share Posted June 9, 2017 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? Quote Link to comment Share on other sites More sharing options...
SMA Posted June 10, 2017 Share Posted June 10, 2017 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. Quote Link to comment Share on other sites More sharing options...
Wiredframe Posted June 12, 2017 Share Posted June 12, 2017 An inspect persona would be best I guess. There should also be a interaction / animation persona. ;) Quote Link to comment Share on other sites More sharing options...
Heres Johnny Posted June 12, 2017 Share Posted June 12, 2017 +1 for CSS Quote Link to comment Share on other sites More sharing options...
c8luna Posted June 13, 2017 Share Posted June 13, 2017 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. Quote Link to comment Share on other sites More sharing options...
msimek Posted September 10, 2017 Share Posted September 10, 2017 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. romanholba, Bento, Wiredframe and 3 others 6 Quote Link to comment Share on other sites More sharing options...
saivan Posted December 7, 2017 Share Posted December 7, 2017 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.