プレースホルダーコンテンツを使う

CopyDocのコンテンツライブラリには、コンテンツライブラリパネルのPlaceholdersタブからそのままFigmaのテキストレイヤーに適用できるプレースホルダーテキストが多数用意されています。動的なプレースホルダーテキストを独自のテキストスニペットに組み込むこともできます。

動画チュートリアル：Figmaにリアルなプレースホルダーテキストを追加する

この動画では、CopyDocプラグインを使って、Figmaにリアルなプレースホルダーテキストを追加する方法を解説しています。

プレースホルダーコンテンツを直接追加する ​

Placeholdersタブでは、「ダミー」のコンテンツスニペットをさまざまなプレースホルダーのカテゴリから探せます。また、言語を選ぶと、一部のコンテンツ（名前や地名など）をローカライズできます。

プレースホルダー名のボタン（例：「First Name」）をクリックすると、選択したFigmaのテキストレイヤーに適用できます。または、ショートカット名の先頭にスラッシュを2つ付けて（例：//fake.person.firstName）、プレースホルダーのトリガーショートカットをFigmaのテキストレイヤーに直接コピー＆ペースト（または手入力）することもできます。

プレースホルダーのトリガーはCopyDocのほかの機能でも使えます。 テキスト展開スニペットは、Figmaのテキストレイヤーの内容が更新されたときにスニペットを自動的に検出する仕組みです。そのため、CopyDocのほかのテキストレイヤー更新方法（検索と置換、CSV・XLSXの一括インポート、Google Sheetの同期など）でも、プレースホルダーのトリガーショートカットを使えます。更新するコンテンツの一部にトリガー名を入れるだけです（for example, Hello //fake.person.firstName, how it's going?）。

テキストスニペットに動的なプレースホルダーを組み込む ​

保存したスニペットの中でプレースホルダーを使うには、スニペットのテキスト内で、ショートカット名の両側を波かっこで囲みます。

Show Placeholder Shortcutsのトグルをオンにすると、組み込みのプレースホルダーショートカット選択ツールを使えるので、より簡単です。プレースホルダーショートカットを探して、テキストスニペットに自動で追加できます。

スニペットを保存したら、ほかのカスタムテキストスニペットと同じ方法で使えます。テキストレイヤーに適用するか、テキスト展開として使うことができます。

プレースホルダーとカスタムテキストを組み合わせる例 ​

スニペットでプレースホルダーとカスタムテキストを組み合わせる実用的な例を紹介します。

あいさつのテンプレート：

Hello {{fake.person.firstName}}, welcome to our service!

商品説明：

This {{fake.commerce.productAdjective}} {{fake.commerce.product}} is made from {{fake.commerce.productMaterial}} and costs {{fake.commerce.price}}.

UIのテキスト：

{{fake.person.fullName}} joined {{fake.company.name}} as a {{fake.person.jobTitle}} in the {{fake.company.department}} department.

地域に関するコンテンツ：

Visit our store at {{fake.location.streetAddress}}, {{fake.location.city}}, {{fake.location.state}} {{fake.location.zipCode}}.

プレースホルダーを含むスニペットを適用するたびに、コンテンツはランダムに生成されるため、毎回新しいリアルなコンテンツが得られます。似たようなコンポーネントを複数、さまざまなデータで埋めたいときに特に便利です。

プレースホルダーショートカットのリファレンス ​

以下は、すべてのプレースホルダーショートカットの一覧です。ショートカットを二重の波かっこで囲んでカスタムテキストスニペットの一部として使うか、テキストレイヤーの編集中にショートカットの先頭にスラッシュを2つ付けて直接入力できます（例：//fake.person.firstName）。

航空 ​

  • fake.airline.aircraftType（例：Airbus A320）
  • fake.airline.airline（例：Delta Airlines）
  • fake.airline.airplane（例：Boeing 747）
  • fake.airline.airport（例：John F. Kennedy International Airport）
  • fake.airline.flightNumber（例：DL123）
  • fake.airline.recordLocator（例：ABC123）
  • fake.airline.seat（例：21A）

