de Colm Tuite

Prezentarea Modulz: Pasul următor în codarea vizuală

Prezentarea Modulz Pasul urmator in codarea vizuala
Modulz Composer

Modulz este un editor de cod vizual pentru proiectarea și construirea produselor digitale – fără a scrie cod. Săptămâna trecută, am lansat Campanie Kickstarter.

În Dilema Instrumentului de proiectare, Instrumentele de proiectare se epuizează și Cum se construiește un sistem de proiectareAm scris pe larg despre modul în care recolta noastră actuală de instrumente de proiectare nu sunt potrivite pentru proiectarea interfeței de utilizare.

Răspunsul uimitor la aceste postări a inspirat Modulz: o nouă rasă de instrumente de proiectare care exportă componente pregătite pentru producție.

Ce este Modulz și cum este util?

La suprafață, Modulz pare familiar. Vă organizați straturile în bara laterală stângă, aplicați stiluri din bara laterală dreaptă și urmăriți designul cum se reunesc pe pânză. Dar Modulz este cale mai puternic de atât.

Stări interactive

În loc să desenați forme statice, lucrați cu componente interactive. Aranjarea fiecărui stat individual. Adăugarea variantelor de componente.

Prezentarea Modulz Pasul urmator in codarea vizuala
Stilizarea unei stări de trecere a mouse-ului în Modulz

Exportul codului

Puteți exporta componente pregătite pentru producție. Începem cu React și componentele de stil. În curând, vom adăuga suport pentru alte biblioteci CSS-in-JS, cum ar fi emotion și styled-jsx. Apoi, Tailwind și vanilie HTML / CSS. În viitor, sperăm să adăugăm suport pentru Vue, Preact și alte biblioteci bazate pe componente.

1611502809 299 Prezentarea Modulz Pasul urmator in codarea vizuala
UI pentru exportul codului în Modulz

Sisteme de proiectare

Modulz merge mult mai departe decât mostrele de culoare. Definiți un sistem de proiectare complet, inclusiv dimensiunile fontului, spațierea, culorile, umbrele etc., apoi refolosiți-le pentru a vă stiliza componentele. Modificați un stil în tema dvs. și se actualizează pe întregul proiect.

1611502810 619 Prezentarea Modulz Pasul urmator in codarea vizuala
Ecranul Modulz Theme pentru definirea sistemului de proiectare.

Design Linting

Puteți automatiza sarcinile de proiectare cu funcția de scufundare a designului Modulz. Modulz poate sugera programatic îmbunătățiri la lucruri precum contrastul culorilor, lungimea liniei și problemele de performanță ale browserului.

1611502812 710 Prezentarea Modulz Pasul urmator in codarea vizuala
Proiectarea scamei în Modulz

Iată ce spun oamenii despre Modulz până acum:

„Statul este (aproape) totul în proiectarea interfeței de utilizare. Cu toate acestea, nicio aplicație de proiectare pe care am văzut-o nu a făcut-o coaptă. Sărim cu toții prin cercuri pentru o stare de hover! Reveniți la Modulz pentru sănătatea mintală a designerilor din întreaga lume. ” – Eric Pitcock

„I ❤ Sketch, dar nu există un instrument * excelent * pentru traducerea proiectelor de produse în cod. Abordarea Modulz este interesantă: în loc de perfecțiunea pixelilor, aplicația creează modele interactive, receptive, care exportă în React. ”-Leanne Bathurst

„Asta are într-adevăr câteva idei revoluționare!” –Henrik Juhl

„Îmi place sloganul Modulz #CloseTheGap. De ce să colaborați un decalaj atunci când puteți scăpa de decalaj împreună? Umple acest gol! ”-Jina Anne

„Arată incredibil de promițător, încântat să vadă cum se dovedește acest lucru.” –Dianne Alongsagay

„Sistem de proiectare încorporat – genial! Acesta ar putea fi în cele din urmă instrumentul de proiectare pe care l-am așteptat. Fericit să fiu susținător! ”-Aparajita Fishman

„Emoționat să susțin alfa pentru acest proiect. Sper să-i văd pe acești tipi reușind în ceea ce fac. Aruncă o privire. ”-Brice Gramm

