Jump to content

Recommended Posts

  • 1 month later...

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

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.

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

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.

Link to post
Share on other sites
  • 4 weeks later...
  • 4 weeks later...
  • 2 weeks later...

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. 

Link to post
Share on other sites
  • 2 weeks later...
  • 4 weeks later...
  • 2 months later...
  • 3 months later...
  • 1 year later...
  • 5 weeks later...
  • 4 weeks later...
  • 2 weeks later...
  • 5 months later...

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.

Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Please note there is currently a delay in replying to some post. See pinned thread in the Questions forum. These are the Terms of Use you will be asked to agree to if you join the forum. | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.