Jump to content

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.


designer & frontend dev @potzo.net

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

+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.

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×