12 Essentiële gratis schets-plugins
Terwijl Sketch 44 de bèta afsluit, kijken we naar een van de beste functies van Sketch: de enorme selectie van opensource-plug-ins.
De Sketch-community is enorm ondersteunend en je kunt tonnen verbazingwekkende plug-ins vinden die je workflow radicaal zullen verbeteren. In deze post behandel ik de 12 beste Sketch-plug-ins die elke ontwerper zou moeten hebben.
1. Schetsmaatregel
Schets maatregel helpt ontwerpers hun werk te organiseren en te schetsen voor ontwikkelaars, projectmanagers en andere teamleden.
Maar dit is ook ongelooflijk nuttig voor eenzame wolven die al hun projecten ontwerpen en coderen. Met de Measure-plugin kunt u elementen weergeven die specifieke breedte / hoogte-dimensies tonen om de juiste metingen in één oogopslag te krijgen.
Dit omvat alle pagina-elementen zoals knoppen, tekst, pictogrammen en zelfs belangrijke delen van het tekengebied.
Met Sketch Measure kunt u zelfs pagina's exporteren naar HTML / CSS met paginastijlen in-tact. Toegegeven, er zijn Adobe-hulpmiddelen dat kan dit ook. Maar met al deze functionaliteit in Sketch maakt je werk zoveel gemakkelijker.
2. InVision Craft
Een tijdje geleden kondigde het InVision-team een nieuwe plug-in aan Ambacht . Maar dit is meer een reeks plug-ins waar je heel veel extra functies en snelkoppelingen krijgt.
Een voorbeeld is de Data-plugin waarmee ontwerpers tekst / gegevens rechtstreeks uit openbare API's op internet kunnen halen. Op deze manier kunt u uw app automatisch vullen met echte inhoud en afbeeldingen.
InVision-ontwikkelaars werken Craft voortdurend bij met nieuwe plugin-functies om dit nog waardevoller te maken voor ontwerpers. En heb ik al gezegd dat dit helemaal gratis is?
Tot nu toe heeft Craft 6 belangrijke plugin-functies, die allemaal de moeite waard zijn om toe te voegen aan je ontwerpworkflow.
- Freehand - realtime samenwerking in Sketch
- Prototype - dynamische high-fidelity prototyping
- Synchroniseren - Directe synchronisatie tussen InVision-prototypen en Sketch
- Gegevens - haal echte gegevens van internet naar uw Sketch-mockup
- Bibliotheek - ontwerp assets in de cloud die met uw hele team kunnen worden gedeeld
- Duplicaat - bliksemsnelle UI-klonen
Bekijk de Ambachtelijke startpagina en zie wat je denkt. Als je het eenmaal hebt geprobeerd, wil je nooit meer terug.
3. Sketch Toolbox
Elke Sketch-gebruiker moet op de hoogte zijn van de Sketch Toolbox . Het is een uitstekende plugin-manager die het installeren en aanpassen van uw plug-ins een stuk eenvoudiger maakt.
Met deze Toolbox kunt u door honderden Sketch-plug-ins bladeren en kiezen welke u wilt installeren. U klikt gewoon op wat u wilt en het wordt automatisch naar uw computer gedownload, klaar voor gebruik.
En de Sketch Toolbox past plug-ins automatisch bij om ze soepel te laten werken.
Technisch gezien is dit nog steeds in bèta en ontvangt het altijd nieuwe updates op GitHub . Maar ik denk dat het solide genoeg is om te gebruiken in een productieworkflow. Sterker nog, ik zou beweren dat een goede Sketch-workflow niet compleet zou zijn zonder deze ongelooflijke plugin-manager.
4. Activa exporteren
Een van de meest gedetailleerde taken van een ontwerper is het toewijzen van bronnen en deze te delen met ontwikkelaars. Alle kleine pictogrammen, afbeeldingen, achtergrondpatronen, deze moeten allemaal worden geëxporteerd (meestal met de hand).
De Activa voor het importeren van items maakt dit proces een fluitje van een cent. Merk op dat deze plug speciaal is gemaakt voor mobiele apps waarbij ontwerpers Android / iOS-interfaceactiva moeten exporteren. Dit omvat netvliesactiva voor @ 2x en @ 3x schermformaten.
Ik heb geen functies gezien die te maken hebben met webontwerp van het netvlies, maar u kunt het Sketch Exporter plugin ook. Het is momenteel in bèta en het is bedoeld als een verbeterde versie van het origineel.
5. Content Generator
De Craft-plug-in die ik eerder noemde, biedt het genereren van inhoud. Maar misschien wilt u iets eenvoudiger dan dit Content Generator door Timur Carpeev.
Hiermee kunt u automatisch meerdere Sketch-elementen tegelijk vullen met gerelateerde gegevens, zoals:
- Gebruikersavatars
- Voor- en achternaam
- Dummy paragraaf tekst
- Aangepaste tekenreeksen (geo's, prijzen, CC-kaartnummers, enzovoort)
Alle inhoud wordt getrokken uit open source databases zoals Unsplash en Uinames dus je kunt dit op meerdere projecten gebruiken, commercieel of anderszins.
6. Looper
Photoshop heeft een eigen deelvenster Handelingen, waar u herhaalde acties kunt automatiseren. Sketch heeft geen paneel zoals dit, maar het heeft de Looper-plugin dat is helemaal gratis en super gemakkelijk om te leren.
Dit is vooral handig voor het maken van herhalende patronen die de hele pagina overnemen. Grafisch ontwerpers kunnen meer gebruik van deze plug-in vinden dan webontwerpers, maar het kan veel tijd besparen door herhaalde scaling / duplicatietaken.
Neem een kijkje op de Startpagina van Looper om te zien wat het kan doen. Het is misschien niet voor iedereen nuttig, maar voor degenen die het kunnen gebruiken, zult u merken dat u veel tijd bespaart.
7. Schets Iconfont
Webontwerpers houden van pictogramlettertypen . Geweldige pictogrammen maken UI-ontwerp een stuk eenvoudiger en lettertypebestanden zijn over het algemeen kleiner dan afbeeldingen.
De Schets Iconfont plug-in is een complete managementsuite voor het opslaan, sorteren en ophalen van pictogramlettertypen in Sketch. Standaard wordt de plug-in leeg, dus u moet de pictogramlettertypen lokaal downloaden om ze te kunnen gebruiken.
Maar dit geeft u volledige toegang tot het werken met pictogramlettertypen die u online vindt. Er is eigenlijk een bundelpakket voor lettertypen speciaal gemaakt voor deze plug-in als u snel uw map iconfont wilt vullen. En u kunt altijd naar internet zoeken voor meer informatie over de tijd.
Ik raad absoluut aan om een kopie van deze plug-in te grijpen. Icoonlettertypen zijn er om te blijven en ze zijn van onschatbare waarde voor moderne websites.
8. Stijlvoorraad
Wanneer u een nieuw Sketch-bestand start, moet u ofwel de stijlen helemaal opnieuw maken, of u moet stijlen kopiëren en plakken van de vorige mockups.
Met de Style Inventory plugin je kunt al dit extra werk omzeilen. Slechts een paar klikken importeert al uw vorige stijlen rechtstreeks in uw nieuwe Sketch-document voor eenvoudige toegang.
Deze stijlen omvatten kleuren, tekststijlen en symbolen, samen met laagstijlen voor bepaalde elementen.
Deze plug-in wordt zelden bijgewerkt, maar ik raad het aan om vergelijkbare mockups samen te voegen. Je zou ook de Sketch Palettes-plugin voor het opslaan en importeren van kleurenschema's.
9. Pixel Perfecter
Elke digitale ontwerper is trots op pixel-perfecte mockups. Deze taak is niet moeilijk, maar het vereist wel dat elk ontwerpelement perfect in lijn is met het raster en geen overlappingen of onvolkomenheden vertoont.
Als je je werk wilt controleren voordat je het exporteert, kun je het uitvoeren Pixel Perfecter . Deze zeer kleine plug-in controleert al uw bestandsitems om te zien of er pixels overlopen op de traditionele X / Y-coördinaatposities die onvolmaakte pixels creëren.
Merk op dat deze offset-pixelwaarden niet automatisch worden gecorrigeerd. Het zal alleen de laag (lagen) vinden die problemen veroorzaken en ze markeren, zodat u deze zelf kunt inslaan en repareren. Toch bespaart het veel tijd om elke laag handmatig te controleren.
10. Dynamische knop
De originele plug-in voor dynamische knoppen was in 2015 enigszins verlaten, maar de nieuwere Dynamische knop plugin is nog beter en compatibel met Sketch 3.5+.
Het voegt automatisch vulling- en knopstijlen toe aan elke tekstlaag die u maakt en de opvulling is dynamisch, dus wordt deze ongeacht de tekstgrootte bijgewerkt. Dit is enorm nuttig voor UI-ontwerpers die voortdurend wijzigingen aanbrengen in hun testmodellen.
Dit kan ook worden gebruikt voor mobiele apps waarbij knoppen over het algemeen een vaste grootte / verhouding hebben. Het is niet de meest glamoureuze Sketch-plugin, maar het doet zijn taak goed.
11. Compo
Als je een knopgenerator wilt, samen met wat extra functies dan de Compo-plugin is het testen waard.
Compo's maker kreeg het idee na een tijdje de plug-in Dynamic Button te hebben gebruikt, en wilde uiteindelijk iets sneller zijn. Compo genereert automatisch de juiste knopgrootte en tekstgrootte om aan uw exacte specificaties te voldoen. Eén klik en je hebt een werkende Sketch-component die automatisch wordt gepositioneerd en gepositioneerd.
Als u een knop maakt en de tekst wijzigt, is dit normaal gesproken alleen van invloed op de tekstlaag. Dus de onderliggende knop is te klein. Compo past de grootte van de knop en de tekst automatisch aan alsof ze één element zijn.
Je kunt tonnen demo's vinden op de GitHub-repo samen met enkele gebruikershandleidingen om aan de slag te gaan.
12. CSSketch
Last but zeker not least is het CSSketch inpluggen. Dit is vooral handig voor combinaties van ontwerper + ontwikkelaar die directe toegang tot CSS-code willen voor alle stijlen die ze maken.
Elke pagina die u ontwerpt, kan via deze plug-in worden uitgevoerd om een volledige stylesheet te exporteren met alle activa waarvoor een account is aangelegd. Maar omdat dit geautomatiseerd is, kunt u geen A + + -kwaliteitscode verwachten.
Ik geef nog steeds de voorkeur om mijn CSS met de hand te coderen, maar deze plug-in biedt tenminste een startpunt voor niet-technische ontwerpers of ontwikkelaars die een beetje tijd willen besparen.