動物 ​

  • fake.animal.bear（例：Grizzly Bear）
  • fake.animal.bird（例：Blue Jay）
  • fake.animal.cat（例：Siamese Cat）
  • fake.animal.cetacean（例：Bottlenose Dolphin）
  • fake.animal.cow（例：Holstein Cow）
  • fake.animal.crocodilia（例：American Alligator）
  • fake.animal.dog（例：Golden Retriever）
  • fake.animal.fish（例：Rainbow Trout）
  • fake.animal.horse（例：Thoroughbred Horse）
  • fake.animal.insect（例：Butterfly）
  • fake.animal.lion（例：African Lion）
  • fake.animal.rabbit（例：Holland Lop）
  • fake.animal.rodent（例：Squirrel）
  • fake.animal.snake（例：Python）
  • fake.animal.type（例：Mammal）

色 ​

  • fake.color.cmyk（例：cmyk(24, 56, 100, 3)）
  • fake.color.hsl（例：hsl(187, 72%, 34%)）
  • fake.color.human（例：DarkGreen）
  • fake.color.hwb（例：hwb(333, 14%, 0%)）
  • fake.color.lab（例：lab(57.54, -70.17, 56.39)）
  • fake.color.lch（例：lch(57.54, 92.94, 146.21)）
  • fake.color.rgb（例：rgb(32, 178, 170)）
  • fake.color.space（例：rgb(255, 99, 71)）

コマース ​

  • fake.commerce.department（例：Electronics）
  • fake.commerce.price（例：$349.99）
  • fake.commerce.product（例：Smartphone）
  • fake.commerce.productAdjective（例：Sleek）
  • fake.commerce.productDescription（例：This smartphone features a high-resolution display and a powerful processor.）
  • fake.commerce.productMaterial（例：Leather）
  • fake.commerce.productName（例：Wireless Headphones）

会社 ​

  • fake.company.name（例：Acme Corporation）
  • fake.company.buzzAdjective（例：Dynamic）
  • fake.company.buzzNoun（例：Solutions）
  • fake.company.buzzPhrase（例：Empowering Success）
  • fake.company.buzzVerb（例：Transform）
  • fake.company.catchPhrase（例：Innovate Your Tomorrow）
  • fake.company.catchPhraseAdjective（例：Revolutionary）
  • fake.company.catchPhraseDescriptor（例：Cutting-edge）
  • fake.company.catchPhraseNoun（例：Solutions）

データベース ​

  • fake.database.collation（例：utf8_general_ci）
  • fake.database.column（例：email）
  • fake.database.engine（例：InnoDB）
  • fake.database.mongodbObjectId（例：5f16bf99ae900e001f8b9bb5）
  • fake.database.type（例：NoSQL）

日付 ​

  • fake.date.anytime（例：Sat Apr 29 2023 01:25:14 GMT+0000 (Coordinated Universal Time)）
  • fake.date.birthdate（例：1995-09-15）
  • fake.date.future（例：2025-06-28）
  • fake.date.month（例：June）
  • fake.date.past（例：2002-03-10）
  • fake.date.recent（例：Sun Jul 09 2023 08:18:43 GMT+0000 (Coordinated Universal Time)）
  • fake.date.soon（例：2023-07-26）
  • fake.date.weekday（例：Tuesday）

金融 ​

  • fake.finance.accountName（例：John Doe）
  • fake.finance.accountNumber（例：98765432）
  • fake.finance.amount（例：$1234.56）
  • fake.finance.bic（例：GENODEF1M04）
  • fake.finance.bitcoinAddress（例：1BvBMSEYstWetqTFn5Au4m4GFg7xJaNVN2）
  • fake.finance.creditCardCVV（例：123）
  • fake.finance.creditCardIssuer（例：Visa）
  • fake.finance.creditCardNumber（例：4929272040382633）
  • fake.finance.currencyCode（例：USD）
  • fake.finance.currencyName（例：Euro）
  • fake.finance.currencySymbol（例：$）
  • fake.finance.ethereumAddress（例：0x742d35Cc6634C0532925a3b844Bc454e4438f44e）
  • fake.finance.iban（例：DE89370400440532013000）
  • fake.finance.litecoinAddress（例：LhWZkm3ZR1vuztrbNnFo4VLrqfUEKGZWEd）
  • fake.finance.maskedNumber（例：************1234）
  • fake.finance.pin（例：1234）
  • fake.finance.routingNumber（例：021000021）
  • fake.finance.transactionDescription（例：Payment for services）
  • fake.finance.transactionType（例：Credit）

