Vídeo tutorial: adicionar textos de placeholder realistas no Figma
Este vídeo mostra como adicionar textos de placeholder realistas no Figma com o plugin CopyDoc.
Adicionar conteúdo de placeholder diretamente
Na aba Placeholders, você pode navegar por diferentes categorias de trechos de conteúdo “fictício” e também selecionar o seu idioma para localizar parte do conteúdo (por exemplo, nomes, lugares etc.).
Você pode clicar no botão com o nome do placeholder (por exemplo, “First Name”) para aplicá-lo às camadas de texto selecionadas no Figma. Outra opção é copiar e colar (ou digitar manualmente) o atalho de gatilho de um placeholder direto na camada de texto do Figma, colocando duas barras antes do nome do atalho (por exemplo, //fake.person.firstName)
Você pode usar os gatilhos de placeholder em outros recursos do CopyDoc. O expansor de texto funciona detectando automaticamente o trecho quando o conteúdo de uma camada de texto do Figma é atualizado. Por isso, você pode usar os atalhos de gatilho dos placeholders com os outros métodos de atualização de camadas de texto do CopyDoc (por exemplo, localizar e substituir, importações em massa de CSV/XLSX e sincronização com o Google Sheets). Basta usar o nome do gatilho como parte do conteúdo atualizado for example, Hello //fake.person.firstName, how it's going?
Misturar placeholders dinâmicos nos seus trechos de texto
Para usar um placeholder dentro de um trecho salvo, coloque o nome do atalho entre chaves no texto do trecho.
Para facilitar, você pode usar o seletor de atalhos de placeholder integrado ativando a opção Show Placeholder Shortcuts, que permite navegar pelos atalhos de placeholder e adicioná-los automaticamente aos seus trechos de texto.
Depois de salvar o trecho, você pode usá-lo normalmente, da mesma forma que aplica qualquer outro trecho de texto personalizado: aplicando-o às camadas de texto ou usando-o como expansor de texto.
Criar exemplos personalizados de conteúdo misto
Veja alguns exemplos práticos de como misturar placeholders com texto personalizado nos seus trechos:
Modelos de saudação:
Hello {{fake.person.firstName}}, welcome to our service!Descrições de produtos:
This {{fake.commerce.productAdjective}} {{fake.commerce.product}} is made from {{fake.commerce.productMaterial}} and costs {{fake.commerce.price}}.Textos de interface:
{{fake.person.fullName}} joined {{fake.company.name}} as a {{fake.person.jobTitle}} in the {{fake.company.department}} department.Conteúdo baseado em localização:
Visit our store at {{fake.location.streetAddress}}, {{fake.location.city}}, {{fake.location.state}} {{fake.location.zipCode}}.Cada vez que você aplica um trecho com placeholders, o conteúdo é gerado aleatoriamente, o que traz um conteúdo novo e realista a cada uso. Isso é especialmente útil para preencher vários componentes parecidos com dados variados.
Referência dos atalhos de placeholder
Abaixo está a lista completa de todos os atalhos de placeholder. Você pode usá-los nos seus trechos de texto personalizados, colocando o atalho entre chaves duplas, ou direto em uma camada de texto enquanto a edita, colocando duas barras antes do atalho (por exemplo, //fake.person.firstName)
Companhias aéreas
fake.airline.aircraftType(por exemplo, "Airbus A320")fake.airline.airline(por exemplo, "Delta Airlines")fake.airline.airplane(por exemplo, "Boeing 747")fake.airline.airport(por exemplo, "John F. Kennedy International Airport")fake.airline.flightNumber(por exemplo, "DL123")fake.airline.recordLocator(por exemplo, "ABC123")fake.airline.seat(por exemplo, "21A")
Animais
fake.animal.bear(por exemplo, "Grizzly Bear")fake.animal.bird(por exemplo, "Blue Jay")fake.animal.cat(por exemplo, "Siamese Cat")fake.animal.cetacean(por exemplo, "Bottlenose Dolphin")fake.animal.cow(por exemplo, "Holstein Cow")fake.animal.crocodilia(por exemplo, "American Alligator")fake.animal.dog(por exemplo, "Golden Retriever")fake.animal.fish(por exemplo, "Rainbow Trout")fake.animal.horse(por exemplo, "Thoroughbred Horse")fake.animal.insect(por exemplo, "Butterfly")fake.animal.lion(por exemplo, "African Lion")fake.animal.rabbit(por exemplo, "Holland Lop")fake.animal.rodent(por exemplo, "Squirrel")fake.animal.snake(por exemplo, "Python")fake.animal.type(por exemplo, "Mammal")
Cores
fake.color.cmyk(por exemplo, "cmyk(24, 56, 100, 3)")fake.color.hsl(por exemplo, "hsl(187, 72%, 34%)")fake.color.human(por exemplo, "DarkGreen")fake.color.hwb(por exemplo, "hwb(333, 14%, 0%)")fake.color.lab(por exemplo, "lab(57.54, -70.17, 56.39)")fake.color.lch(por exemplo, "lch(57.54, 92.94, 146.21)")fake.color.rgb(por exemplo, "rgb(32, 178, 170)")fake.color.space(por exemplo, "rgb(255, 99, 71)")
Comércio
fake.commerce.department(por exemplo, "Electronics")fake.commerce.price(por exemplo, "$349.99")fake.commerce.product(por exemplo, "Smartphone")fake.commerce.productAdjective(por exemplo, "Sleek")fake.commerce.productDescription(por exemplo, "This smartphone features a high-resolution display and a powerful processor.")fake.commerce.productMaterial(por exemplo, "Leather")fake.commerce.productName(por exemplo, "Wireless Headphones")
Empresa
fake.company.name(por exemplo, "Acme Corporation")fake.company.buzzAdjective(por exemplo, "Dynamic")fake.company.buzzNoun(por exemplo, "Solutions")fake.company.buzzPhrase(por exemplo, "Empowering Success")fake.company.buzzVerb(por exemplo, "Transform")fake.company.catchPhrase(por exemplo, "Innovate Your Tomorrow")fake.company.catchPhraseAdjective(por exemplo, "Revolutionary")fake.company.catchPhraseDescriptor(por exemplo, "Cutting-edge")fake.company.catchPhraseNoun(por exemplo, "Solutions")
Banco de dados
fake.database.collation(por exemplo, "utf8_general_ci")fake.database.column(por exemplo, "email")fake.database.engine(por exemplo, "InnoDB")fake.database.mongodbObjectId(por exemplo, "5f16bf99ae900e001f8b9bb5")fake.database.type(por exemplo, "NoSQL")
Data
fake.date.anytime(por exemplo, "Sat Apr 29 2023 01:25:14 GMT+0000 (Coordinated Universal Time)")fake.date.birthdate(por exemplo, "1995-09-15")fake.date.future(por exemplo, "2025-06-28")fake.date.month(por exemplo, "June")fake.date.past(por exemplo, "2002-03-10")fake.date.recent(por exemplo, "Sun Jul 09 2023 08:18:43 GMT+0000 (Coordinated Universal Time)")fake.date.soon(por exemplo, "2023-07-26")fake.date.weekday(por exemplo, "Tuesday")
Finanças
fake.finance.accountName(por exemplo, "John Doe")fake.finance.accountNumber(por exemplo, "98765432")fake.finance.amount(por exemplo, "$1234.56")fake.finance.bic(por exemplo, "GENODEF1M04")fake.finance.bitcoinAddress(por exemplo, "1BvBMSEYstWetqTFn5Au4m4GFg7xJaNVN2")fake.finance.creditCardCVV(por exemplo, "123")fake.finance.creditCardIssuer(por exemplo, "Visa")fake.finance.creditCardNumber(por exemplo, "4929272040382633")fake.finance.currencyCode(por exemplo, "USD")fake.finance.currencyName(por exemplo, "Euro")fake.finance.currencySymbol(por exemplo, "$")fake.finance.ethereumAddress(por exemplo, "0x742d35Cc6634C0532925a3b844Bc454e4438f44e")fake.finance.iban(por exemplo, "DE89370400440532013000")fake.finance.litecoinAddress(por exemplo, "LhWZkm3ZR1vuztrbNnFo4VLrqfUEKGZWEd")fake.finance.maskedNumber(por exemplo, "************1234")fake.finance.pin(por exemplo, "1234")fake.finance.routingNumber(por exemplo, "021000021")fake.finance.transactionDescription(por exemplo, "Payment for services")fake.finance.transactionType(por exemplo, "Credit")
Git
fake.git.branch(por exemplo, "feature/add-new-feature")fake.git.commitDate(por exemplo, "2023-07-24T10:15:37")fake.git.commitEntry(por exemplo, "Merge pull request #42")fake.git.commitMessage(por exemplo, "Fix issue with authentication")fake.git.commitSha(por exemplo, "d86fe8f1e64870ecf89b961631f8c63eade26ca0")
Hacker
fake.hacker.abbreviation(por exemplo, "SQL")fake.hacker.adjective(por exemplo, "cyber")fake.hacker.ingverb(por exemplo, "hacking")fake.hacker.noun(por exemplo, "firewall")fake.hacker.phrase(por exemplo, "Encrypt everything!")fake.hacker.verb(por exemplo, "hack")
Internet
fake.internet.color(por exemplo, "#ff5733")fake.internet.displayName(por exemplo, "JohnDoe87")fake.internet.domainName(por exemplo, "example.com")fake.internet.domainSuffix(por exemplo, ".net")fake.internet.domainWord(por exemplo, "web")fake.internet.email(por exemplo, "[email protected]")fake.internet.emoji(por exemplo, "😄")fake.internet.exampleEmail(por exemplo, "[email protected]")fake.internet.httpMethod(por exemplo, "GET")fake.internet.httpStatusCode(por exemplo, "200")fake.internet.ip(por exemplo, "192.168.0.1")fake.internet.ipv4(por exemplo, "192.0.2.1")fake.internet.ipv6(por exemplo, "2001:0db8:85a3:0000:0000:8a2e:0370:7334")fake.internet.mac(por exemplo, "00:1a:2b:3c:4d:5e")fake.internet.password(por exemplo, "P@ssw0rd123")fake.internet.port(por exemplo, "8080")fake.internet.protocol(por exemplo, "https")fake.internet.url(por exemplo, "https://www.example.com")fake.internet.userAgent(por exemplo, "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 exemplo, "johndoe123")
Localização
fake.location.buildingNumber(por exemplo, "123")fake.location.cardinalDirection(por exemplo, "North")fake.location.city(por exemplo, "New York")fake.location.country(por exemplo, "United States")fake.location.countryCode(por exemplo, "US")fake.location.county(por exemplo, "Los Angeles County")fake.location.direction(por exemplo, "Southwest")fake.location.latitude(por exemplo, "40.7128")fake.location.longitude(por exemplo, "-74.0060")fake.location.nearbyGPSCoordinate(por exemplo, "40.7128, -74.0060")fake.location.ordinalDirection(por exemplo, "Northeast")fake.location.secondaryAddress(por exemplo, "Apt. 2B")fake.location.state(por exemplo, "California")fake.location.street(por exemplo, "Main Street")fake.location.streetAddress(por exemplo, "123 Main Street")fake.location.timeZone(por exemplo, "America/New_York")fake.location.zipCode(por exemplo, "10001")
Lorem
fake.lorem.lines(por exemplo, "Lorem ipsum dolor sit amet, consectetur adipiscing elit.")fake.lorem.paragraph(por exemplo, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod ligula a dui tincidunt, sit amet euismod metus tristique.")fake.lorem.paragraphs(por exemplo, "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 exemplo, "Lorem ipsum dolor sit amet.")fake.lorem.sentences(por exemplo, "Lorem ipsum dolor sit amet. Consectetur adipiscing elit. Sed euismod ligula a dui tincidunt.")fake.lorem.slug(por exemplo, "lorem-ipsum-dolor")fake.lorem.text(por exemplo, "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 exemplo, "Lorem")fake.lorem.words(por exemplo, "Lorem ipsum dolor sit amet")
Música
fake.music.genre(por exemplo, "Rock")fake.music.songName(por exemplo, "Bohemian Rhapsody")
Número
fake.number.bigInt(por exemplo, "12345678901234567890")fake.number.binary(por exemplo, "10101010")fake.number.float(por exemplo, "3.14")fake.number.hex(por exemplo, "1a4")fake.number.int(por exemplo, "42")fake.number.octal(por exemplo, "52")
Pessoa
fake.person.bio(por exemplo, “engenheiro de software apaixonado por tecnologia e programação.”)fake.person.firstName(por exemplo, "John")fake.person.fullName(por exemplo, "John Doe")fake.person.gender(por exemplo, "Male")fake.person.jobArea(por exemplo, "Information Technology")fake.person.jobDescriptor(por exemplo, "Senior")fake.person.jobTitle(por exemplo, "Software Engineer")fake.person.jobType(por exemplo, "Full-Time")fake.person.lastName(por exemplo, "Doe")fake.person.middleName(por exemplo, "Michael")fake.person.prefix(por exemplo, "Mr.")fake.person.sex(por exemplo, "Male")fake.person.sexType(por exemplo, "M")fake.person.suffix(por exemplo, "Jr.")fake.person.zodiacSign(por exemplo, "Virgo")
Telefone
fake.phone.number(por exemplo, "+1 (555) 123-4567")fake.phone.imei(por exemplo, "351756052471134")
String
fake.string.binary(por exemplo, "10101100")fake.string.hexadecimal(por exemplo, "1a4f")fake.string.alpha(por exemplo, "abcXYZ")fake.string.alphanumeric(por exemplo, "abcXYZ123")fake.string.nanoid(por exemplo, "a1B2c3D4")fake.string.numeric(por exemplo, "123456")fake.string.octal(por exemplo, "147")fake.string.sample(por exemplo, "Lorem ipsum dolor sit amet, consectetur adipiscing elit.")fake.string.symbol(por exemplo, "!@#$%^&*")fake.string.uuid(por exemplo, "6ba7b810-9dad-11d1-80b4-00c04fd430c8")
Sistema
fake.system.commonFileExt(por exemplo, "txt")fake.system.commonFileName(por exemplo, "data")fake.system.commonFileType(por exemplo, "text")fake.system.cron(por exemplo, "0 * * * *")fake.system.directoryPath(por exemplo, "/home/user/Documents")fake.system.fileExt(por exemplo, "js")fake.system.fileName(por exemplo, "script")fake.system.filePath(por exemplo, "/home/user/Documents/script.js")fake.system.fileType(por exemplo, "application/javascript")fake.system.mimeType(por exemplo, "text/plain")fake.system.networkInterface(por exemplo, "eth0")fake.system.semver(por exemplo, "2.1.0")
Veículo
fake.vehicle.bicycle(por exemplo, "Mountain Bike")fake.vehicle.color(por exemplo, "Red")fake.vehicle.fuel(por exemplo, "Gasoline")fake.vehicle.manufacturer(por exemplo, "Toyota")fake.vehicle.model(por exemplo, "Camry")fake.vehicle.type(por exemplo, "Sedan")fake.vehicle.vehicle(por exemplo, "Toyota Camry")fake.vehicle.vin(por exemplo, "1HGCM82633A123456")fake.vehicle.vrm(por exemplo, "ABC123")
Palavra
fake.word.adjective(por exemplo, "beautiful")fake.word.adverb(por exemplo, "quickly")fake.word.conjunction(por exemplo, "and")fake.word.interjection(por exemplo, "wow")fake.word.noun(por exemplo, "house")fake.word.preposition(por exemplo, "under")fake.word.words(por exemplo, "Lorem ipsum")fake.word.sample(por exemplo, "Lorem ipsum dolor sit amet")fake.word.verb(por exemplo, "run")