another-data-populator

Another Data PopulatorA Figma plugin that populates your designs with JSON.

How it works1. Create a Layer Group that contains at least one Text Layer. In the Text Layer content, use placeholders for you data fields in double curly brackets – such as {{firstname}} or {{lastname}}. The plugin will replace all these placeholders with respective data. _Please note that if your Text Layer is called {{name}} (in the Layer List), the content of the Layer will always be overwritten with the data contained in {{name}}. So if you use multiple {{placeholders}} in a Text Layer, you should rename your Layer to something without curly brackets._2. In the same Layer Group, create a Shape Layer (this is your image placeholder). Give the Shape Layer a placeholder name in double curly brackets – such as {{image}}. The plugin will replace this placeholder with respective image data (PNG or JPG).

3. For JSON arrays, create a Layer Group with a placeholder name like {{items}}. That group must contain one child Group Layer with the name {{template}}. This is the group that will be cloned and populated with the JSON array data. This works recursively with nested data. The array placeholder can have an optional limit filter {{items | limit 5}}, which will limit the number of {{template}} clones.

Available CommandsPopulate with Dummy JSONThe plugin includes presets from https://dummyjson.com/ including:- Products- Carts- Recipes- Users- Posts- Comments- Todos- QuotesPopulate with Imported JSONYou can also upload any JSON file from your machine.

FiltersBy appending your {{placeholder}} with one of the following available filters, separated by a |, you can use certain operations on your populated strings.

1. Maximum charactersYou can set the maximum number of characters of your {{placeholder}} by appending it with | max n, 'n' representing the desired number of characters.{{name | max 3}}2. DateDisplay {{placeholder}} in MM/DD/YYYY format.{{dateTimeString | date}}Conditional ActionsA Conditional Action performs a certain action on a Layer Group or Component based on data and a conditional expression. The Conditional Action is controlled by the name of the Layer Group (or Component).

1. #show[condition]shows layer if true and hides otherwise2. #hide[condition]hides layer if true and shows otherwise2. #duplicate[condition]duplicate layer n times3. #variant[condition, component property]set component property based on conditionExamples#show[{{firstname}}.length > 3]shows layer if {{firstname}} has more than 3 characters and hides otherwise#show[{{firstname}} == "Peter"]shows layer if {{firstname}} is 'Peter' and hides otherwise#duplicate[{{rating}}]duplicates the layer by the value of {{rating}}#variant[{{completed}}, Value Type = Checked]sets the component property "Value Type" to "Checked" if {{completed}} is trueYou can combine several conditions:#show[{{firstname}}.includes('e') || {{firstname}}.length > 3]shows layer if {{firstname}} includes 'e' or has more than 3 characters, hides otherwiseOr several Conditional Actions:#variant[{{completed}}, Value Type = Checked] #variant[{{completed}}, State = Completed]sets the component properties "Value Type" to "Checked" and "State" to "Completed" if {{completed}} is truePure JavaScript syntax is being used for Conditional Actions, so you can basically use anything available in JavaScript.