Afbeeldingen, video's, documenten, thema's, typografie en iconen

Alles in deze tabbladen van de bibliotheek kun je met een @-vermelding in een verzoek opnemen. Kies een item om de vermelding te kopiëren en kies dan Aan prompt toevoegen, of typ @ in het invoerveld en kies het uit de lijst. Je kunt ook bestanden naar de bibliotheek slepen om ze toe te voegen, of + onder het vak kiezen en dan Aan bibliotheek toevoegen.

Afbeeldingen

• Je afbeeldingen: kies Importeren, of sleep PNG-, JPEG-, WebP-, GIF-, AVIF- of SVG-bestanden hierheen. Elke afbeelding krijgt een vermelding op basis van de bestandsnaam, zoals @image/storefront.
• Van Unsplash: zoek foto's, filter op vorm of kleur, of kies Shuffle. Als je de vermelding van een foto kopieert, wordt de foto bij je afbeeldingen opgeslagen, zodat de vermelding blijft werken. Bij elke foto wordt de fotograaf vermeld. Overal waar een Unsplash-foto verschijnt (de bibliotheek, het canvas en geëxporteerde apps) staat "Foto door naam op Unsplash", met links naar het Unsplash-profiel van de fotograaf en naar Unsplash.
• Kies een afbeelding om die groot te bekijken. Daar kun je de vermelding kopiëren, de afbeelding aan je verzoek toevoegen, downloaden, of de naam voor vermeldingen en de alt-tekst bewerken. Gebruik Selecteren om er meerdere tegelijk te verwijderen of te exporteren.

Als je een afbeelding vermeldt, geeft Vibr het model de grootte, vorm en alt-tekst door en plaatst het de echte afbeelding in het concept.

Als je een afbeelding toevoegt, verwijdert Vibr de metadata, zoals cameragegevens, locatie en opmerkingen, en laat de afbeelding zelf ongewijzigd. Een SVG behoudt alleen de tekening: scripts, links en alles wat zou kunnen worden uitgevoerd of iets van een andere site zou kunnen laden, worden verwijderd, en kleuren die met stijlen zijn ingesteld, zoals Illustrator en Inkscape ze exporteren, blijven behouden. Unsplash-foto's blijven precies zoals Unsplash ze levert. Afbeeldingen van andere websites laden niet in het canvas: voeg ze toe aan je bibliotheek en noem ze in plaats daarvan.

Video's

• Je video's: kies Importeren, of sleep MP4-, MOV- of WebM-bestanden tot 100 MB hierheen. Elke video krijgt een vermelding op basis van de bestandsnaam, zoals @video/latte-pour, en een posterframe van ongeveer een seconde na het begin.
• Van Pixabay: zoek video's. Als je de vermelding van een video kopieert, wordt de video bij je video's opgeslagen, zodat de vermelding blijft werken. Bij elke Pixabay-video wordt de maker vermeld. Overal waar er een verschijnt (de bibliotheek, het canvas en geëxporteerde apps) staat "Video door naam op Pixabay", met links naar het Pixabay-profiel van de maker en naar Pixabay.
• Kies een video om die af te spelen. Daar kun je de vermelding kopiëren, de video aan je verzoek toevoegen, downloaden, of de naam voor vermeldingen en de beschrijving bewerken. Gebruik Selecteren om er meerdere tegelijk te verwijderen of te exporteren.

Als je een video vermeldt, geeft Vibr het model de grootte, vorm, lengte en beschrijving door en plaatst het de echte video in het concept. Concepten spelen video's zonder geluid en in een lus af, met een poster, en starten ze niet vanzelf voor mensen die op hun apparaat om minder beweging vragen.

Als je een video toevoegt, verwijdert Vibr de metadata van een MP4- of MOV-bestand, zoals de locatie en het apparaat waarmee is gefilmd, en laat beeld en geluid ongewijzigd. Een paar frames gaan door dezelfde controle op je apparaat als afbeeldingen. Pixabay-video's blijven precies zoals Pixabay ze levert.

Geëxporteerde apps nemen je video's mee. Tot 25 MB aan geüploade video past in de losse pagina; daarboven downloadt App (.html) een zip met de pagina en een map videos ernaast.

Documenten

Bewaar hier briefings, onderzoeksnotities en designuitdagingen, en haal er een in elk verzoek bij met de vermelding, zoals @doc/ordering-app-brief.

• Documenten toevoegen: kies Importeren, zet bestanden op de bibliotheek neer, of kies In bibliotheek bewaren in het voorbeeld van een bijgevoegd document. PDF, Word, PowerPoint, Excel, CSV, Markdown en tekst werken, zoals bij Documenten bijvoegen.
• Wat er bewaard wordt: de tekst die Vibr las en maximaal twee afbeeldingen, nooit het bestand zelf, dus er kan later niets uit worden uitgevoerd. Dezelfde controles gelden als bij bijvoegen.
• Gebruiken: een verzoek dat @doc/naam vermeldt, stuurt de tekst en afbeeldingen van dat document mee, zoals een bijlage. Latere verzoeken sturen het alleen opnieuw als ze het vermelden.
• Bekijken, hernoemen en verwijderen met de knoppen bij elk document. Hernoemen verandert de vermelding.

Geëxporteerde bibliotheken en prototypebestanden nemen de documenten mee die ze gebruiken; tekst en afbeeldingen worden bij het importeren opnieuw gecontroleerd.

Thema's

Een thema is een set kleuren, hoekradius, afstanden en schaduwen, met lichte en donkere modi die voldoen aan het WCAG-contrast.

• Nieuw thema opent de editor. Kies een primaire en een neutrale kleur (plus succes, waarschuwing, gevaar en info als je wilt), het contrastniveau (AA of AAA), de hoekradius, de afstandseenheid en de stijl van de schaduwen.
• Tokens importeren haalt W3C-design-tokens-JSON binnen, zoals uit Tokens Studio for Figma of Style Dictionary, of CSS custom properties.
• Elk thema toont of elk kleurpaar aan het contrastniveau voldoet, in beide modi.
• Met het menu ⋯ van een thema kun je het bewerken, dupliceren, de CSS of tokens kopiëren, of het verwijderen.

Vermeld een thema als @theme/default. Concepten die een thema gebruiken, krijgen een knop Donkere modus op het canvas.

Typografie

• Lettertypefamilie importeren voegt een lettertype toe uit WOFF2-, WOFF-, TTF- of OTF-bestanden en maakt er een schaal voor.
• Nieuwe schaal maakt een schaal voor een lettertype dat je al gebruikt, zoals Georgia.
• Een nieuwe schaal heeft zes stijlen: Display, Heading 1 tot 3, Body en Caption. Met Schaal bewerken wijzig je groottes, gewichten, regelhoogtes en spatiëring, of voeg je stijlen toe.

Vermeld een stijl als @type/georgia/h1.

Iconen

• Lucide-iconen zijn ingebouwd. Zoek er een en kies het om de vermelding te kopiëren, zoals @icon/arrow-right. Na het kopiëren kun je het ook als SVG downloaden.
• Iconenlettertype importeren voegt je eigen set toe, met de CSS, een IcoMoon-bestand selection.json of een Fontello-bestand config.json. Een ligatuurlettertype zoals Material Symbols werkt ook los. Geïmporteerde iconen gebruiken @icon/set/name.