CSS export for layers

[Bawell]

+1 for for CSS persona / panel

 Like this

 

[JanickoSlniecko]

I find this feature to be the most important for Affinity Designer to be considered an UI design tool. I need this very much. There is a way to get some of the attributes by exporting PSD and uploading it to assets.adobe.com but it is such a pain and it does not work very well.  So basically I have to guess all the CSS values like 5 years ago before I descovered things like Brackets + Adobe Preview (Extract) or CSS Hat

[saivan]

One thing is, since they are tagging with the `serif:id`, we could easily write a plugin that exports as classes and id's just by choosing layer names like id.classname, which would convert things to id="id" class="classname", then it would just be up to the user to name their layers according to spec. That could be fun.

[davision]

+10000 No, seriously, c'mon. We need this badly. 

[VIPStephan]

I don’t. And I don’t see any use other than for quick prototyping. But that would require so much more functionality than “just” CSS export. What about interactivity? Fireworks (Macromedia/Adobe) was such a tool, but even it didn’t produce production-ready code.

[Potzo]

On 3/23/2018 at 9:18 PM, VIPStephan said:

I don’t. And I don’t see any use other than for quick prototyping. But that would require so much more functionality than “just” CSS export. What about interactivity? Fireworks (Macromedia/Adobe) was such a tool, but even it didn’t produce production-ready code.

You're wrong, we used Fireworks for production a lot. You could easily make slices and export them all. There was extension for svg export. We also had custom js script that exported text styles to xml or plist format.

It would be really nice if we had text styles panel in Export persona where we could define custom output. That's the only thing I am missing actually.

[VIPStephan]

22 hours ago, Potzo said:

You're wrong, we used Fireworks for production a lot.

By “production” I mean to create websites that are presented to the public out of the box. No serious professional web developer would use Fireworks to create the code for a website and upload that to the internet like that.

22 hours ago, Potzo said:

You could easily make slices and export them all. There was extension for svg export. We also had custom js script that exported text styles to xml or plist format.

Yeah, that’s not production-ready code, though. You used FW as designing tool which is fine and what it’s made for, but not to create websites in a website-builder-like fashion which is what I read out of a lot of comments here.

[MCFC_4Heatons]

Fireworks was really the companion tool for Dreamweaver - mock-up in Fireworks, front-end web design in Dreamweaver

+1 for CSS export, it needs to be done correctly though,  options for shorthand properties, rgb or hex colors and vendor prefixes where applicable.

[moonbeetle]

+1 for CSS export

Affinity Designer's #1 competitor has it for quite some time now :-/
Even if it was just to export CSS from text layers and color fills that would already mean a time saver when converting a design to web.

[JackBrown]

+1

[DragonWhimsy]

There seems to be a misunderstanding by some posters here on what is being asked for. The OP is not asking for a WYSIWYG functionality being added to AD. No one is asking for AD to be turned into Adobe Muse or Frontpage 2000. 

What is being asked for is that each layer be given CSS Properties so that when a designer hands off the design to a developer that the developer can EXACTLY match the design given because the CSS properties are right there for him to see. He's not approximating the design, he has the option of an EXACT translation. It saves the developer time and guesswork. No one is expecting AD to do the actual coding. It's just supplying some CSS Properties to speed up the developer's work.

Most software used for UI design already has this functionality. Sketch. InVision. Illustrator. Photoshop. Only Adobe XD doesn't have it yet. And AD. 

Serif put a lot of effort into making AD ready for UI designers in the 1.5 update, but without CSS export it's mostly for naught. You absolutely have to have this feature to compete. 

[pmi]

+1 for CSS export

[JanickoSlniecko]

We need this so much.. Just look at Figma for example. The way Figma exports CSS is pretty basic, but that is all you need to position AD as an UI design app..

[Steve100]

Hello,

I'm new to Affinity Designer, I was hoping it would be possible to output certain settings (colours, fonts, font sizes etc.) into a CSS file when exporting as SVG but after reading the above I guess it isn't.

Can I please ask if there are any plans to add such a feature?

Best Regards,

Steve

[Klocus]

+1 for CSS box for layer / object!

[Dalibor Puljiz]

+1 to this as well, I'm just coding the entire design that I imagined in Designer with all the gradients and stuff. Now I need to redo all, instead of just copying the layer CSS.

[bkollee]

Exporting CSS code would indeed be a great extension of AD. Now I use Sketch: https://www.sketch.com/. Hopefully this tool will get into AD soon.

[Bayushi Dzen]

+1 for CSS export

It is very usefull function, user could open PDF design and get all css styles.

Please add it on AD

[Eddy_code]

+1

[Ammoniteii]

+1 A useful feature for sure. 

[LinuxHG]

Actually as a SASS/CSS developer I don't need Affinity to export code either HTML or CSS. What I would love to see is a detailed information box. I would like to receive a design, click on an object and have one nicely laid out information box give me all the specs of that element from include size, margin, padding, font (with size, type, etc) (if applicable). If a box has rounded corners I want to know by how many pixels. And I don't want to have to click all over Affinity in a thousand dialogue boxes to find this information.

An example of what I want. When a designer send me specs using Adobe XD this is what she sent. https://xd.adobe.com/spec/fe86e0f3-6a5d-43f1-689e-42dcaf252aa6-88b7/specs/

And I know XD shows the CSS, but I completely ignored it as everything in my project was in rem. I knew how to translate the pixels to rem and off I went building a responsive site.

As a developer, all I have to do is click on objects on the interface and get every piece of information I need. Then I could write my own CLEAN CSS/SASS styling. If this already exists, please point me to it and Affintiy will already be the perfect web dev app. And no, it doesn't need to be on the web like XD.

I don't want my CSS written out for me, because Affintiy doesn't know if I'm using pixels, em, rem. They don't know what SASS functions I'm using.

[arnofly]

+1 for CSS export

As many freelance that make websites , I do the job of developer and web designer, so this feature should be very helpful, even if the tool is not very powerful. For example, it could be a good beginning to offer the possibility of the user to get the Hex colors of the last gradient is drawn.

In general in AD or AP, I think that the copy of colors as string could be improved by the creation of a special tool for that. But for the moment I use an external free tool that I like: http://instant-eyedropper.com

[webdev]

On 9/10/2017 at 10:58 AM, msimek said:

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.

+++ this

 

I love how in Lunacy you can both enter CSS-type properties when adjusting elements, and hit F4 to instantly get the CSS properties of elements.