Tutoriel vidéo : ajouter des textes provisoires réalistes dans Figma

Cette vidéo montre comment ajouter des textes provisoires réalistes dans Figma avec le plugin CopyDoc.

Ajouter directement des contenus provisoires

Dans l’onglet Placeholders, vous pouvez parcourir différentes catégories d’extraits de contenu « fictif » et choisir votre langue pour localiser une partie du contenu (par exemple, les noms, les lieux, etc.).

Cliquez sur le bouton portant le nom du contenu provisoire (par exemple, « First Name ») pour l’appliquer au(x) calque(s) de texte Figma sélectionné(s). Vous pouvez aussi copier-coller (ou saisir) directement dans votre calque de texte Figma le raccourci déclencheur d’un contenu provisoire, en le faisant précéder de deux barres obliques (par exemple, //fake.person.firstName)

Vous pouvez utiliser vos déclencheurs de contenus provisoires dans d’autres fonctionnalités de CopyDoc. L’expansion de texte détecte automatiquement l’extrait chaque fois que le contenu d’un calque de texte Figma est mis à jour : vous pouvez donc utiliser vos raccourcis de contenus provisoires avec les autres méthodes de mise à jour des calques de texte de CopyDoc (par exemple, rechercher et remplacer, les imports CSV/XLSX en masse et la synchronisation Google Sheets). Il suffit d’inclure le nom du déclencheur dans votre contenu mis à jour for example, Hello //fake.person.firstName, how it's going?

Intégrer des contenus provisoires dynamiques dans vos extraits de texte

Pour utiliser un contenu provisoire dans un extrait enregistré, entourez le nom du raccourci d’accolades dans le texte de votre extrait.

Pour vous faciliter la tâche, activez l’option Show Placeholder Shortcuts : ce sélecteur intégré vous permet de parcourir les raccourcis de contenus provisoires et de les ajouter automatiquement à vos extraits de texte.

Une fois l’extrait enregistré, utilisez-le comme n’importe quel autre extrait de texte personnalisé : en l’appliquant aux calques de texte ou en l’utilisant comme expansion de texte.

Exemples de contenus mixtes personnalisés

Voici quelques exemples pratiques qui associent contenus provisoires et texte personnalisé dans vos extraits :

Modèles de salutation :

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

Descriptions de produits :

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

Textes d’interface :

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

Contenu basé sur un lieu :

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

Chaque fois que vous appliquez un extrait contenant des contenus provisoires, le contenu est généré aléatoirement : vous obtenez un contenu réaliste et différent à chaque utilisation. C’est particulièrement utile pour remplir plusieurs composants similaires avec des données variées.

Référence des raccourcis de contenus provisoires

Voici la liste complète des raccourcis de contenus provisoires. Vous pouvez les utiliser dans vos extraits de texte personnalisés en plaçant le raccourci entre doubles accolades, ou directement dans un calque de texte pendant sa modification en faisant précéder le raccourci de deux barres obliques (par exemple, //fake.person.firstName)

Compagnies aériennes

• fake.airline.aircraftType (par exemple, "Airbus A320")
• fake.airline.airline (par exemple, "Delta Airlines")
• fake.airline.airplane (par exemple, "Boeing 747")
• fake.airline.airport (par exemple, "John F. Kennedy International Airport")
• fake.airline.flightNumber (par exemple, "DL123")
• fake.airline.recordLocator (par exemple, "ABC123")
• fake.airline.seat (par exemple, "21A")

Animaux

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

Couleurs

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

Commerce

• fake.commerce.department (par exemple, "Electronics")
• fake.commerce.price (par exemple, "$349.99")
• fake.commerce.product (par exemple, "Smartphone")
• fake.commerce.productAdjective (par exemple, "Sleek")
• fake.commerce.productDescription (par exemple, "This smartphone features a high-resolution display and a powerful processor.")
• fake.commerce.productMaterial (par exemple, "Leather")
• fake.commerce.productName (par exemple, "Wireless Headphones")

Entreprise

• fake.company.name (par exemple, "Acme Corporation")
• fake.company.buzzAdjective (par exemple, "Dynamic")
• fake.company.buzzNoun (par exemple, "Solutions")
• fake.company.buzzPhrase (par exemple, "Empowering Success")
• fake.company.buzzVerb (par exemple, "Transform")
• fake.company.catchPhrase (par exemple, "Innovate Your Tomorrow")
• fake.company.catchPhraseAdjective (par exemple, "Revolutionary")
• fake.company.catchPhraseDescriptor (par exemple, "Cutting-edge")
• fake.company.catchPhraseNoun (par exemple, "Solutions")

Base de données

• fake.database.collation (par exemple, "utf8_general_ci")
• fake.database.column (par exemple, "email")
• fake.database.engine (par exemple, "InnoDB")
• fake.database.mongodbObjectId (par exemple, "5f16bf99ae900e001f8b9bb5")
• fake.database.type (par exemple, "NoSQL")

Date

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

Finance

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

Git

• fake.git.branch (par exemple, "feature/add-new-feature")
• fake.git.commitDate (par exemple, "2023-07-24T10:15:37")
• fake.git.commitEntry (par exemple, "Merge pull request #42")
• fake.git.commitMessage (par exemple, "Fix issue with authentication")
• fake.git.commitSha (par exemple, "d86fe8f1e64870ecf89b961631f8c63eade26ca0")

Hacker

• fake.hacker.abbreviation (par exemple, "SQL")
• fake.hacker.adjective (par exemple, "cyber")
• fake.hacker.ingverb (par exemple, "hacking")
• fake.hacker.noun (par exemple, "firewall")
• fake.hacker.phrase (par exemple, "Encrypt everything!")
• fake.hacker.verb (par exemple, "hack")

Internet

• fake.internet.color (par exemple, "#ff5733")
• fake.internet.displayName (par exemple, "JohnDoe87")
• fake.internet.domainName (par exemple, "example.com")
• fake.internet.domainSuffix (par exemple, ".net")
• fake.internet.domainWord (par exemple, "web")
• fake.internet.email (par exemple, "[email protected]")
• fake.internet.emoji (par exemple, "😄")
• fake.internet.exampleEmail (par exemple, "[email protected]")
• fake.internet.httpMethod (par exemple, "GET")
• fake.internet.httpStatusCode (par exemple, "200")
• fake.internet.ip (par exemple, "192.168.0.1")
• fake.internet.ipv4 (par exemple, "192.0.2.1")
• fake.internet.ipv6 (par exemple, "2001:0db8:85a3:0000:0000:8a2e:0370:7334")
• fake.internet.mac (par exemple, "00:1a:2b:3c:4d:5e")
• fake.internet.password (par exemple, "P@ssw0rd123")
• fake.internet.port (par exemple, "8080")
• fake.internet.protocol (par exemple, "https")
• fake.internet.url (par exemple, "https://www.example.com")
• fake.internet.userAgent (par exemple, "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 (par exemple, "johndoe123")

Lieu

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

Lorem

• fake.lorem.lines (par exemple, "Lorem ipsum dolor sit amet, consectetur adipiscing elit.")
• fake.lorem.paragraph (par exemple, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod ligula a dui tincidunt, sit amet euismod metus tristique.")
• fake.lorem.paragraphs (par exemple, "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 (par exemple, "Lorem ipsum dolor sit amet.")
• fake.lorem.sentences (par exemple, "Lorem ipsum dolor sit amet. Consectetur adipiscing elit. Sed euismod ligula a dui tincidunt.")
• fake.lorem.slug (par exemple, "lorem-ipsum-dolor")
• fake.lorem.text (par exemple, "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 (par exemple, "Lorem")
• fake.lorem.words (par exemple, "Lorem ipsum dolor sit amet")

Musique

• fake.music.genre (par exemple, "Rock")
• fake.music.songName (par exemple, "Bohemian Rhapsody")

Nombre

• fake.number.bigInt (par exemple, "12345678901234567890")
• fake.number.binary (par exemple, "10101010")
• fake.number.float (par exemple, "3.14")
• fake.number.hex (par exemple, "1a4")
• fake.number.int (par exemple, "42")
• fake.number.octal (par exemple, "52")

Personne

• fake.person.bio (par exemple, « ingénieur logiciel passionné de technologie et de code. »)
• fake.person.firstName (par exemple, "John")
• fake.person.fullName (par exemple, "John Doe")
• fake.person.gender (par exemple, "Male")
• fake.person.jobArea (par exemple, "Information Technology")
• fake.person.jobDescriptor (par exemple, "Senior")
• fake.person.jobTitle (par exemple, "Software Engineer")
• fake.person.jobType (par exemple, "Full-Time")
• fake.person.lastName (par exemple, "Doe")
• fake.person.middleName (par exemple, "Michael")
• fake.person.prefix (par exemple, "Mr.")
• fake.person.sex (par exemple, "Male")
• fake.person.sexType (par exemple, "M")
• fake.person.suffix (par exemple, "Jr.")
• fake.person.zodiacSign (par exemple, "Virgo")

Téléphone

• fake.phone.number (par exemple, "+1 (555) 123-4567")
• fake.phone.imei (par exemple, "351756052471134")

Chaîne

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

Système

• fake.system.commonFileExt (par exemple, "txt")
• fake.system.commonFileName (par exemple, "data")
• fake.system.commonFileType (par exemple, "text")
• fake.system.cron (par exemple, "0 * * * *")
• fake.system.directoryPath (par exemple, "/home/user/Documents")
• fake.system.fileExt (par exemple, "js")
• fake.system.fileName (par exemple, "script")
• fake.system.filePath (par exemple, "/home/user/Documents/script.js")
• fake.system.fileType (par exemple, "application/javascript")
• fake.system.mimeType (par exemple, "text/plain")
• fake.system.networkInterface (par exemple, "eth0")
• fake.system.semver (par exemple, "2.1.0")

Véhicule

• fake.vehicle.bicycle (par exemple, "Mountain Bike")
• fake.vehicle.color (par exemple, "Red")
• fake.vehicle.fuel (par exemple, "Gasoline")
• fake.vehicle.manufacturer (par exemple, "Toyota")
• fake.vehicle.model (par exemple, "Camry")
• fake.vehicle.type (par exemple, "Sedan")
• fake.vehicle.vehicle (par exemple, "Toyota Camry")
• fake.vehicle.vin (par exemple, "1HGCM82633A123456")
• fake.vehicle.vrm (par exemple, "ABC123")

Mot

• fake.word.adjective (par exemple, "beautiful")
• fake.word.adverb (par exemple, "quickly")
• fake.word.conjunction (par exemple, "and")
• fake.word.interjection (par exemple, "wow")
• fake.word.noun (par exemple, "house")
• fake.word.preposition (par exemple, "under")
• fake.word.words (par exemple, "Lorem ipsum")
• fake.word.sample (par exemple, "Lorem ipsum dolor sit amet")
• fake.word.verb (par exemple, "run")