We've been talking a lot about using Sketch to collaborate with team members, and creating assets for both review and final projects but there are a few more features Sketch has for working with code. Sketch can generate CSS attributes for things like text blocks, as well as generate SVG code for artwork we draw in Sketch.
- [Voiceover] We've been talking a lot about using Sketch…to collaborate with team members and creating assets…for both review and final projects,…but there are a few more features that sketch has…for working with code.…Sketch can generate CSS attributes for anything on the stage…which can be really helpful for typography,…as well as generating SVG code for artwork…that we draw in Sketch.…So to demonstrate this feature, I'm gonna move…over to an HTML file opened up in a code editor.…I'm going to preview this in the code window.…
Which is exactly how this would look…if I were to preview this in a browser.…So on the left-hand side you can see all of our HTML.…Down here we have H3, which is our…Tools of the Trade headline.…And then our paragraph content underneath.…On the right-hand side we can see that the Google font…that we have placed in CSS is showing up here.…So what I want to do is get some of the properties…so that Tools of the Trade in the H3 element here…will match a little closer to what we have…inside of our Sketch document.…
- Sharing artboards
- Exporting artboards as image files
- Integrating with other UX design software
- Exporting assets, code, and animations