Czy w aplikacji Sketch jest dostępna funkcja „generuj CSS / HTML” lub wtyczka?

13

Znalazłem skrypt, który właśnie to robi (generuje CSS i HTML dla warstw i oferuje opcję eksportowania ich w wartościach%) i tnie pracę web-dev na pół dla Photoshopa. Teraz jestem ciekawy, czy ktoś natknął się na wtyczkę lub mógł mnie skierować na natywną funkcję taką jak w aplikacji Sketch. Brak takich powoduje, że przejście do Sketch jest naprawdę bolesne. Lub będąc nowym w Sketch Po prostu brakuje mi czegoś ideologicznego innego w sposobie, w jaki Sketch działa z CSS i HTML.

css html sketch-app plugin Rakhilya Lála Ibildayeva
źródło

Odpowiedzi:

11

To może nie być odpowiedź, której szukasz, ale uważam, że jest lepsza niż przekazywanie przeciętnych, automatycznie generowanych stylów inżynierom.

Selektywne znaczniki

Jestem pewien, że odkryłeś grabber CSS z menu kontekstowego Sketch. Możesz wybrać dowolną liczbę obiektów, a CSS pojawi się w schowku szybciej niż możesz go wkleić.

Kopiuj kontekstowe atrybuty CSS

Oczywiście nie ma selektorów, to tak naprawdę tylko notatki CSS. Każdy blok jest wywoływany przez poprzedzający komentarz wykorzystujący nazwę warstwy, tak jak poniżej:

/* Rectangle 1: */
background: #C7C1B5;

/* Rectangle 1 Copy: */
background: #F5E618;

/* Rectangle 1 Copy 2: */
background: #FFFFFF;

Adnotacja pliku

Sketch Measure to wtyczka, która generuje różne poziomy adnotacji zgodnie ze specyfikacją. Tutaj jest film demonstracyjny . Podstawową ideą jest adnotowanie ważnych liczb i pozwolenie programistom na napisanie własnego kodu.

Wtyczka Sketch Measure

Poza adnotacją

Możesz także wypróbować takie narzędzia, samodzielnie lub w połączeniu:

  • Zeplin tworzy autonomiczną, udostępnianą wersję szkicu do inspekcji dewelopera, wyciągając specyfikacje na żądanie.
  • Marvel to narzędzie do prototypowania, które importuje pliki Sketch. Nic nie komunikuje się jak interaktywny prototyp!

Eksperymentalny generator HTML

Nigdy tego nie używałem i jest to wyraźnie na wczesnym etapie rozwoju, ale wtyczka Blade wygląda obiecująco.

Blade to wtyczka Sketch 3 do automatycznego generowania HTML. Wygeneruje tag <div> dla grupy, tag <p> dla tekstu itp.

wprowadź opis zdjęcia tutaj

zwykłe ubrania
źródło
1
Ulepszyłem plik Readme Blade z przeglądem architektury / przewodnikiem dla innych, aby mieć większą szansę pracy nad nim, aby dalej go ulepszać ... github.com/kristianmandrup/blade
2
Wydaliśmy Protoship UIPad, który właśnie to robi. Jest to generator kodu dla Sketch, który konwertuje projekty Sketch na HTML, CSS, SASS i React. Wykorzystuje BEM dla CSS i wykorzystuje marginesy, wypełnienia, zmiennoprzecinkowe i flexbox zamiast absolutnego pozycjonowania. protoship.io/tools/uipad.html .
Jasim,
„Wydaliśmy” jest mylące - Protoship jest listą oczekujących od roku i nadal nim jest.
Chris Moschini,
1

Zobacz następujące linki http://blog.mengto.com/the-best-hidden-features-in-sketch/

Śledź blog Meng To, aby być na bieżąco z interesującymi samouczkami, poradami, a nawet sztuczkami. http://blog.mengto.com/ https://designcode.io/

Kiodour
źródło
Cześć Kiodour, czy mógłbyś wyjaśnić nieco więcej, co znajdziemy za podanym linkiem i dlaczego odpowiada na pytanie? W ten sposób twoja odpowiedź jest nadal cenna na wypadek, gdyby link zerwie się później. Zgnilizna linków jest głównym powodem, dla którego tak naprawdę nie lubimy odpowiedzi zawierających tylko linki. Dziękujemy za twój wysiłek i wnieś swój wkład!
AndrewH