10 ingyenes vázlat bővítmény webes fejlesztők számára

A vázlat a webes tervezők és a fejlesztők körében egyre nagyobb vontatást kap. Ez valószínűleg azért van intuitív, könnyen megtanulható és számos funkcióval rendelkezik, ami sokkal könnyebbé teszi a weboldal prototípusának létrehozását. Lehet, hogy ez az alkalmazás kiterjeszthető, vagyis bővítményekkel egyszerűen hozzáadhat új funkciókat az alkalmazáshoz.

Itt 10 bővítmény található, amelyek segítenek a termelékenység növelésében a Sketch használatakor. A tartalomgenerátoroktól, a színpalettaválasztótól kezdve változatosak, és segíthetnek a rétegmérések megjelenítésében, vagy automatikusan hozzáadni a rétegeket egy réteghez.

1. CSS Buddy

CSS Buddy lehetővé teszi a CSS felvételét a rétegre a Vázlat munkaterületen. Alapvetően a CSS használatával a szélességet, magasságot, opacitást, doboz-árnyékot, szegélyt és hátteret alkalmazhatja.

Ezzel a beépülő modullal válassza ki a kívánt réteget, majd válassza ki Alkalmazás a Kijelöltre a plugin menüből. Egy párbeszédablak kéri, hogy adja meg a stíluslapot. Adja hozzá a CSS-tartalmat a CSS-osztály nélkül, és nézze meg a réteg alakját.

2. Anyagtervezési színpaletta

Ha követi az Material Design trendjét, a kiemelkedő dolog, amit észre fog venni, a megkülönböztető színek használata. Az Material Design rendelkezik egy fantasztikus színpalettával. Most már be tudod hozni a munkaterületedbe Anyagtervezés színpaletta plugin.

Ez a bővítmény másodperceken belül színpalettákat hoz létre anélkül, hogy bezárná a munkaterületet. A színárnyalat létrehozásához válassza ki a színárnyalatot, az értéket vagy a színmintát.

3. Vázlat jegyzetfüzet

Néha meg kell mutatnunk, hogy mit csinálunk egy megjegyzésben vagy dokumentáción keresztül. Ha más tervezőkkel dolgozol, vagy az ügyfél részvétele, akkor ez is szükséges, így biztosíthatja, hogy az eredmény az, amit mindenki törekedett.

Vázlat jegyzetfüzet Ez egy plugin a tervrajz dokumentálásához a vázlatban. Egy további oldalsávot fog hozzáadni a munkaterülethez, amely megjegyzéseket tartalmaz, amelyeket a design bármely eleméhez hozzáad. Szerkesztheti a megjegyzéseket, a sorrendet, törölheti és megváltoztathatja a megjegyzések láthatóságát.

4. Napos játékos

Mielőtt valódi képeket használnánk egy tervben, gyakran használunk helyőrző képeket a tervezési folyamat felgyorsítására. Vázlat esetén használhatja Napos játékos 6 helyőrző-szolgáltatásból, beleértve a Placehold.it-t, a LoremPixel-t és az Unsplash-et, hozzáadhat egyéni helyőrzőket a Sketch munkaterület bármelyik rétegéhez. Aktiválás után beállíthatja a kép szélességét, magasságát és egyéb információkat.

5. Tartalomgenerátor

Már van egy bővítményünk a helyőrzők képeinek beillesztéséhez, az általános tartalomhoz? Tartalom-generátor segít hozzáadni a dummy adatokat, mint például az avatarokat, neveket, földrajzi elhelyezési adatokat és így tovább. Tökéletesen működik a makettmodellek és a fejfájás csökkentése érdekében, amikor megpróbáljuk kitalálni, hogyan lehet a helyszínen adatokat generálni.

A dummy adatok hozzáadásához csak válasszon ki egy réteget, majd válassza ki Plugin> Generátor, és válasszon Geo, Személy vagy fotók.

6. Vázlatmérés

Vázlat intézkedés a vázlat mérési eszköze. Megméri a tervezési réteg (vagy rétegek) hosszát vagy méretét. Ön is megkapja a réteg párnázását és margóját, valamint a két réteg közötti távolságot. A vázlatmérés is kinyomtathatja a réteg tulajdonságait, például a színt, a szegélyt és az átlátszóságot. Az összes mérést a billentyűparancsok segítségével hozhatja fel.

7. Dinamikus gomb

Dinamikus gomb Segítségével könnyen rögzítheti a rögzített párnák gombját. Automatikusan beállítja a párnázást a megadott érték alapján, függetlenül a szöveg hosszától. A beépített pluginnel a szöveg a parancsikon segítségével konvertálható struktúrává. A szükséges kitöltés mennyisége a (0: 0: 0: 0) szövegrétegbe (flex gombcsoport alatt) beilleszthető.

8. Tipográfiai skála

A tipográfiai skála egy plugin, amely a kijelölt szövegréteget tipográfiai skálává alakítja. A bővítmény használatához válassza ki a szöveges réteget (egyszeri vagy többszörös), vagy vegyes réteget, amely legalább egy szöveges réteget tartalmaz, majd válassza a lehetőséget Plugin> Tipográfiai méretarány és állítsa be a párbeszédablak értékét. Az eredmény egy skálázott szöveg halmaza, amely a tipográfiai méret szabályait követi.

9. Modulátor

Val vel Modulizer a Shift + Command + M billentyűkombinációval vezérelheti a gombok, modulok vagy a tervezési területek területét. Összeállíthatja az összes réteget, csoportosíthatja, majd a gyorsbillentyűvel automatikusan beállíthatja a párnázottságot a szükséges padding érték alapján . Nézze meg a videó bemutatót, hogy ezt láthassa.

10. Blade

Gondoltál már arra, hogy a vázlatról a HTML-re alakítja át a designját? Ha igen, akkor valószínűleg meg kell kapnia Penge, egy vázlat plugin, amely automatikusan létrehozza a HTML-fájlokat a designból. Ez átalakítja a csoportot div, szöveget p stb.

A Blade használatakor a pluginnek meg tudja mondani, hogy melyik DOM elemet hozzon létre egy speciális név hozzáadásával a réteghez, például [btn] vagy bemenet [text], így a Blade tudja, mit kell tennie. Nézze meg ezt a videó bemutatót egy belső megjelenésért.

Most olvasd el: 12 Hasznos bővítmények a WordPress fejlesztők számára