Git ​

  • fake.git.branch（例：feature/add-new-feature）
  • fake.git.commitDate（例：2023-07-24T10:15:37）
  • fake.git.commitEntry（例：Merge pull request #42）
  • fake.git.commitMessage（例：Fix issue with authentication）
  • fake.git.commitSha（例：d86fe8f1e64870ecf89b961631f8c63eade26ca0）

ハッカー ​

  • fake.hacker.abbreviation（例：SQL）
  • fake.hacker.adjective（例：cyber）
  • fake.hacker.ingverb（例：hacking）
  • fake.hacker.noun（例：firewall）
  • fake.hacker.phrase（例：Encrypt everything!）
  • fake.hacker.verb（例：hack）

インターネット ​

  • fake.internet.color（例：#ff5733）
  • fake.internet.displayName（例：JohnDoe87）
  • fake.internet.domainName（例：example.com）
  • fake.internet.domainSuffix（例：.net）
  • fake.internet.domainWord（例：web）
  • fake.internet.email（例：[email protected]）
  • fake.internet.emoji（例：😄）
  • fake.internet.exampleEmail（例：[email protected]）
  • fake.internet.httpMethod（例：GET）
  • fake.internet.httpStatusCode（例：200）
  • fake.internet.ip（例：192.168.0.1）
  • fake.internet.ipv4（例：192.0.2.1）
  • fake.internet.ipv6（例：2001:0db8:85a3:0000:0000:8a2e:0370:7334）
  • fake.internet.mac（例：00:1a:2b:3c:4d:5e）
  • fake.internet.password（例：P@ssw0rd123）
  • fake.internet.port（例：8080）
  • fake.internet.protocol（例：https）
  • fake.internet.url（例：https://www.example.com）
  • fake.internet.userAgent（例：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3）
  • fake.internet.userName（例：johndoe123）

所在地 ​

  • fake.location.buildingNumber（例：123）
  • fake.location.cardinalDirection（例：North）
  • fake.location.city（例：New York）
  • fake.location.country（例：United States）
  • fake.location.countryCode（例：US）
  • fake.location.county（例：Los Angeles County）
  • fake.location.direction（例：Southwest）
  • fake.location.latitude（例：40.7128）
  • fake.location.longitude（例：-74.0060）
  • fake.location.nearbyGPSCoordinate（例：40.7128, -74.0060）
  • fake.location.ordinalDirection（例：Northeast）
  • fake.location.secondaryAddress（例：Apt. 2B）
  • fake.location.state（例：California）
  • fake.location.street（例：Main Street）
  • fake.location.streetAddress（例：123 Main Street）
  • fake.location.timeZone（例：America/New_York）
  • fake.location.zipCode（例：10001）

Lorem ​

  • fake.lorem.lines（例：Lorem ipsum dolor sit amet, consectetur adipiscing elit.）
  • fake.lorem.paragraph（例：Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod ligula a dui tincidunt, sit amet euismod metus tristique.）
  • fake.lorem.paragraphs（例：Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod ligula a dui tincidunt, sit amet euismod metus tristique.\n\nPhasellus posuere massa vitae dui iaculis, sit amet tincidunt mauris eleifend. Vivamus vel dolor vel justo posuere egestas nec id nunc.）
  • fake.lorem.sentence（例：Lorem ipsum dolor sit amet.）
  • fake.lorem.sentences（例：Lorem ipsum dolor sit amet. Consectetur adipiscing elit. Sed euismod ligula a dui tincidunt.）
  • fake.lorem.slug（例：lorem-ipsum-dolor）
  • fake.lorem.text（例：Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod ligula a dui tincidunt, sit amet euismod metus tristique. Phasellus posuere massa vitae dui iaculis, sit amet tincidunt mauris eleifend. Vivamus vel dolor vel justo posuere egestas nec id nunc.）
  • fake.lorem.word（例：Lorem）
  • fake.lorem.words（例：Lorem ipsum dolor sit amet）

