Inhoud
- 01. Hulplijnen voor kopiëren en plakken
- 02. Schetsreiniger
- 03. Anima
- 04. Reageer Sketch.app
- 05. Git Sketch-plug-in
- 06. ImageOptim
- 07. Magische spiegel
- 08. Exporteer meer
- 11. Marketch
- 12. Gesegmenteerde cirkels
- 13. Schetsloper
- 14. Icoon lettertype
- 15. Zoek en vervang
Sketch-plug-ins helpen Sketch nog beter te maken. Sketch is voor velen de favoriete UI-webontwerptool, en een deel van wat zo goed is, is de gemeenschap van mensen die eraan werken om de functionaliteit en functies uit te breiden door aangepaste plug-ins te bouwen.
Het beheer van uw Sketch-plug-ins is nu eenvoudiger dan ooit. Plug-ins worden automatisch bijgewerkt en verouderde zijn uitgeschakeld. Het ecosysteem van de plug-in nog nuttiger maken is Sketch Cloud, een service voor het delen van bestanden waarvoor iedereen zich kan aanmelden, waar u Sketch-documenten die openbaar zijn gedeeld of privé rechtstreeks vanuit Sketch kunt bekijken, downloaden en becommentariëren.
Laten we dus eens kijken naar de beste Sketch-plug-ins die er zijn - degenen die de manier waarop u gebruikersinterfaces ontwerpt drastisch kunnen veranderen. Zodra u er een heeft gezien die u leuk vindt, leest u hoe u Sketch-plug-ins installeert. Als u van uw webtools houdt, mag u onze favoriete webontwerptools, websitebouwer en cloudopslag-razzia's niet missen. En vergeet niet dat uw keuze voor een webhostingprovider cruciaal is voor het succes van uw site (onze gids helpt u hierbij).
01. Hulplijnen voor kopiëren en plakken
- Download hier
- Prijs: Vrij
- Samenvatting: Kopieer, plak of verwijder hulplijnen van uw tekengebieden
Elke ontwerper heeft een haat-liefdeverhouding met gidsen. Soms zijn ze absoluut essentieel, en de rest van de tijd zitten ze je gewoon in de weg. Als u hulplijnen gebruikt in plaats van de lay-outoptie van Sketch, kan het een nachtmerrie zijn om deze voor meerdere tekengebieden te wijzigen, maar met deze plug-in is het gemakkelijk om hulplijnen van al uw tekengebieden te kopiëren, plakken en verwijderen.
02. Schetsreiniger
- Download hier
- Prijs: $2
- Samenvatting: Maak uw ontwerpbestanden zo schoon als een fluitje
Elk Sketch-ontwerp dat een paar iteraties heeft doorgemaakt, zal onderweg ongetwijfeld een beetje rommel oppikken, zoals verborgen lagen, inconsistente randposities en ongebruikte laagstijlen.
Hoewel het niet het einde van de wereld is om een rommelig schetsbestand te hebben, kan het de overdracht nadelig beïnvloeden en het zal het leven gemakkelijker maken voor iedereen die het later moet begrijpen. In plaats van alles met de hand te doorlopen, kunt u Sketch Cleaner gebruiken om alle veelvoorkomende problemen automatisch op te lossen.
03. Anima
- Download hier
- Prijs: Gratis naar boven
- Samenvatting: Creëer responsieve, betrouwbare prototypes
Voorheen beschikbaar als afzonderlijke gratis plug-ins - Auto Layout en Launchpad - is Anima nu een alles-in-één plug-in die is ontworpen om u te helpen responsieve lay-outs te maken met pinnen, stapels en opvulling, en high-fidelity prototypes die op alle schermen passen. Er is nog steeds een gratis versie die één project ondersteunt; voor onbeperkte projecten begint de prijs bij $ 25 per maand.
04. Reageer Sketch.app
- Download hier
- Prijs: Vrij
- Samenvatting: Render Reageer componenten op Sketch
Het beheren van ontwerpmiddelen kan in Sketch moeilijk zijn. Deze handige Sketch-plug-in biedt een eenvoudigere, betrouwbaardere manier om uw middelen te beheren. Implementeer uw ontwerpen in code als React-componenten en gebruik deze plug-in om ze in schets om te zetten. Het maakt het ook gemakkelijker om echte gegevens op te halen en in uw Sketch-bestanden te implementeren.
React Sketch.app is ontwikkeld door Airbnb voor gebruik met zijn ontwerpsysteem, met als doel de kloof tussen ontwerpers en ontwikkelaars te helpen overbruggen.
05. Git Sketch-plug-in
- Download hier
- Prijs: Vrij
- Samenvatting: Een Git-client ingebouwd in Sketch
Deze plug-in is bedoeld om versiebeheer in Sketch te brengen. Het werkt door een afbeelding voor elk onderdeel van het ontwerp te exporteren en vervolgens mooie verschillen te genereren, zodat het duidelijk is welke wijzigingen zijn aangebracht. Door elke stap van het ontwerpproces te documenteren, kan iedereen in het team zien hoe het ontwerp is gevorderd.
Git Sketch Plugin is gemaakt door Mathieu Dutour, die sindsdien is overgestapt op het creëren van een uitgebreider, betaald versiebeheersysteem genaamd Kactus.
06. ImageOptim
- Download hier
- Prijs: Vrij
- Samenvatting: Beeldoptimalisatie in Sketch
Hoewel Sketch zijn eigen oplossing biedt voor het optimaliseren van SVG-bestanden, zijn er geen opties voor het comprimeren van JPG- en PNG-afbeeldingen. Aangezien ImageOptim al een aantal jaren een solide service biedt, is het logisch dat het deze functionaliteit naar Sketch zou brengen.
Elke ontwerper die laadtijden en beeldoptimalisatie belangrijk vindt (en dat zouden alle ontwerpers moeten zijn), zou ImageOptim aan zijn toolbox moeten toevoegen. Houd er rekening mee dat u naast de plug-in de kern-app ImageOptim (gratis) op uw macOS-systeem moet hebben geïnstalleerd en dat u lagen nog steeds als exporteerbaar moet markeren in Sketch (ga naar ‘Alle activa exporteren en optimaliseren 'om te beginnen).
07. Magische spiegel
- Download hier
- Prijs: Vanaf $ 4 / mnd
- Samenvatting: Transformatie-tool voor beeldperspectief
Als je indrukwekkende productmodellen probeert te maken, maar steeds in Photoshop moet springen om met de lastige dingen om te gaan, kan Magic Mirror je leven redden. Het is een transformatiehulpmiddel voor beeldperspectief, waarmee u perspectiefmodellen en andere vervormde effecten kunt maken zonder Sketch ooit te verlaten.
08. Exporteer meer
- Download hier
- Prijs: Vrij
- Samenvatting: Genereert automatisch plaatsaanduidingen voor afbeeldingen
Het toevoegen van plaatsaanduidingen aan een ontwerp is een noodzakelijk onderdeel van prototyping, maar het vinden van de daadwerkelijke afbeeldingen kan lastig zijn. Dus in plaats van er tijd aan te verspillen, laat het allemaal over aan Day Player. Hierdoor kunt u aangepaste plaatsaanduidingsafbeeldingen aan elk Sketch-document toevoegen vanuit een aantal verschillende plaatsaanduidingsafbeeldingsservices, dus de grootste beslissing die u moet nemen, is of u Bill Murray, Nicolas Cage of kittens wilt gebruiken.
11. Marketch
- Download hier
- Prijs: Vrij
- Samenvatting: Genereer een html-pagina die CSS-stijlen kan meten en ophalen
Als u CSS-stijlen uit uw Sketch-ontwerpen wilt halen, is een plug-in zoals Marketch absoluut essentieel. Hiermee kunt u uw Sketch-tekengebieden exporteren als een zip-bestand vol HTML-documenten die u vervolgens kunt extraheren om veel zoete CSS te verwijderen, klaar voor gebruik.
12. Gesegmenteerde cirkels
- Download hier
- Prijs: Vrij
- Samenvatting: Maak nauwkeurige ronde afbeeldingen
Hier is een snelle manier om gesegmenteerde cirkels te maken voor grafieken en diagrammen. Deze plug-in kan verschillende stijlen van cirkelvormige diagrammen produceren, waaronder cirkels met streepjes en vinkjes, en de diktes worden beheerd via een eenvoudige lijst met door komma's gescheiden waarden.
13. Schetsloper
- Download hier
- Prijs: Vrij
- Samenvatting: Spotlight voor zoeken
Sketch is geliefd vanwege zijn minimalistische toetsenbordworkflow. Dat gezegd hebbende, er zijn altijd twee of drie sneltoetsen die je altijd lijkt te vergeten of te verwarren met een andere ontwerp-app zoals Photoshop - en laten we de minder gebruikelijke tools en functies niet vergeten die geen sneltoets hebben en diep in de Schetsmenu.
Sketch Runner lost deze problemen op en doet dit op een manier die macOS-gebruikers kennen - Sketch Runner is de macOS Spotlight, maar dan voor Sketch.
14. Icoon lettertype
- Download hier
- Prijs: Vrij
- Samenvatting: Beheer pictogramlettertypen
Pictogramlettertypen zijn een zeer efficiënte manier om pictogrammen in uw webontwerpen te gebruiken zonder een heleboel afbeeldingsitems te hoeven exporteren en optimaliseren. Meestal verwijzen we naar pictogramlettertypen in de hoofd> gedeelte van HTML-webpagina's, zoals we doen met CSS en JavaScript. Het gebruik ervan in Sketch is echter iets gecompliceerder. Gelukkig maakt Icon Font het gemakkelijk.
Download en installeer Sketch IconFont, download SVG-lettertypebestanden of download deze lettertypebundel, die de lettertypebestanden voor FontAwesome, Material Design Icons, Ion Icons en Simple Line Icons bevat. Als u klaar bent, navigeert u naar Plug-ins> Pictogramlettertype> Installeer een lettertypebundel, selecteert u de gedownloade lettertypen in het dialoogvenster Bestand openen en navigeert u vervolgens naar Plug-ins> Pictogramlettertype> Raster invoegen> [uw gewenste pictogramlettertype] om in te voegen een icoon.
Zelfs als u van plan bent een aangepaste pictogrammenset voor uw ontwerp te ontwerpen, kan het hebben van kant-en-klare pictogrammen u helpen met snelle prototyping in de vroege stadia van het ontwerp, waardoor uw low-fidelity mockups een beetje meer duidelijkheid / betrouwbaarheid krijgen. .
15. Zoek en vervang
- Download hier
- Prijs: Vrij
- Samenvatting: Zoek en vervang tekst in geselecteerde lagen
Teksteditors zijn niet de enige plaats die u moet zoeken en vervangen, het is ook handig in Sketch. Deze plug-in heeft veel geavanceerde opties en stelt je in staat om te zoeken naar instanties van bepaalde woorden of zinnen in de tekst in geselecteerde lagen (en alles erin) en deze vervolgens gemakkelijk te vervangen.
Volgende pagina: meer tijdbesparende Sketch-plug-ins
