Sketch has some features to quickly copy the CSS and SVG code from the design elements in any Sketch document. This video demonstrates how to use these code copying features and briefly touches on the differences between exporting an SVG file and quickly copying the SVG code.
- [Instructor] Sketch has a few handy little features…we can use to quickly copy CSS and SVG code…whenever we need to.…First let's copy some of the CSS attributes…from this Featured headline text.…We'll hit Command + plus to zoom in.…We can Command + click to select the text…and then we can right-click…and select this Copy CSS Attributes.…We can also find this under the Edit menu…in the Copy section.…Once we copy the attributes,…then we can paste them wherever we want.…
I have a text file open here,…and I'll hit Command + V to paste.…Sketch gives us back the CSS for the font family, font size,…color, and letter spacing.…The actual CSS we'll get back here…will depend on what kind of layer we have selected.…It won't always export everything,…but this is a pretty handy way…to quickly copy some CSS if we need it.…And Sketch has a really similar copy feature for SVG code.…Let's go to our Symbols page now and hold the Z key…and I'll drag to zoom in on these stars.…
Now we can always export an SVG file by selecting the layer,…
- Navigating the canvas
- Creating wireframes
- Working with shapes, text, images, and masks
- Managing layers
- Creating and nesting symbols
- Using the Vector tool
- Extending Sketch with design plugins
- Creating, sharing, and managing libraries
- Collaborating with Sketch Cloud
- Exporting assets
- Creating style guides and design systems
Skill Level Beginner
Creating a Design System with Sketchwith Anne Grundhoefer1h 21m Intermediate
1. Getting Started
Navigating the canvas2m 51s
2. Creating Wireframes
3. Visual Design and Symbols
Creating a library6m 44s
5. Prototyping and Collaboration
6. Exporting and Asset Management
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.