10 gratis skiss pluggar för webbutvecklare

Sketch får en stor dragkraft bland webbdesigners och utvecklare. Detta är förmodligen för att det är intuitivt, lätt att lära och levereras med många funktioner som gör det mycket lättare att skapa en webbplatsprototyp. Det kan också bero på att denna applikation är utökbar, dvs du kan enkelt lägga till nya funktioner i programmet med hjälp av plugins.

Här är 10 plugins som kan hjälpa dig att öka din produktivitet när du arbetar med Sketch. Det finns olika, allt från innehållsgeneratorer, färgpalettväljare, och de kan hjälpa dig att visa lagermått eller automatiskt lägga till vaddering i ett lager.

1. CSS Buddy

CSS Buddy kan du lägga till CSS i ditt skikt i Sketch-arbetsytan. I grund och botten kan du tillämpa bredd, höjd, opacitet, boxskugga, kant och bakgrund till lagret med hjälp av CSS.

Med det här pluginet installerat, välj bara ett lager och välj sedan Ansök på Valda från plugin-menyn. En dialogruta kommer att uppmana dig att ange ditt stilark. Lägg till CSS-innehållet utan CSS-klassen och titta på ditt lager i form.

2. Material Design Färgpalett

Om du följer trenden med Material Design, är en framträdande sak du märker användandet av särpräglade färger. Material Design har en fantastisk färgpalett. Nu kan du ta med det till din arbetsyta med Material Design Color Palette Plugin.

Detta plugin kommer att generera färgpaletter på några sekunder utan att du behöver stänga arbetsytan. Välj Hue, Value eller Swatch för att skapa en färgpalett som passar ditt projekt.

3. Sketch Notebook

Ibland behöver vi visa vad vi gör i en kommentar eller via dokumentation. Om du arbetar med projekt med andra designers eller en kunds engagemang är detta också nödvändigt så att du kan se till att resultatet är vad alla syftar till.

Sketch Notebook är ett plugin för att enkelt dokumentera din design i Sketch. Det lägger till ytterligare en sidovägg i ditt arbetsområde, som innehåller kommentarer som du lägger till i något element på din design. Du kan omordna kommentarer, ändra, ta bort och växla till kommentarer.

4. Day Player

Innan vi använder riktiga bilder i en design använder vi ofta platshållarbilder för att påskynda designprocessen. För Sketch kan du använda Day Player att lägga till anpassade platshållare till varje lager i din Sketch-arbetsyta från 6 platshållarbildstjänster inklusive Placehold.it, LoremPixel och Unsplash. När du har aktiverat kan du ställa in bildens bredd, höjd och annan information.

5. Innehåll Generator

Vi har redan ett plugin för att infoga platshållarbilder, vad sägs om en för allmänt innehåll? Content Generator hjälper dig att lägga till dummy data som avatarer, namn, geolocation data och mer. Fungerar bra för mockupdesign och för att minska huvudvärk från att försöka lista ut hur man genererar data på plats.

För att lägga till dummy data, välj bara ett lager och välj sedan Plugin> Generator, och välj Geo, Persona eller foton.

6. Skissmått

Skissmått är ett mätverktyg för Sketch. Det mäter längden eller storleken på ett lager (eller lager) i din design. Du får också vadderingen och marginalen för ett lager samt avståndet mellan två lager. Sketch Measure kan också skriva ut skiktets egenskaper, till exempel färg, kant och opacitet. Alla mätningar kan tas upp via tangentbordsgenvägar.

7. Dynamisk knapp

Dynamisk knapp hjälper dig att enkelt skapa en knapp med fasta paddlar. Den justerar automatiskt vadderingen baserat på värdet du ger, oavsett längden på din text. Med plugin installerat kan en text konverteras till en struktur med genväg Kommandot + J. Mängden padding som krävs kan sedan stansas in i textskiktet (0: 0: 0: 0) (under flexknappsgrupp).

8. Typografisk skala

Typografisk skala är ett plugin för att vända valda textlager till typografisk skala. För att använda detta plugin, välj bara textlagret (singel eller flera) eller blandat lager som innehåller minst ett textlager och välj sedan Plugin> Typografisk skala och justera värdet på dialogrutan. Resultatet är en uppsättning skalad text som följer reglerna för typografisk skala.

9. Modulizer

Med Modulizer Du kan styra paddlarna för knapp, modul eller områden på din design med tangentbordsgenvägen Shift + Command + M. Du kan kombinera alla dina lager, gruppera det och använd genvägen för att automatiskt justera din vaddering baserat på vadderingsvärdet du behöver . Titta på videodemoen för att se detta i åtgärd.

10. Blad

Har du någonsin tänkt på att konvertera din design från skiss till HTML? Om så är fallet borde du förmodligen få Blad, ett Sketch-plugin som automatiskt genererar HTML-filer från din design. Det kommer att konvertera gruppen till div, text till p och så vidare.

När du använder Blade kan du berätta plugin vilket DOM-element som ska genereras genom att lägga till ett specialnamn i lagret, till exempel [btn] eller input [text] så Blade vet vad den ska göra. Kolla in denna videodemo för ett inslag.

Läs nu: 12 Användbara plugins för WordPress Developers