„Acest nou instrument de codare vizuală arată uimitor. Acesta umple un gol, ca niciun alt instrument pe care l-am văzut. ”-Douglas Bonneville

„Lăsați totul chiar acum și reveniți pe Modulz pe Kickstarter. Un instrument care exportă componente pregătite pentru producție în React este un vis pe care l-am urmărit pentru totdeauna. ”-Abdus Salam

„Lumea mea a fost suflată în această dimineață vizionându-ți videoclipul. Cu siguranță voi susține ”-Amanda Lucas

„În cele din urmă, cineva a rezolvat cea mai mare problemă în proiectarea UI” –Ugur Akdemir

„Oprește tot ce faci și întoarce-te înapoi la Modulz” –Steve Schoger

„Sprijinit! Acest lucru trebuie să se întâmple! ”-Vlad Magdalin

Planuri de viitor

Avem ambiții uriașe pentru Modulz. Funcțiile pe care le-am evidențiat aici sunt doar primul pas.

Mai târziu anul viitor, intenționăm să introducem caracteristici ale echipei, inclusiv importul de componente, astfel încât echipele de produse să poată proiecta cu bibliotecile lor de componente existente.

Pe măsură ce platforma se maturizează, jocul final este de a sprijini transferul perfect de cod între Modulz și editorii de text. Dezvoltatorii care editează codul manual, într-un editor de text. Proiectanții care editează același cod vizual, în interiorul Modulz.

În plus, planurile pentru caracteristici mai generale includ:

  • Suport pentru mai multe biblioteci CSS-in-JS precum emotion, styled-jsx etc.
  • Suport pentru exportul în vanilie HTML / CSS
  • Exportați datele componentelor în JSON
  • Exportați-vă tema în cadrul de utilitate CSS, cum ar fi Tailwind
  • Suport mai larg pentru bibliotecă de coduri (Vue.js, Preact, React Native etc.)
  • Previzualizare / oglindire dispozitiv de la distanță
  • Mod offline (Modulz este o aplicație web progresivă)
  • Prototipare – interacțiuni bazate pe stări, tranziții de ecran etc.
  • Bibliotecă masivă de componente, șabloane, icoane, ilustrații etc.

În cele din urmă, vrem să reparăm deconectarea dintre echipele de produse. Pentru a ajuta designerii să colaboreze mai bine cu dezvoltatorii, fără cod.

Pentru a încuraja produse digitale mai incluzive prin automatizarea accesibilității.

Pentru a reduce blocajele prin construirea de instrumente moderne care să împuternicească echipe întregi să lucreze la produsele lor finale.

Pentru a-i face pe toți să lucreze la același produs. Împreună.

Echipa

Prezentarea Modulz Pasul urmator in codarea vizuala
1611502813 758 Prezentarea Modulz Pasul urmator in codarea vizuala
Fețele noastre

Colm Tuite

Cu sediul în Dublin, Colm se ocupă de proiectarea produselor și de produsele front-end. În ultimii patru ani, Colm a lucrat la instrumentele de proiectare. El a fondat anterior Plexi, un alt instrument de proiectare. Îl poți găsi Stare de nervozitate, Dribbble si a lui site.

Stephen Haney

Cu sediul în Seattle, Stephen se ocupă de proiectarea back-end și ingineria JavaScript. Stephen are o experiență de peste 15 ani cu multe companii Fortune 500 și a scris două cărți despre jocul dev. Găsește-l pe Stare de nervozitate și Github.

Cum puteți ajuta

Lucrăm cu normă întreagă la Modulz de patru luni. Avem deja o mulțime de produse de bază complete. Dar Modulz este un produs complex și avem planuri mari pentru acesta.

Am primit ceva sprijin de la InVision și Chirpici. Dar avem nevoie de tot ajutorul pe care îl putem obține.

Pentru a vă mulțumi pentru sprijin, vă oferim acces nelimitat, pe viață la Modulz pe Kickstarter. Există, de asemenea, o geantă cool, plină de icoane, șabloane și materiale de înaltă calitate! Ar însemna atat de mult pentru noi dacă ați lua în considerare sprijinirea activității noastre.

Pentru mai multe informații, consultați Modulz site-ul web, Stare de nervozitate și Spectru.

Mulțumesc tuturor ❤️