Vídeo tutorial: añadir textos de marcador de posición realistas en Figma
Este vídeo muestra cómo añadir textos de marcador de posición realistas en Figma con el plugin CopyDoc.
Añadir contenido de marcador de posición directamente
En la pestaña Placeholders puedes explorar distintas categorías de marcadores de posición con fragmentos de contenido «ficticio», y también seleccionar tu idioma para localizar parte del contenido (por ejemplo, nombres, lugares, etc.).
Puedes hacer clic en el botón con el nombre del marcador de posición (por ejemplo, «First Name») para aplicarlo a las capas de texto de Figma seleccionadas o, si lo prefieres, copiar y pegar (o escribir a mano) el atajo activador de un marcador de posición directamente en tu capa de texto de Figma, anteponiendo dos barras al nombre del atajo (por ejemplo, //fake.person.firstName).
Puedes usar los activadores de marcadores de posición en otras funciones de CopyDoc. La expansión de fragmentos detecta automáticamente el fragmento cuando se actualiza el contenido de una capa de texto de Figma, así que puedes usar los atajos activadores de marcadores de posición con los demás métodos de actualización de capas de texto de CopyDoc (por ejemplo, buscar y reemplazar, importaciones en bloque de CSV/XLSX y la sincronización con Google Sheets). Solo tienes que usar el nombre del activador dentro del contenido actualizado for example, Hello //fake.person.firstName, how it's going?
Combinar marcadores de posición dinámicos en tus fragmentos de texto
Para usar un marcador de posición dentro de un fragmento guardado, escribe el nombre del atajo entre llaves en el texto del fragmento.
Para que sea más fácil, puedes usar el selector integrado de atajos de marcadores de posición activando el interruptor Show Placeholder Shortcuts, que te permite explorar los atajos de marcadores de posición y añadirlos automáticamente a tus fragmentos de texto.
Cuando hayas guardado el fragmento, puedes usarlo como cualquier otro fragmento de texto personalizado: aplicándolo a capas de texto o usándolo como expansión de texto.
Crear ejemplos de contenido combinado personalizado
Estos son algunos ejemplos prácticos de cómo combinar marcadores de posición con texto personalizado en tus fragmentos:
Plantillas de saludo:
Hello {{fake.person.firstName}}, welcome to our service!Descripciones de producto:
This {{fake.commerce.productAdjective}} {{fake.commerce.product}} is made from {{fake.commerce.productMaterial}} and costs {{fake.commerce.price}}.Textos de interfaz de usuario:
{{fake.person.fullName}} joined {{fake.company.name}} as a {{fake.person.jobTitle}} in the {{fake.company.department}} department.Contenido basado en la ubicación:
Visit our store at {{fake.location.streetAddress}}, {{fake.location.city}}, {{fake.location.state}} {{fake.location.zipCode}}.Cada vez que aplicas un fragmento con marcadores de posición, el contenido se genera de forma aleatoria, así que obtienes contenido nuevo y realista en cada uso. Esto es especialmente útil para rellenar varios componentes similares con datos variados.
Referencia de atajos de marcadores de posición
A continuación tienes la lista completa de atajos de marcadores de posición que puedes usar dentro de tus fragmentos de texto personalizados escribiendo el atajo entre dobles llaves, o directamente en una capa de texto mientras la editas anteponiendo dos barras al atajo (por ejemplo, //fake.person.firstName).
Aerolíneas
fake.airline.aircraftType(por ejemplo, "Airbus A320")fake.airline.airline(por ejemplo, "Delta Airlines")fake.airline.airplane(por ejemplo, "Boeing 747")fake.airline.airport(por ejemplo, "John F. Kennedy International Airport")fake.airline.flightNumber(por ejemplo, "DL123")fake.airline.recordLocator(por ejemplo, "ABC123")fake.airline.seat(por ejemplo, "21A")
Animales
fake.animal.bear(por ejemplo, "Grizzly Bear")fake.animal.bird(por ejemplo, "Blue Jay")fake.animal.cat(por ejemplo, "Siamese Cat")fake.animal.cetacean(por ejemplo, "Bottlenose Dolphin")fake.animal.cow(por ejemplo, "Holstein Cow")fake.animal.crocodilia(por ejemplo, "American Alligator")fake.animal.dog(por ejemplo, "Golden Retriever")fake.animal.fish(por ejemplo, "Rainbow Trout")fake.animal.horse(por ejemplo, "Thoroughbred Horse")fake.animal.insect(por ejemplo, "Butterfly")fake.animal.lion(por ejemplo, "African Lion")fake.animal.rabbit(por ejemplo, "Holland Lop")fake.animal.rodent(por ejemplo, "Squirrel")fake.animal.snake(por ejemplo, "Python")fake.animal.type(por ejemplo, "Mammal")
Colores
fake.color.cmyk(por ejemplo, "cmyk(24, 56, 100, 3)")fake.color.hsl(por ejemplo, "hsl(187, 72%, 34%)")fake.color.human(por ejemplo, "DarkGreen")fake.color.hwb(por ejemplo, "hwb(333, 14%, 0%)")fake.color.lab(por ejemplo, "lab(57.54, -70.17, 56.39)")fake.color.lch(por ejemplo, "lch(57.54, 92.94, 146.21)")fake.color.rgb(por ejemplo, "rgb(32, 178, 170)")fake.color.space(por ejemplo, "rgb(255, 99, 71)")
Comercio
fake.commerce.department(por ejemplo, "Electronics")fake.commerce.price(por ejemplo, "$349.99")fake.commerce.product(por ejemplo, "Smartphone")fake.commerce.productAdjective(por ejemplo, "Sleek")fake.commerce.productDescription(por ejemplo, "This smartphone features a high-resolution display and a powerful processor.")fake.commerce.productMaterial(por ejemplo, "Leather")fake.commerce.productName(por ejemplo, "Wireless Headphones")
Empresa
fake.company.name(por ejemplo, "Acme Corporation")fake.company.buzzAdjective(por ejemplo, "Dynamic")fake.company.buzzNoun(por ejemplo, "Solutions")fake.company.buzzPhrase(por ejemplo, "Empowering Success")fake.company.buzzVerb(por ejemplo, "Transform")fake.company.catchPhrase(por ejemplo, "Innovate Your Tomorrow")fake.company.catchPhraseAdjective(por ejemplo, "Revolutionary")fake.company.catchPhraseDescriptor(por ejemplo, "Cutting-edge")fake.company.catchPhraseNoun(por ejemplo, "Solutions")
Base de datos
fake.database.collation(por ejemplo, "utf8_general_ci")fake.database.column(por ejemplo, "email")fake.database.engine(por ejemplo, "InnoDB")fake.database.mongodbObjectId(por ejemplo, "5f16bf99ae900e001f8b9bb5")fake.database.type(por ejemplo, "NoSQL")
Fecha
fake.date.anytime(por ejemplo, "Sat Apr 29 2023 01:25:14 GMT+0000 (Coordinated Universal Time)")fake.date.birthdate(por ejemplo, "1995-09-15")fake.date.future(por ejemplo, "2025-06-28")fake.date.month(por ejemplo, "June")fake.date.past(por ejemplo, "2002-03-10")fake.date.recent(por ejemplo, "Sun Jul 09 2023 08:18:43 GMT+0000 (Coordinated Universal Time)")fake.date.soon(por ejemplo, "2023-07-26")fake.date.weekday(por ejemplo, "Tuesday")
Finanzas
fake.finance.accountName(por ejemplo, "John Doe")fake.finance.accountNumber(por ejemplo, "98765432")fake.finance.amount(por ejemplo, "$1234.56")fake.finance.bic(por ejemplo, "GENODEF1M04")fake.finance.bitcoinAddress(por ejemplo, "1BvBMSEYstWetqTFn5Au4m4GFg7xJaNVN2")fake.finance.creditCardCVV(por ejemplo, "123")fake.finance.creditCardIssuer(por ejemplo, "Visa")fake.finance.creditCardNumber(por ejemplo, "4929272040382633")fake.finance.currencyCode(por ejemplo, "USD")fake.finance.currencyName(por ejemplo, "Euro")fake.finance.currencySymbol(por ejemplo, "$")fake.finance.ethereumAddress(por ejemplo, "0x742d35Cc6634C0532925a3b844Bc454e4438f44e")fake.finance.iban(por ejemplo, "DE89370400440532013000")fake.finance.litecoinAddress(por ejemplo, "LhWZkm3ZR1vuztrbNnFo4VLrqfUEKGZWEd")fake.finance.maskedNumber(por ejemplo, "************1234")fake.finance.pin(por ejemplo, "1234")fake.finance.routingNumber(por ejemplo, "021000021")fake.finance.transactionDescription(por ejemplo, "Payment for services")fake.finance.transactionType(por ejemplo, "Credit")
Git
fake.git.branch(por ejemplo, "feature/add-new-feature")fake.git.commitDate(por ejemplo, "2023-07-24T10:15:37")fake.git.commitEntry(por ejemplo, "Merge pull request #42")fake.git.commitMessage(por ejemplo, "Fix issue with authentication")fake.git.commitSha(por ejemplo, "d86fe8f1e64870ecf89b961631f8c63eade26ca0")
Hacker
fake.hacker.abbreviation(por ejemplo, "SQL")fake.hacker.adjective(por ejemplo, "cyber")fake.hacker.ingverb(por ejemplo, "hacking")fake.hacker.noun(por ejemplo, "firewall")fake.hacker.phrase(por ejemplo, "Encrypt everything!")fake.hacker.verb(por ejemplo, "hack")
Internet
fake.internet.color(por ejemplo, "#ff5733")fake.internet.displayName(por ejemplo, "JohnDoe87")fake.internet.domainName(por ejemplo, "example.com")fake.internet.domainSuffix(por ejemplo, ".net")fake.internet.domainWord(por ejemplo, "web")fake.internet.email(por ejemplo, "[email protected]")fake.internet.emoji(por ejemplo, "😄")fake.internet.exampleEmail(por ejemplo, "[email protected]")fake.internet.httpMethod(por ejemplo, "GET")fake.internet.httpStatusCode(por ejemplo, "200")fake.internet.ip(por ejemplo, "192.168.0.1")fake.internet.ipv4(por ejemplo, "192.0.2.1")fake.internet.ipv6(por ejemplo, "2001:0db8:85a3:0000:0000:8a2e:0370:7334")fake.internet.mac(por ejemplo, "00:1a:2b:3c:4d:5e")fake.internet.password(por ejemplo, "P@ssw0rd123")fake.internet.port(por ejemplo, "8080")fake.internet.protocol(por ejemplo, "https")fake.internet.url(por ejemplo, "https://www.example.com")fake.internet.userAgent(por ejemplo, "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(por ejemplo, "johndoe123")
Ubicación
fake.location.buildingNumber(por ejemplo, "123")fake.location.cardinalDirection(por ejemplo, "North")fake.location.city(por ejemplo, "New York")fake.location.country(por ejemplo, "United States")fake.location.countryCode(por ejemplo, "US")fake.location.county(por ejemplo, "Los Angeles County")fake.location.direction(por ejemplo, "Southwest")fake.location.latitude(por ejemplo, "40.7128")fake.location.longitude(por ejemplo, "-74.0060")fake.location.nearbyGPSCoordinate(por ejemplo, "40.7128, -74.0060")fake.location.ordinalDirection(por ejemplo, "Northeast")fake.location.secondaryAddress(por ejemplo, "Apt. 2B")fake.location.state(por ejemplo, "California")fake.location.street(por ejemplo, "Main Street")fake.location.streetAddress(por ejemplo, "123 Main Street")fake.location.timeZone(por ejemplo, "America/New_York")fake.location.zipCode(por ejemplo, "10001")
Lorem
fake.lorem.lines(por ejemplo, "Lorem ipsum dolor sit amet, consectetur adipiscing elit.")fake.lorem.paragraph(por ejemplo, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod ligula a dui tincidunt, sit amet euismod metus tristique.")fake.lorem.paragraphs(por ejemplo, "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(por ejemplo, "Lorem ipsum dolor sit amet.")fake.lorem.sentences(por ejemplo, "Lorem ipsum dolor sit amet. Consectetur adipiscing elit. Sed euismod ligula a dui tincidunt.")fake.lorem.slug(por ejemplo, "lorem-ipsum-dolor")fake.lorem.text(por ejemplo, "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(por ejemplo, "Lorem")fake.lorem.words(por ejemplo, "Lorem ipsum dolor sit amet")
Música
fake.music.genre(por ejemplo, "Rock")fake.music.songName(por ejemplo, "Bohemian Rhapsody")
Número
fake.number.bigInt(por ejemplo, "12345678901234567890")fake.number.binary(por ejemplo, "10101010")fake.number.float(por ejemplo, "3.14")fake.number.hex(por ejemplo, "1a4")fake.number.int(por ejemplo, "42")fake.number.octal(por ejemplo, "52")
Persona
fake.person.bio(por ejemplo,software engineer with a passion for technology and coding.)fake.person.firstName(por ejemplo, "John")fake.person.fullName(por ejemplo, "John Doe")fake.person.gender(por ejemplo, "Male")fake.person.jobArea(por ejemplo, "Information Technology")fake.person.jobDescriptor(por ejemplo, "Senior")fake.person.jobTitle(por ejemplo, "Software Engineer")fake.person.jobType(por ejemplo, "Full-Time")fake.person.lastName(por ejemplo, "Doe")fake.person.middleName(por ejemplo, "Michael")fake.person.prefix(por ejemplo, "Mr.")fake.person.sex(por ejemplo, "Male")fake.person.sexType(por ejemplo, "M")fake.person.suffix(por ejemplo, "Jr.")fake.person.zodiacSign(por ejemplo, "Virgo")
Teléfono
fake.phone.number(por ejemplo, "+1 (555) 123-4567")fake.phone.imei(por ejemplo, "351756052471134")
Cadena
fake.string.binary(por ejemplo, "10101100")fake.string.hexadecimal(por ejemplo, "1a4f")fake.string.alpha(por ejemplo, "abcXYZ")fake.string.alphanumeric(por ejemplo, "abcXYZ123")fake.string.nanoid(por ejemplo, "a1B2c3D4")fake.string.numeric(por ejemplo, "123456")fake.string.octal(por ejemplo, "147")fake.string.sample(por ejemplo, "Lorem ipsum dolor sit amet, consectetur adipiscing elit.")fake.string.symbol(por ejemplo, "!@#$%^&*")fake.string.uuid(por ejemplo, "6ba7b810-9dad-11d1-80b4-00c04fd430c8")
Sistema
fake.system.commonFileExt(por ejemplo, "txt")fake.system.commonFileName(por ejemplo, "data")fake.system.commonFileType(por ejemplo, "text")fake.system.cron(por ejemplo, "0 * * * *")fake.system.directoryPath(por ejemplo, "/home/user/Documents")fake.system.fileExt(por ejemplo, "js")fake.system.fileName(por ejemplo, "script")fake.system.filePath(por ejemplo, "/home/user/Documents/script.js")fake.system.fileType(por ejemplo, "application/javascript")fake.system.mimeType(por ejemplo, "text/plain")fake.system.networkInterface(por ejemplo, "eth0")fake.system.semver(por ejemplo, "2.1.0")
Vehículo
fake.vehicle.bicycle(por ejemplo, "Mountain Bike")fake.vehicle.color(por ejemplo, "Red")fake.vehicle.fuel(por ejemplo, "Gasoline")fake.vehicle.manufacturer(por ejemplo, "Toyota")fake.vehicle.model(por ejemplo, "Camry")fake.vehicle.type(por ejemplo, "Sedan")fake.vehicle.vehicle(por ejemplo, "Toyota Camry")fake.vehicle.vin(por ejemplo, "1HGCM82633A123456")fake.vehicle.vrm(por ejemplo, "ABC123")
Palabra
fake.word.adjective(por ejemplo, "beautiful")fake.word.adverb(por ejemplo, "quickly")fake.word.conjunction(por ejemplo, "and")fake.word.interjection(por ejemplo, "wow")fake.word.noun(por ejemplo, "house")fake.word.preposition(por ejemplo, "under")fake.word.words(por ejemplo, "Lorem ipsum")fake.word.sample(por ejemplo, "Lorem ipsum dolor sit amet")fake.word.verb(por ejemplo, "run")