Hoe maak je een Frosted Glass-effect in Figma

Matglas werkt goed voor privacy of voor het toevoegen van subtiliteit aan een ontwerp, in echte en digitale ontwerpen. Het creëren van een matglaseffect is eenvoudig in Figma en kan een unieke flair aan uw ontwerpen toevoegen op een manier die er veel complexer uitziet dan het is. Laten we u laten zien hoe.

Een matglaseffect creëren

Voor het volledige effect van mat glas zou je al een soort achtergrondafbeelding in je ontwerp moeten hebben. Het effect werkt het beste bovenop fotografische of visueel complexe afbeeldingen, in plaats van alleen effen kleurblokken of effen achtergronden.

We gebruiken het matglaseffect als opsommingsteken op een presentatieontwerp, om een ​​strak, minimalistisch effect aan de presentatie toe te voegen. Dit geeft wat extra flair aan uw ontwerpen in plaats van alleen een simpele lijn of gewoon opsommingsteken als indicator te gebruiken.

U kunt een maken hoofdsjabloon voor presentaties in Figma en gebruik er dit matglas-effect in. Als u een slanke indicator voor opsommingstekens wilt maken, volgt u gewoon.

1. Teken een lijn

Trek je lijn met behulp van de Lijngereedschap (L). Houd ingedrukt om de lijn horizontaal te houden Verschuiving tijdens het tekenen. Kies een kleur voor de lijn door op het gekleurde vierkantje onder te klikken Hartinfarct terwijl de lijn is geselecteerd.

De kleur moet donker genoeg zijn om je achtergrond te contrasteren, maar hij moet ook goed passen bij de kleuren van je presentatie. Jij kan gebruik Adobe Illustrator om een ​​kleurenpalet te maken om kleuren te vinden die bij elkaar passen.

Wijzig de breedte van de lijn in de Beroerte-instellingen; klik op het pictogram met drie horizontale lijnen en verhoog het aantal tot de gewenste dikte. Om afgeronde uiteinden te krijgen, klikt u op de vervolgkeuzelijst met een horizontale lijn in het menu Beroerte en scrolt u naar de onderkant van het vervolgkeuzemenu voor de optie voor afgeronde uiteinden.

2. Teken een cirkel

Teken een kleine cirkel met de Ellips-tool (O). Houd ingedrukt Verschuiving terwijl je de cirkel tekent om deze perfect bolvormig te maken. Je cirkel moet klein genoeg zijn om als opsommingsteken te worden gebruikt, maar groot genoeg om het matglas duidelijk te maken.

Om kleur toe te voegen, selecteer de cirkel en gebruik Vullen op de rechter werkbalk. U kunt een neutrale kleur gebruiken, zoals grijs of beige, of een lichtere kleur uit het kleurenpalet van uw ontwerp.

Verander dan de ondoorzichtigheid naast Vullen ergens tussen de 40% en 70%. Je wilt het ontwerp achter de cirkel kunnen zien terwijl je nog steeds de kleur ziet waarmee je de cirkel hebt gevuld.

3. Een achtergrondvervaging toevoegen

Dit is het deel dat het matte effect aan je vorm geeft. Selecteer de cirkel en ga naar Effecten. Het standaardeffect is slagschaduw, plaats de muisaanwijzer erop en klik op de pijl die verschijnt. Kiezen Achtergrondvervaging.

Om de vervaging te vergroten of te verkleinen, klikt u op het pictogram naast Achtergrondvervaging en wijzigt u het nummer in het gewenste vervagingseffect.

Om uw opsommingsteken te voltooien, verplaatst u de lijn zodat deze op één lijn ligt met de rand van uw cirkel. Selecteer zowel de lijn als de cirkel, klik met de rechtermuisknop en selecteer Groepsselectie. Nu kunt u dit verplaatsen of dupliceren voor gebruik op verschillende delen van uw ontwerp.

De vervaging werkt op dezelfde manier over elk deel van het ontwerp, zoals weergegeven in een ander voorbeeld dat we hierboven hebben gedaan. Waarom deze techniek niet opnemen in? een creatieve ontwerpuitdaging? Het effect wordt een geweldige ontwerpaanwinst.

Voeg strak minimalisme toe aan uw ontwerpen met een matglaseffect

Het matglaseffect in Figma is een eenvoudige manier om wat strakke stijl toe te voegen aan anders eenvoudige ontwerpaspecten. U kunt het effect van matglas op veel manieren gebruiken, zoals panelen in kleur, zoekbalken of privacyvensters over ontwerpen. Probeer een rand toe te voegen, een verloop te maken of de matte laag tussen andere lagen te plaatsen voor wat textuurverschil.

Mockups maken en toevoegen aan uw Figma-ontwerpen met behulp van plug-ins

Lees volgende