dataliterate / data-populator Goto Github PK
View Code? Open in Web Editor NEWA plugin for Sketch and Adobe XD to populate your design mockups with meaningful data. Goodbye Lorem Ipsum. Hello JSON.
License: MIT License
A plugin for Sketch and Adobe XD to populate your design mockups with meaningful data. Goodbye Lorem Ipsum. Hello JSON.
License: MIT License
It’d be great to have this in there :)
scenario: in the data, you say eg. "icon": "email". in the sketch template you have a placeholder boundingBox with the desired size called "icon". the plugin looks up another sketch file and grabs a layer group (containing the mail icon as vector) called "email" and inserts the appropriate icon.
(i think it's not really possible technically, since generally speaking, this would be a great solution to "import" UI components/icons in a very meaningful way and somebody would have done that already ;-)
it would be very handy to be able to do "populate again" and it will use exactly the same JSON file as last time
the data hierarchy
* group1
* item1
* item2
* item3
* group2
* item1
* item2
* item3
…
could be matched to the following layer hierarchy
* layergroupA
* layergroup1
* layergroup2
* layergroup3
* layergroupB
* layergroup1
* layergroup2
* layergroup3
meaning that {placeholders} will only be replaced on the respective level of the hierarchy
When using "Populate with JSON" it would be helpful if the last active folder is opened and not the user's home folder.
I understand a folder must be authorized. But when you work on a project and have a specific json file located somewhere, it's quite tedious to always navigate to that specific folder, even if I may have placed it in the sidebar navigation or even though I can find it in the last used folders list.
The textual contents are getting placed perfectly well, but the images remain the same. You can see if below that I have specified a different picture for each section but still in the end when I run the script in Sketch, it brings out only one of those images and on every "Populate again" command it just brings another picture but the same for everything.
I just started using this plugin so is there anything else I should be looking for ?
[
{
"course names" : "Cosmetic Dentistry",
"date" : "3 Mar 2016",
"price" : "Rs. 40,000",
"image" : "Informdoc iOS/images/File1.jpg"
},
{
"course names" : "State of the art Endodontics for the General Practitioner",
"date" : "NIL",
"price" : "Rs. 20,000",
"image" : "Informdoc iOS/images/File2.jpg"
},
{
"course names" : "Crown and Bridge",
"date" : "20 Feb 2016",
"price" : 15000,
"image" : "Informdoc iOS/images/File3.jpg"
},
{
"course names" : "Laser Dentistry",
"date" : "NIL",
"price" : 15000,
"image" : "Informdoc iOS/images/File4.jpg"
},
{
"course names" : "BPS Denture",
"date" : "13 Mar 2016",
"price" : 15000,
"image" : "Informdoc iOS/images/File5.jpg"
},
{
"course names" : "Certificate Program in Clinical Dentistry",
"date" : "09 Apr 2016",
"price" : 180000,
"image" : "Informdoc iOS/images/File6.png"
}
]
Fantastic app ! Just a note: The plugin seems to remember the blocks where a json variable was input and replaced. This prevents copying of any text block which contained a variable at some point of his history, even if you fill it up with a new variable. Lots of unatural manipulation needed to handle these blocks.
I have my symbol on my Symbols page with placeholder text and image, then when I populate symbols on my page I'm designing on with JSON the text is populated, but the image remains as a grey box.
Hi,
I need some help :)
Is there a way to add a 'need help' label to my issue? Couldn't find it...
I used a pretty complex JSON to populate a text in sketch. I successfully retrieved the title by naming the text layer: {sectionPage.primaryTeaserList[1].articleList[0].title}
Now I want to create a grid with the JSON populator. The grid should contain all titles from the 'articleList object'. So I need:
{sectionPage.primaryTeaserList[1].articleList[0].title}
{sectionPage.primaryTeaserList[1].articleList[1].title}
{sectionPage.primaryTeaserList[1].articleList[2].title}
...
{sectionPage.primaryTeaserList[1].articleList[6].title}
Any idea how to realize this in 1 'populate JSON command'?
thx!
What happened
When I populated a Sketch file with JSON, it is mysteriously also changes other text layers' content even though they are not variables.
The unintended text layers changed are being changed to text that it was before but written over and saved in Sketch.
What is expected
The layers with variables will change and the layers without variables will not change.
Steps to reproduce
Files to reproduce and screencast of my repro: https://db.tt/vqDH6B74
Some other notes on the mysterious text layer
Restore Placeholders
it doesn't do anything, confirming that it's not working as a variable.Thanks!
Can you link images with URL? i cant seem to get it working.
I’ve used https://github.com/preciousforever/sketch-data-populator for Sketch and run into a blocker for me. I am parsing SVG graphics to points on the artboard and I was hoping to pass in a radius or W x H (in JSON) to the containers on the artboard that hold the svg’s in hopes to control their scale.
Currently the container on the artboard restricts the real proportions I need translated. Can Sketch layer properties be accessed in the JSON data import so I can control the SVG container size?
With the introduction of symbol overrides in Sketch 3.7 (currently in beta), it would be great to be able to populate overrides with JSON data.
Sketch 3.7 symbol overrides in action: https://twitter.com/tmgrhm/status/714864050493005824
"identifier": "com.precious.sketch.datapopulator"
should become "identifier": "com.precious-forever.sketch.datapopulator" as we do not own precious.com
For some reason it no longer allows me to use nested JSON.
For example:
"categories": [
{
"id": 8,
"name": "News",
}
],
It would normally allow me to just use {categories.name}
Sketch crashes whenever I try to populate my field group with more than one image and with more than one svg. I have a product image, an image of ratings, and two svg's for two badges. Is there support or help for this? Thanks!
This plugin is awesome, for starters. ;)
I'm on a Mac with German localization and therefore, the decimal separator is a comma and not a point. The grid options in certain situations come up with 0,0
by default, which causes an error if not corrected to 0
or 0.0
manually.
Maybe you can do some sort of parsing on the input, that would be great!
By the way…Sketch has the same problem, for instance when calculating widths etc.
In addition to the Make Grid issue, the {image} and {{icon}} placeholders are also not working. You can see the behavior from the demo.sketch file. I'm sure you guys noticed this as well (hard to miss). But I wanted to mention it as another breaking change with Sketch 3.5.1.
When I run the plugin, Sketch crashes as soon at the file chooser dialogue opens.
Running Sketch 3.4.2. Purchased from App Store, but running manually downloaded copy.
Video of crash:
https://dl.dropboxusercontent.com/u/103385876/sketch-json-crash.mp4
I accidentally had the wrong file path in my json. Upon populating with the incorrect image URL Sketch freezes up then closes leaving some temporary pages open in my doc.
Thanks for this great plugin!
Is it possible to use nested arrays, for example:
[{ "name": { "firstname": "Jack", "lastname": "Black" } }]
Hi there,
I am using the populator to write out a list of sports in a text variable {sport}, these layers sit in a group that I have duplicated 27 times as there is other items in the group.
When I run the populator two things happen.
Currently, if a {placeholder} doesn't get data from populating, it says "undefined".
Would be great if his could be configured – a string (or strings) that could be used instead of "undefined" (not sure how and which granularity).
But also, imagine having {price} and {oldprice}. Some data rows don't have "oldprice" though because there's no price change to communicate. In this case it would be good if a placeholder could be omitted.
I'm not all clear how we could do this. Flag a {placeholder} as optional somehow?
I was thinking if you took a layer group and allowed iterating inside of the group like a handlebars template would do:
The layer group could be named {dataObject}
and the text layer would be {name}
that way you could iterate over an array of objects and then populate the data inside it. Does that make sense?
Will there be an enhancement which enables Sketch to read nested data? Currently it ignores anything that is nested. For example:
[
{
"id": 1,
"summary": "Willie",
"image": "/images/_78419012.jpg",
"items":[
{
"type":"stuff",
"title":"stuff",
"summary":"stuff",
"stuff":false
},
"headline": "stuff",
"company": "stuff",
"job": "stuff",
"email": "stuff"
]
Thanks!
Am I doing something wrong or is it currently not possible to parse arrays containing objects?
See example below:
[
{
"array": [
{
"id": 1,
"details": "first details"
},
{
"id": 2,
"details": "more details"
}
],
"secondArray": [
{
"id": 3,
"details": "just another object"
}
]
}
]
It may be tricky to explain what's happening, but I'll try:
I created a JSON file from scratch, and ran it through jsonlint.com to validate it. I created the element in Sketch I wanted to populate, and ran the data file through Sketch Data Populator. The first time, it operated fine. But after some tweaking, I wanted to change some of the data - (specifically, shorten the names of some of the properties so I didn't have to have wide text boxes to accommodate them).
The new variable names weren't going through, however, and in fact I discovered that the entire value of the field was being overwritten with what had previously been put in by Sketch Data Populator. So for example, if the field was "Pencils, {var1}, and pens", and I changed it to, "!!! Pencils! {var1}, and pens!!!", Sketch Data Populator would parse the data with no apparent errors, but the field would read, "Pencils, crayons, and pens" instead of "!!! Pencils! crayons, and pens!!!"
I tried quitting Sketch and reopening it, and even uninstalling Sketch Data Populator and reinstalling, but nothing worked. But finally, I was able to circumvent the problem by creating entirely new objects instead of simply duplicating the old ones. This seemed to be a serviceable workaround.
Unfortunately I can't share the files since I'm under an NDA. I'd been working in the file for some time, and without knowing more about how the plug-in works, I can't offer much help on how to replicate, especially since I don't remember what all I did or how it happened.
I have the json file below filled with different assets and text. When I use populate with JSON and say I need 1 column and 2 rows, I get two layer groups with two different avatars, but each layer group uses the same placeholder text from ID 2 only.
[
{
"id": 1,
"avatar" : "URL1",
"name": "NAME1",
"location": "LOCATION1"
},
{
"id": 2,
"avatar" : "URL2",
"name": "NAME2",
"location": "LOCATION2"
]
Is possible to use JSON data from a API available on an URL?
How do I go about getting three or four lines of text in a box? I can't make the text box three or four lines tall so that it fills.
we should think about a way to instead of use the order in the JSON, we can randomise it
When I use 'Populate Again' in a document with multiple pages, the view switches to the last page. It should just stay on the current page. See the behaviour in this screencast.
I've seen an error that reads, "There was an error parsing data. Please make sure it's valid."
Just wondering if you could help me understand what's triggering the error and how to fix it.
I've validated the JSON and it works with the plugin until it doesn't. Sometimes a new text box or a new document fixes the issue. The template I have is large so that's not ideal.
Help?
Just a bit of a feature request to have the ability to write in yaml to populate a sketch file.
Hi,
When sketching a blog archive page, I create a symbol for a blogpost. A blogpost generally contains a title, excerpt/description and an image.
I know it is possible in Sketch to 'exclude text value from symbol'. This way every post gets its own title. But is there also a way to exclude an image? I'm not sure if this is a feature missing in Sketch or a feature request for the plugin.
Do you see any options how to deal with this?
thx!
Populating a text layer stores the original content of the layer as meta data. This way, it's possible to "re-populate" easily.
It also means that once populated, a field now has its original content and placeholders forever. So entering new {placeholders} manually into the text layer doesn't work – it will always use the stored values.
a solution: a "Restore placeholders" command that inserts the initially used content/placeholders back into the text layer and gets rid of the meta data. now changing something should allow for a fresh start.
I can fill a single row but as soon as I try to make a grid placeholders aren't replaced anymore.
When I click "Populate again", nothing happens, because my {tags} are all gone, and the plugin sees nothing to populate. I'd LOVE IT if the plugin could actually repopulate all the zones again, sorta like a shuffle.
It seems like a great way to test to strength of my layout, to just shuffle one random set after another into place. Currently it seems like I'd need to maintain a "source" set of artboards, where I keep the {title} and such in place, and duplicate each time I wanted to populate.
Any way for the plugin to repopulate the same fields it's already touched? Perhaps instead of looking for {title} in the text field content itself, we could name the actual layer {title}, so the plugin would know to continually target it? Even after it's been populated once?
It would be great if we could map items in data to specific content variables? eg {firstname-0} = data[0].firstname
Use case:
Multiple modules (repeated elements) that are disconnected, across multiple artboards, or nested within different symbols but which share common data.
Thanks,
After creating a list of items in Sketch 3.7 (28169) from a (new 3.7 type) symbol by importing a (tested and error free) JSON file I cannot save the document. That makes Data Populator completely useless for symbols – which let's me stuck in Sketch 3.6.1 :/
Data Populator 1.6-beta.1 (with JSON import) only works with regular folders, not with symbols as far as I experienced it.
Unfortunately I cannot share the files since they are confidential.
Hope it helps,
Aki
a way to tell a (single line) text layer it's limited to N characters, then cut the text and insert an ellipsis (…)
when using Text Placeholders a la {placeholder?}
that should be substituted with the default substitute, Sketch 3.7.1 crashes when using the "missing-data" Preset that comes with the demo.
It took me a few minutes to track down, but I am running into an issue where, if I use the SVG version of an icon, Sketch will crash upon clicking the "Populate" button. However, if I use a PNG version of the same icon, everything goes swimmingly.
The SVG in question was originally generated by Sketch. I also attempted re-saving it from Illustrator as an SVG. And, then, exporting it from Illustrator as a web-optimized SVG. Same results. I also tried a few different SVG icons in case it was specific to one odd/corrupt file. Below is the actual SVG text of the SVG generated by Sketch:
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg width="21px" height="18px" viewBox="0 0 21 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 3.6.1 (26313) - http://www.bohemiancoding.com/sketch --> <title>icon_checkmark_green</title> <desc>Created with Sketch.</desc> <defs></defs> <g id="Response-States" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="UI-Components" transform="translate(-532.000000, -50.000000)" fill="#5BB55D"> <path d="M538.82094,67.1223958 L532,58.1380208 L535.024379,54.9479167 L538.82094,59.8307292 L550.725412,50 L552.205427,51.4973958 L538.82094,67.1223958 L538.82094,67.1223958 Z" id="icon_checkmark_green"></path> </g> </g> </svg>
have a "presets" folder in the plugin folder where you can move the JSON files. then, when running the plugin, it will give you a dialog to choose from those files (compare color palettes plugin)
it should still be possible to "import" any JSON from anywhere
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.