Зараз ми підтримуємо Sketch Shared Library and MaterialUI CSS

Остання версія та документи

Представляємо Sketch2React - Реальні компоненти коду всередині Sketch

Найбільша різниця між цим та іншими засобами прототипування полягає в тому, що ви ** проектуєте за допомогою реального коду **. Це дає код високої вірності прямо з ескізу.

Що це?

Перейдіть з .sketchfiles (через наш фреймворк), щоб дійсно швидко кодувати!

Sketch2React - це:

  • Рамка, додаток для коду, плагін
  • Експорт HTML5 компонента
  • Компонент Vanilla React + React Export

Насправді ми є єдиним безкоштовним додатком Sketch для кодування рамки, що існує

Короткий огляд

  • Створіть фрагменти коду, які легко вивчити! Це більше схоже на Маркдаун
  • Повністю чуйний
  • Нульові плагіни, які працюють у програмі Sketch
  • Візуальний спосіб дізнатися більше про код
  • Ставіться до перегляду шарів у Sketch як до дуже простого редактора коду
  • Використовуйте плагіни CSS
  • Офлайн-режим та гаряче перезавантаження
  • Створіть цілі статичні веб-сайти прямо зсередини програми Sketch
  • Експорт у HTML-пакет, що включає .html, css та всі відповідні файли
  • Експорт коду та компонентів React

Вимоги до програмного забезпечення

  • Ескіз 56–57.1
  • Додаток коду Sketch2React
  • OSX Mojave

Чому ми це будували?

І Фредрік, і я дуже цікаві від природи, і ми абсолютно одержимі, намагаючись працювати розумнішими та розумнішими кожен і щодня. Ми, де думаємо, «оокей, тому Хуан замислює речі всередині ескізу, а потім надсилає його Фредріку через Зеплін, а потім Фредрік кодує це з Реактом». Досить стандартний дизайн + процедура розробки, ано 2018, ви б не сказали? Так.
Sooooo чекай. Що робити, якщо ми могли б розробляти та створювати речі безпосередньо всередині ескізу, вже встановлюючи такі речі, як стовпці, поля, прокладки, медіа-запити тощо тощо? І використовувати Bootstrap у фоновому режимі, щоб ми отримали відому сітку та чуйність? Плюс всі ті солодкі компоненти. Бум

Серенда

У процесі створення справжнього робочого процесу "Ескіз до реагування" ми виявили кілька дивовижних "побічних ефектів". Ми хотіли, щоб ми могли переглядати наш дизайн + прототипи коду на наші телефони, тому нам потрібно було мати можливість завантажувати .html файли кожного аркуша, що відображаються через наш додаток React. Але зачекайте! Шрифти виглядають дивно. Так, нам потрібно мати можливість {externalasset.css} речі для Google Fonts (або інших). Перевірка. Woooooow зачекайте хвилину. Що ще є шрифтом, а також іконою? Шрифти значків звичайно!
Зачекай. WTF Я можу створювати прості веб-сайти прямо зараз із ескізу? Так, ти можеш. Ось демонстрація ванілі, на 100% зроблена всередині Sketch.

Ще одна класна річ. Виявляється створення справжніх прототипів HTML в рамках Sketch, які ви можете розмістити на своїх захищених серверах, ідеально підходить для тестування користувача. Просто підключіть Hotjar, і вам добре піти.

Пара хороших ресурсів

  • Підручники
  • Як це працює
  • Шпаргалку
  • Примітки до випуску