Наш канал в

Sketch iOS Library

Страница плагина

Я решил взять стили из Xcode и попробовать скопировать их для Sketch. По мере работы, я документировал весь процесс и как я достиг результата.

Вам нужно скачать San Francisco: https://developer.apple.com/fonts/

UIBlurEffectStyle

API не предоставляет никаких спецификаций для блюра, поэтому его сложно копировать. Из соображений производительности, я понимаю, почему Apple не дает этих спецификаций. Однако, будучи дизайнерами, мы должны знать и учитывать эти ограничения.

Использование

  1. Открыть UIBlurEffectStyle.sketch
  2. Скопировать стиль типа блюр
  3. Вставить стиль в любой шейп

Процесс

Создано несколько цветных шейпов для блюра

Визуализировано и экспортировано все 3 типа блюра шейпов в Xcode:

  • extraLight
  • light
  • dark

Каждый тип блюра скопирован в Sketch

UIFontTextStyle

Системные шрифты Apple предназначены для разборчивости и имеют разные размеры, которые автоматически подстраиваются под различные ситуации. О том, почему лучше использовать системные шрифты, вы можете прочесть здесь.

Использование

  1. Откройте UIFontTextStyle.sketch
  2. Скопируйте и вставьте артборд в документ Sketch
  3. Установите тексты в системе стилей

Процесс

Создан список всех 10-ти текстовых стилей:

  • Title1
  • Title2
  • Title3
  • Headline
  • Subhead
  • Body
  • Footnote
  • Caption1
  • Caption2
  • Callout

Спецификации напечатаны в Xcode (например: UIFontTextStyle(_rawValue: UICTFontTextStyleTitle1): .SFUIDisplay-Light, 28 )

Используется трекинг шрифта по рекомендации designcode.io

Участвуйте

Предложите стиль

  1. Создайте задачу
  2. Опишите стиль iOS, который нужно скопировать
  3. Бонус: Наблюдайте за задачей для обеспечения обратной связи

Оставьте отзыв

  1. Создайте задачу
  2. Укажите стиль, по которому у вас возник вопрос
  3. Бонус: Наблюдайте за задачей для обеспечения обратной связи

Возникли вопросы?

 

HSL Color Picker

HSL Color Picker

Установка

  1. Скачайте master.zip, распакуйте его.
  2. Двойной клик на “HSL_Color_Picker.sketchplugin”

Лицензия

CC-BY-SA 4.0

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

Полное руководство по дизайну iOS 9 в Sketch

iOS сильно выросла в течение последних лет. С ее iOS 9 апгрейдом, Apple представил новый системный шрифт под названием San Francisco, 3D Touch и многозадачность на iPad. В Xcode вы найдете Stack Views, фантастический инструмент для более адаптивных макетов, гораздо проще Auto Layout.

Самое подробное руководство по дизайну в Sketch

Работая со Sketch последние три года, я освоил ряд ключевых техник, которые значительно улучшили мой рабочий процесс. Так как я, помимо рисования, также обожаю прототипировать и кодить, мне нужен инструмент для быстрого выполнения дизайн-проектов и легкой генерации исходников. Sketch вместе с его плагинами и другие инструменты для прототипирования полностью справляются с этой задачей. Часть 1 Часть 3 Часть 4

Серия уроков Sketch (часть1 из 5): Настройка Sketch

Первое что нам следует изучить, это настройка Sketch. Если вы только начали создавать дизайны для веб и являетесь новичком в Sketch или Photoshop, или вы просто разработчик, желающий включить UI-дизайн в свой репертуар, эти простые уроки по настройке идеально подойдут для быстрого ознакомления с работой Sketch. Часть 2 Часть 3 Часть 4 Часть 5