Sketch Markup Listify Plugin

What is Sketch Markup Listify?

A Sketch plugin built to make the life of every designer and front-end developer a little bit easier. The idea behind this plugin is to make it fast and easy to convert and copy your text layers or groups with text layers into HTML lists.

How will it help?

Using Sketch Markup Listify plugin you can speed up your HTML coding process when you need to include in your code large lists or option elements from Sketch.

How to use it?

To get your markup list pasteable, please select text layers, groups of layers (with text layers) or both, and then go to Plugins ▸ Markup Listify, or just press the keyboard shortcut cmd + ⌥ + l, and voilá. But nothing speaks better than an image:

Installation

First of all you need to have Sketch installed. Next, there are several ways to install this awesome plugin, so choose the best option for you.

Quick install (best way to go for rushed people)

1. Download the zip file with the Markup Listify and unzip.
2. Double click Markup Listify.sketchplugin to install (while Sketch is open).
3. You can find the plugin in the Plugins Menu ▸ Markup Listify.

Git clone (best way to go for git lovers)

1. Using a command line app (Terminal, iTerm, etc), navigate to the Sketch Plugins directory. This is different depending on your set up. If you’re unsure, open Sketch and go to the Plugins Menu ▸ Manage Plugins... ▸ Show Plugins Folder.
2. Once you’re in the Plugins directory git clone https://github.com/marisaroque/sketch-markup-listify.git or your fork.
3. You can find the plugin in the Plugins Menu ▸ Markup Listify.

Install with Sketchpacks

System Requirements

Sketch Markup Listify has been tested on Sketch (version 46) on MacOS Sierra. If you have any problems, drop me a line.

Roadmap & Feature Ideas

•  Build relations between text layers and its sub-groups.
•  Create an option to select the type of list tags, like, ul, ol or option.
•  Create an option to select the tags that might need to be inserted inside li tags, like, for example, li > a, li > p, li > span, etc.
•  Find a solution for handling invisible layers or group of layers.
•  Create an option to copy Pug (old Jade), Markdown and Handlebars.
•  Create an option to copy the JSON corresponding to the selection made.
•  Consider the possibility of creating pasteable markup lists with images, text and shapes.
•  Consider the possibility of developing the inverse action, i.e., have an HTML list and be able to convert it into groups and/or text layers.