Back to Plugins
Placeholdate

Placeholdate

<p>Quickly generate placeholder dates for your mockups, and format those dates however you want. This plugin relies heavily on the basic formatting features from <a href="https://day.js.org/docs/en/display/format" rel="noreferrer noopener nofollow ugc" target="_blank">day.js</a>.</p><p><br></p><p>There are plenty of plugins out there that help populate your design with placeholder data. None of them provide flexibility with dates. This plugin was created to fill this gap.</p><p><br></p><p>At this time, Placeholdate does not support locales or advanced formatting. If this is a feature you need, please submit a <a href="https://github.com/ngblaylock/figma-placeholdate/issues" rel="noreferrer noopener nofollow ugc" target="_blank">GitHub Issue</a> explaining your use case and the expected output.</p><p><br></p><h2>Examples</h2><p>If you are unfamiliar with day.js, you can try out these examples by pasting the format in the Date Format field in the plugin UI. These examples assume that the randomly selected date is set to "2022-04-25T22:16:35-06:00".</p><p><br></p><ul><li><code>YYYY-MM-DD</code> = 2022-04-25</li><li><code>MM/DD/YYYY</code> = 04/25/2022</li><li><code>M/D/YY</code> = 4/25/22</li><li><code>MMM D, YYYY</code> = Apr 25, 2022</li><li><code>MMMM D, YYYY</code> = April 25, 2022</li><li><code>dddd MMMM D, YYYY</code> = Monday April 25, 2022</li><li><code>hh:mm a</code> = 10:16 pm</li><li><code>hh:mm:ss A</code> = 10:16:35 PM</li><li><code>[Meeting:] MMM D @ hh:mm A</code> = Meeting: Apr 25 @ 10:16 PM</li></ul><p><br></p><p>Many more combinations can be found on the <a href="https://day.js.org/docs/en/display/format" rel="noreferrer noopener nofollow ugc" target="_blank">day.js documentation</a>.</p><p><br></p><h2>Features</h2><ul><li>Select multiple text layers to generate multiple random dates.</li><li>Format dates according to your needs. The default is <code>YYYY-MM-DD</code> when the plugin is first opened.</li><li>Select a date range to start and end the random generation. The default is two years before and after the day the plugin is first opened.</li><li>Sort the generated dates in random order, ascending order, or descending order. <strong>NOTE:</strong> due to some Figma limitations, the order is set by when the text node was created. It will not sort on layer position or x/y position on the page.</li><li>Placeholdate will remember your last used format and options when you re-open the plugin.</li></ul><p><br></p><h2>Be Aware of the Following</h2><ul><li>Make sure to select text layers for this to work. Selecting a frame or group will not insert dates into child text layers.</li><li>Make sure that the starting date option is before the ending date. It will tell you if it is not the case.</li><li>Typing out the year in the start or end date field <em>can</em> accept more than 4 digits, but it will produce unexpected results. Just don't do it.</li></ul>

contentyearplaceholderdatefakelorem ipsummockmonthweekgeneratetime

Plugin Preview

Placeholdate preview

About this plugin

Quickly generate placeholder dates for your mockups, and format those dates however you want. This plugin relies heavily on the basic formatting features from day.js.


There are plenty of plugins out there that help populate your design with placeholder data. None of them provide flexibility with dates. This plugin was created to fill this gap.


At this time, Placeholdate does not support locales or advanced formatting. If this is a feature you need, please submit a GitHub Issue explaining your use case and the expected output.


Examples

If you are unfamiliar with day.js, you can try out these examples by pasting the format in the Date Format field in the plugin UI. These examples assume that the randomly selected date is set to "2022-04-25T22:16:35-06:00".


  • YYYY-MM-DD = 2022-04-25
  • MM/DD/YYYY = 04/25/2022
  • M/D/YY = 4/25/22
  • MMM D, YYYY = Apr 25, 2022
  • MMMM D, YYYY = April 25, 2022
  • dddd MMMM D, YYYY = Monday April 25, 2022
  • hh:mm a = 10:16 pm
  • hh:mm:ss A = 10:16:35 PM
  • [Meeting:] MMM D @ hh:mm A = Meeting: Apr 25 @ 10:16 PM


Many more combinations can be found on the day.js documentation.


Features

  • Select multiple text layers to generate multiple random dates.
  • Format dates according to your needs. The default is YYYY-MM-DD when the plugin is first opened.
  • Select a date range to start and end the random generation. The default is two years before and after the day the plugin is first opened.
  • Sort the generated dates in random order, ascending order, or descending order. NOTE: due to some Figma limitations, the order is set by when the text node was created. It will not sort on layer position or x/y position on the page.
  • Placeholdate will remember your last used format and options when you re-open the plugin.


Be Aware of the Following

  • Make sure to select text layers for this to work. Selecting a frame or group will not insert dates into child text layers.
  • Make sure that the starting date option is before the ending date. It will tell you if it is not the case.
  • Typing out the year in the start or end date field can accept more than 4 digits, but it will produce unexpected results. Just don't do it.

Plugin Details

Version1
CreatedApril 20, 2022
Last UpdatedApril 26, 2022
Categorydevice-mockups
CreatorNathan Blaylock
Stats529 installs, 18 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:code.js
  • Editor Types:
    figma