音楽 ​

  • fake.music.genre（例：Rock）
  • fake.music.songName（例：Bohemian Rhapsody）

数値 ​

  • fake.number.bigInt（例：12345678901234567890）
  • fake.number.binary（例：10101010）
  • fake.number.float（例：3.14）
  • fake.number.hex（例：1a4）
  • fake.number.int（例：42）
  • fake.number.octal（例：52）

人物 ​

  • fake.person.bio（例：software engineer with a passion for technology and coding.）
  • fake.person.firstName（例：John）
  • fake.person.fullName（例：John Doe）
  • fake.person.gender（例：Male）
  • fake.person.jobArea（例：Information Technology）
  • fake.person.jobDescriptor（例：Senior）
  • fake.person.jobTitle（例：Software Engineer）
  • fake.person.jobType（例：Full-Time）
  • fake.person.lastName（例：Doe）
  • fake.person.middleName（例：Michael）
  • fake.person.prefix（例：Mr.）
  • fake.person.sex（例：Male）
  • fake.person.sexType（例：M）
  • fake.person.suffix（例：Jr.）
  • fake.person.zodiacSign（例：Virgo）

電話 ​

  • fake.phone.number（例：+1 (555) 123-4567）
  • fake.phone.imei（例：351756052471134）

文字列 ​

  • fake.string.binary（例：10101100）
  • fake.string.hexadecimal（例：1a4f）
  • fake.string.alpha（例：abcXYZ）
  • fake.string.alphanumeric（例：abcXYZ123）
  • fake.string.nanoid（例：a1B2c3D4）
  • fake.string.numeric（例：123456）
  • fake.string.octal（例：147）
  • fake.string.sample（例：Lorem ipsum dolor sit amet, consectetur adipiscing elit.）
  • fake.string.symbol（例：!@#$%^&*）
  • fake.string.uuid（例：6ba7b810-9dad-11d1-80b4-00c04fd430c8）

システム ​

  • fake.system.commonFileExt（例：txt）
  • fake.system.commonFileName（例：data）
  • fake.system.commonFileType（例：text）
  • fake.system.cron（例：0 * * * *）
  • fake.system.directoryPath（例：/home/user/Documents）
  • fake.system.fileExt（例：js）
  • fake.system.fileName（例：script）
  • fake.system.filePath（例：/home/user/Documents/script.js）
  • fake.system.fileType（例：application/javascript）
  • fake.system.mimeType（例：text/plain）
  • fake.system.networkInterface（例：eth0）
  • fake.system.semver（例：2.1.0）

乗り物 ​

  • fake.vehicle.bicycle（例：Mountain Bike）
  • fake.vehicle.color（例：Red）
  • fake.vehicle.fuel（例：Gasoline）
  • fake.vehicle.manufacturer（例：Toyota）
  • fake.vehicle.model（例：Camry）
  • fake.vehicle.type（例：Sedan）
  • fake.vehicle.vehicle（例：Toyota Camry）
  • fake.vehicle.vin（例：1HGCM82633A123456）
  • fake.vehicle.vrm（例：ABC123）

単語 ​

  • fake.word.adjective（例：beautiful）
  • fake.word.adverb（例：quickly）
  • fake.word.conjunction（例：and）
  • fake.word.interjection（例：wow）
  • fake.word.noun（例：house）
  • fake.word.preposition（例：under）
  • fake.word.words（例：Lorem ipsum）
  • fake.word.sample（例：Lorem ipsum dolor sit amet）
  • fake.word.verb（例：run）