10 gratis schets-plugins voor webontwikkelaars

Schets krijgt veel grip bij webontwerpers en -ontwikkelaars. Dit komt waarschijnlijk omdat het is intuïtief, gemakkelijk te leren en wordt geleverd met veel functies die het een stuk eenvoudiger maken om een website-prototype te maken. Het kan ook zijn dat deze applicatie uitbreidbaar is, dat wil zeggen dat u eenvoudig nieuwe functies aan de toepassing kunt toevoegen met behulp van plug-ins.

Hier zijn 10 plug-ins die u kunnen helpen uw productiviteit te verhogen bij het werken met Sketch. Er zijn diverse, variërend van inhoudsgeneratoren, kleurenpalet selector, en ze kunnen u helpen om laagmetingen weer te geven of automatisch padding aan een laag toe te voegen.

1. CSS Buddy

CSS Buddy kunt u de CSS toevoegen aan uw laag in de Sketch-werkruimte. In principe kunt u de breedte, hoogte, dekking, vakschaduw, rand en achtergrond van de laag toepassen met behulp van CSS.

Met deze plug-in geïnstalleerd, selecteert u gewoon een laag en selecteert u Toepassen op geselecteerd uit het plugin-menu. Een dialoogvenster zal u vragen om uw stylesheet in te voeren. Voeg de CSS-inhoud zonder de CSS-klasse toe en zie hoe uw laag vorm krijgt.

2. Materiaalontwerp Kleurenpalet

Als u de trend van Material Design volgt, is het opvallende kenmerk dat u onderscheidende kleuren gebruikt. Material Design heeft een geweldig kleurenpalet. Nu kunt u dat naar uw werkruimte brengen met Materiaalontwerp Kleurpalet Plugin.

Deze plug-in genereert binnen enkele seconden kleurenpaletten zonder dat u uw werkruimte hoeft te sluiten. Kies Tint, Waarde of Staal om een kleurenpalet te genereren dat geschikt is voor uw project.

3. Schetsnotitieboekje

Soms moeten we laten zien wat we doen in een opmerking of via documentatie. Als je werkt aan projecten met andere ontwerpers of de betrokkenheid van een klant, is dit ook nodig, zodat je kunt zorgen dat de uitkomst is waar iedereen naar streefde.

Schetsnotitieboekje is een plug-in voor het eenvoudig documenteren van uw ontwerp in Sketch. Het voegt een extra zijbalk toe aan uw werkruimte, die opmerkingen bevat die u toevoegt aan elk element in uw ontwerp. U kunt de volgorde van reacties aanpassen, opnieuw uitlijnen, verwijderen en de zichtbaarheid van opmerkingen aanpassen.

4. Dag speler

Voordat we echte afbeeldingen in een ontwerp gebruiken, gebruiken we vaak tijdelijke afbeeldingen om het ontwerpproces te versnellen. Voor Sketch kun je gebruiken Dag speler om aangepaste tijdelijke aanduidingen toe te voegen aan elke laag in uw Sketch-werkruimte van 6 placeholder-beeldservices, waaronder Placehold.it, LoremPixel en Unsplash. Eenmaal geactiveerd, kunt u de breedte, hoogte en andere informatie van de afbeelding instellen.

5. Content Generator

We hebben al een plug-in om placeholder-afbeeldingen in te voegen, wat dacht je van een voor algemene inhoud? Content Generator helpt u dummy-gegevens toe te voegen, zoals avatars, namen, geolocatiegegevens en meer. Werkt uitstekend voor mockupontwerpen en voor het verminderen van hoofdpijn om te proberen te achterhalen hoe gegevens ter plekke kunnen worden gegenereerd.

Als u de dummygegevens wilt toevoegen, selecteert u gewoon een laag en selecteert u vervolgens Plugin> Generator, en kies Geo, Persona of foto's.

6. Schetsmaat

Schets maatregel is een meetinstrument voor Sketch. Het meet de lengte of de grootte van een laag (of lagen) in uw ontwerp. Je krijgt ook de opvulling en marge van een laag en de afstand tussen twee lagen. Sketch Measure kan ook de laageigenschappen afdrukken, zoals kleur, rand en dekking. Alle metingen kunnen worden verhoogd via sneltoetsen.

7. Dynamische knop

Dynamische knop helpt u gemakkelijk een knop met vaste paddings te maken. Het past de opvulling automatisch aan op basis van de waarde die u geeft, ongeacht de lengte van uw tekst. Met de plug-in geïnstalleerd, kan een tekst worden geconverteerd naar een structuur met de sneltoets Command + J. De vereiste hoeveelheid opvulling kan vervolgens worden geponst in de (0: 0: 0: 0) tekstlaag (onder flexknopgroep).

8. Typografische schaal

Typografische schaal is een plug-in om de geselecteerde tekstlaag in typografische schaal te veranderen. Als u deze plug-in wilt gebruiken, selecteert u een tekstlaag (één of meerdere) of een gemengde laag met ten minste één tekstlaag en selecteert u vervolgens Plugin> Typografische schaal en pas de waarde in het dialoogvenster aan. Het resultaat is een reeks geschaalde tekst die de regels van de typografische schaal volgt.

9. Modulizer

Met Modulizer je kunt de padding voor de knop, module of gebieden in je ontwerp regelen met de sneltoets Shift + Command + M. Je kunt al je lagen combineren, groeperen en vervolgens de snelkoppeling gebruiken om je padding automatisch aan te passen op basis van de opvullingswaarde die je nodig hebt . Bekijk de videodemo om dit in actie te zien.

10. Mes

Heb je er ooit over nagedacht om je ontwerp te converteren van schets naar HTML? Als dat zo is, zou je waarschijnlijk moeten krijgen Blad, een Sketch-plugin die automatisch HTML-bestanden genereert vanuit uw ontwerp. Het zal de groep omzetten in div, tekst in p enzovoorts.

Wanneer u Blade gebruikt, kunt u de plug-in vertellen welk DOM-element moet worden gegenereerd door een speciale naam aan de laag toe te voegen, zoals [btn] of [tekst], zodat Blade weet wat het moet doen. Bekijk deze videodemo voor een inside-look.

Nu lezen: 12 nuttige plug-ins voor WordPress-ontwikkelaars