We ondersteunen nu Sketch Shared Libraries en MaterialUI CSS

Laatste versie & documenten

Introductie van Sketch2React - Echte codecomponenten in Sketch

Het grootste verschil tussen deze en andere prototyping-tools is dat u ** ontwerpt met echte code **. Dat geeft u hifi-code rechtstreeks vanuit Sketch.

Wat is dit?

Ga van .sketchfiles (via ons framework) om heel snel te coderen!

Sketch2React is:

  • Framework, code-app, plug-in
  • Onderdeel HTML5 Export
  • Component Vanilla React + React Export

In feite zijn we de enige gratis Sketch App die codekader bestaat die bestaat

Snel overzicht

  • Ontwerp met codefragmenten die gemakkelijk te leren zijn! Het lijkt meer op Markdown
  • Volledig responsief
  • Geen plug-ins, werkt native binnen de Sketch-app
  • Visuele manier om meer te leren over code
  • Behandel de lagenweergave in Sketch als een zeer eenvoudige code-editor
  • Gebruik CSS-plug-ins
  • Offline modus & Hot herladen
  • Bouw volledige statische websites rechtstreeks vanuit Sketch
  • Exporteren naar HTML-pakket dat .html, css en alle relevante bestanden bevat
  • Exporteren naar React code & componenten

Softwarevereisten

  • Schets 56-57.1
  • Sketch2React Code App
  • OSX Mojave

Waarom hebben we dit gebouwd?

Zowel Fredrik als ik zijn van nature erg nieuwsgierig en we zijn volledig geobsedeerd door elke dag slimmer en slimmer te proberen te werken. We dachten: "oookey, dus Juan ontwerpt dingen in Sketch en stuurt het dan via Freddy naar Fredrik en vervolgens codeert Fredrik het met React". Mooi standaardontwerp + ontwikkelprocedure anno 2018, vind je niet? JEP.
Zoooo wacht. Wat als we dingen rechtstreeks in Sketch zouden kunnen ontwerpen en bouwen, terwijl we al dingen instellen zoals kolommen, marges, opvullingen, mediarij wachtrijen enz.? En gebruik Bootstrap op de achtergrond zodat we het beroemde raster en reactievermogen krijgen? Plus al die zoete componenten. Boem

Serendipity

Tijdens het bouwen van een echte Sketch to React-workflow ontdekten we verschillende verbazingwekkende "bijwerkingen". We wilden ons ontwerp + code-prototypen op onze telefoons kunnen bekijken, dus moesten we .html-bestanden van elk tekengebied kunnen downloaden dat via onze React-app is weergegeven. Maar wacht! De lettertypen zien er vreemd uit. Ja, we moeten een soort {externalasset.css} dingetje hebben voor Google-lettertypen (of andere). Controleren. Wacht eens even. Wat is een lettertype maar ook een pictogram? Pictogramlettertypen natuurlijk!
Wacht even. WTF Kan ik eenvoudige websites nu rechtstreeks vanuit Sketch bouwen? Ja dat kan. Hier is een vanilledemo, 100% gedaan in Sketch.

Nog een cool ding. Het blijkt dat het bouwen van echte HTML-prototypen binnen Sketch die u op uw eigen beveiligde servers kunt zetten, perfect is voor gebruikerstests. Sluit Hotjar aan en je bent klaar om te gaan.

Een paar goede middelen

  • tutorials
  • Hoe het werkt
  • Spiek briefje
  • Release-opmerkingen