Sketchapp: Sketch’s Mac, web & iPhone apps · The best of all worlds · Sketch

Sketch.app — Онлайн-школа Bang Bang Education

Купить →

Доступно по подписке

• 30 минут ежедневных занятий
• 11 уроков

Кому подойдет

Курс предназначен для начинающих дизайнеров интерфейсов и иллюстраторов, желающих освоить новый векторный инструмент.

Кто будет преподавать

Александр Катин

В БВШД Александр Катин делал много экспериментальных вещей для учебы, выставок и, в первую очередь, для себя. Параллельно занимался веб-разработкой и сотрудничал со студией Sulliwan. В 2014 году пришёл продюсером интерактивных проектов в агентство Hungry Boys, где делал клиентские проекты и продолжал изучать связку дизайна и технологий. После Hungry работал интерактивным дизайнером в продакшне Hello Computer — создавал прототипы и визуализации с помощью Node.

js, ActionScript, Processing и OpenFrameworks. Участвовал в проектах для «Гаража», «Почты России», «Политеха», ВДНХ и Правительства Москвы. В данный момент занимается дизайном интерфейсов и преподает в ScreamSchool.

Программа курса

• Что такое sketch? Как инструмент завоевывал сердца дизайнеров.
• Актуализация. Где искать информацию и как быть в курсе последних новостей?
• Интерфейс приложения. Часть 1. Главное меню, шорткаты, настройки.
• Интерфейс приложения. Часть 2. Панель инструментов. Шорткаты.
• Интерфейс приложения. Часть 3. Как быстро работать со сложными фигурами.
• Интерфейс приложения. Часть 4. Организация слоев. Шорткаты. Плагин runner.
• Сетки и модульные системы. Направляющие и раскладки. Функция калькулятора.
• Стили текста и слоев. Замыкание слоев. Скрываем лишние элементы.
• Символы. Плагины. Как экономить время.
• Создаем веб-проект. Выстраиваем рабочий процесс. Готовим адаптивный веб-дизайн к передаче разработчикам.
  Handoff.
• Экспорт ассетов. Как посмотреть мобильный дизайн на реальных устройствах.

Необходимые материалы и инструменты

Компьютер с Mac OS и Sketch. app (подойдет триальная версия)

Что в итоге

Мы разберем основные возможности Скетча, поговорим о том, как экономить время и не отвлекаться на рутину.

Новости школы

Подпишитесь, чтобы первыми узнать о новых курсах, скидках и промокодах

Продолжив, вы даете согласие
на обработку персональных данных →

о школе

BBE — это школа дизайна и креативных направлений. Мы закрываем пробелы в существующем дизайн-образовании в России и популяризируем дизайн, ориентированный на человека. Все наши образовательные продукты созданы ведущими экспертами индустрии.

Программы, курсы и  интенсивы

Студенты могут выбрать формат, который соответствует их цели: получить профессию, освоить навык или метод, познакомиться с направлением. Каждый из них дает возможность лично пообщаться с экспертами и получить фидбэк.

Дизайн-библиотека

Коллекция из 65+ онлайн-курсов для самостоятельных занятий, которая доступна по подписке на месяц или год.

Точка зрения

Медиа о дизайне и культуре с бесплатными материалами — списками полезных ресурсов, статьями и видеобеседами с ведущими профессионалами.

фильмы

Лепота

Взгляд на наследие русской визуальной культуры с позиции современного дизайна. От основания Руси до 2021 года.

33 слова о дизайне

Исследование современного дизайна в России теми, кто его создает.

100 лет дизайна

Дебютный киноальманах об истории дизайна, показанный в 6 странах, 40 городах и ставший хитом Beat Film Festival-2018.

Html-sketchapp — залог единства программистов и дизайнеров / Хабр

Марк Далглейш, руководитель подразделения, занимающегося разработкой дизайн-систем в компании SEEK, говорит, что если взглянуть на любую команду, которая использует дизайн-систему, можно обнаружить, что у такого подхода имеются совершенно очевидные преимущества. Заключаются они в том, что дизайнеры и программисты трудятся продуктивнее, чем без наличия такой системы, результаты их работы становятся единообразнее, взаимодействие между различными группами сотрудников оказывается более чётким и слаженным.

Домашняя страница интерактивного руководства по стилю компании SEEK

Однако у большинства дизайн-систем есть фундаментальный недостаток. Дизайнеры и разработчики, даже при внедрении чего-то довольно-таки современного, продолжают работать в совершенно разных средах. В результате для того, чтобы поддерживать код и материалы дизайна в согласованном состоянии, приходится прикладывать немалые усилия, иначе те материалы, с которыми работают дизайнеры и программисты, с течением времени, уходят друг от друга всё дальше.

Неудивительно, что у компаний, использующих дизайн-системы, возникает ощущение, что в деле разработки инструментов в нашей индустрии наблюдается застой. Эти инструменты не приспособлены к той среде, в которой мы работаем, они не особенно полезны в важнейшем деле переноса того, что сделано разработчиками, в среду, в которой работают дизайнеры.

Неужели всё действительно так плохо? Марк полагает, что в ближайшем будущем нас ждут изменения к лучшему. В этом материале он рассказывает о том, как в SEEK смогли сблизить системы, в которых работают дизайнеры и разработчики настолько, насколько это позволяют современные технологии.

Наше путешествие в мире дизайн-систем

Мы, в компании SEEK, уже больше года работаем над интерактивным руководством по стилю, при этом элементы интерфейсов представлены компонентами React, количество которых постоянно растёт. Как и можно ожидать, это коренным образом поменяло наше видение визуального дизайна.

В результате в нашем распоряжении оказалась система дизайна, в основе которой лежит программный код, который определяет не только то, как будут выглядеть конкретные проекты, созданные компанией, но и содержание руководства по стилю, с которым работают дизайнеры.

Сегодня это руководство представлено в виде интерактивного, регулярно обновляемого веб-сайта. Но в самом начале работы над системой дизайна мы пытались формализовать правила в виде PDF-документа. Потом появился комплект исходных материалов для Sketch, стандартизованные символы, цвета и стили текстов, входящие в который, легко можно было использовать как отправную точку для новых проектов.

Первоначальный комплект материалов для Sketch компании SEEK

Немного позже мы экспериментировали с Craft, с набором плагинов для Sketch от InVision, из которых особо хотелось бы отметить плагин Library.

Это позволило нам создать общую библиотеку символов компании, использовать их во всех командах и во всех документах.

Плагин Library из набора Craft

В самом начале подготовки библиотеки стал очевидным огромный объём работы, необходимый для того, чтобы поддерживать эту библиотеку в актуальном состоянии, в частности, в ситуации постоянного развития существующих и появления новых шаблонов в наших проектах.

Разработчики, часто вместе с дизайнерами, вносили изменения в код, что оказывало серьёзнейшее воздействие на визуальный дизайн, но наша статическая библиотека дизайна оставалась такой же, как была до этих изменений. Для того чтобы привести её в актуальное состояние, кто-нибудь должен был вспомнить о том, что её нужно обновить, чего обычно не происходило.

Итак, тут речь шла о распространении изменений в направлении от разработчиков к дизайнерам. Те же проблемы были характерны и для обратного процесса. Разработчикам не хватало надёжного источника достоверной и актуальной информации по дизайну, сведения из которого они могли бы использовать в своём коде.

Путь от React к react-sketchapp

Примерно в это время мы начали работу над нашим первым React-проектом. Рендеринг вёлся на сервере, тут использовался webpack и CSS-модули (мы, по ходу дела, участвовали в их разработке). Всё это в итоге и привело к созданию нашего интерактивного руководства по стилям.

То, что React ориентирован на компоненты, сделало переход к интерактивному руководству почти неизбежным. При этом мы видели, что похожие процессы происходят и в других компаниях по всему миру.

Как только мы создали достаточно большую коллекцию компонентов, другие команды, работающие над новыми проектами, быстро воспользовались нашими наработками. Однако, так как теперь руководство по стилям состояло из компонентов React и стилей LESS, оно оказалось не особенно полезным для дизайнеров. Нас это не особенно удивило, мы не стремились в кратчайшие сроки это исправить. Дело в том, что разрыв технологий между дизайнерами и разработчиками — это старая проблема, которая так давно присутствует в нашей отрасли, что мы привыкли её не замечать.

Всё оставалось в том же состоянии до тех пор, пока мы не узнали о проекте react-sketchapp, созданном Airbnb.

React-sketchapp

Вот что говорит о react-sketchapp сотрудник Airbnb Джон Голд: «В Sketch мы используем символы и переопределения, в React — компоненты и свойства. Эти концепции так похожи, что казалось глупым их не объединить».

Мы глазам не поверили. Вот он — настоящий код на React, который попадает прямо в Sketch. Казалось, что нам наконец удастся создать дизайн-систему, из которой и разработчики и дизайнеры смогут черпать самые свежие и актуальные данные.

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

Конечно, когда мы немного углубились в эту тему, то обнаружили, что для работы с react-sketchapp нужно выполнить некоторые требования:

1. Необходимо, чтобы компоненты были построены с использованием React (это вполне очевидно). К счастью, мы уже использовали React, поэтому это не казалось проблемой.
   
2. Стили должны быть определены в JavaScript.
   В нашем случае, так как наша система дизайна была построена с помощью CSS-модулей, мы уже немного продвинулись в нужном направлении. Мы — большие фанаты CSS-in-JS, но мы не были готовы к тому, чтобы разбрасывать стили по всей нашей экосистеме, по крайней мере, не собирались делать это в спешке.
   
3. Компоненты должны использовать универсальные примитивы (View, Text, StyleSheet) а не браузерные примитивы, применяя что-то вроде react-primitives. В целом, react-sketchapp был ближе к React Native, чем к обычному React. Опять же, это было кое-что, на что мы вполне могли перейти, но такой переход потребовал бы очень много работы, и, возможно, по ходу её выполнения нам пришлось бы пойти на какие-то компромиссы.
   

Итак, хотя react-sketchapp — это просто потрясающий проект, который мы можем от чистого сердца порекомендовать другим, его технические требования, к сожалению, означали, что мы не сможем пользоваться им в краткосрочной или среднесрочной перспективах.

Даже если бы мы решили перенести нашу библиотеку компонентов, нам понадобилось бы найти ответ на ещё один вопрос. Этот вопрос касался контроля версий.

Материалы дизайна и универсальная система контроля версий

Как вы, возможно, уже знаете, существуют средства, которые позволяют использовать контроль версий внутри инструментов дизайна. Однако нам нужно было, чтобы материалы, с которыми работают дизайнеры, можно было бы обрабатывать средствами внешней системы контроля версий. Эти материалы мы хотели бы воспринимать как, скажем, обычный код, чтобы они располагались там же, где этот обычный код, а не в некоем выделенном пространстве, не имеющем ничего общего со всем остальным. Поэтому мы решили поэкспериментировать.

Используя Kactus и некоторые собственные скрипты для Node, мы пробовали делать коммиты файлов Sketch в репозиторий руководства по стилю.

Kactus, показывающий git diff для файла Sketch

Технически мы могли достичь того, чего хотели, но, к нашему сожалению, нам не удалось наладить нужный нам рабочий процесс. Возможно, у кого-то ещё это получится, но нам это не подошло. Дело тут в том, что и при таком подходе поддержка синхронизации кода и материалов дизайна оказалась исключительно утомительным занятием, этот процесс был подвержен ошибкам, его результаты было сложно проверить.

Однако, тот факт, что файлы с кодом и Sketch-файлы можно было содержать в одной и той же системе контроля версий, привёл к более ясному пониманию стоявшей перед нами проблемы, хотя в разрешении самой проблемы он нам и не помог. Более того, при использовании подхода с системой контроля версий тому, кто согласовывал руководство по стилю с кодом, приходилось выполнять множество вспомогательных действий. Издержки времени и сил оказались несопоставимыми с возможными преимуществами, ценность которых пока ещё была под вопросом. Как результат, работу над Sketch-файлами скоро забросили. Эксперимент мы признали неудачным.

Мы уже практически потеряли надежду на успех, уже были готовы признать, что свести разработчиков и дизайнеров в одном рабочем пространстве мы не сможем, как появился проект html-sketchapp, который изменил абсолютно всё.

Html-sketchapp

Как оказалось, не только нас беспокоили проблемы, касающиеся интеграции react-sketchapp в существующий стек технологий. Вот что об этом пишет Конрад Джвинел из компании Brainly: «Мы не смогли быстро преодолеть эти ограничения, поэтому мы и создали html-sketchapp».

В html-sketchapp предпринят совершенно другой подход.

Результаты работы html-sketchapp

Как можно понять из названия этого проекта, html-sketchapp позволяет генерировать Sketch-файлы из обычного HTML-контента, но, в отличие от react-sketchapp, тут нет ограничений на выбор технологий, с использованием которых подготовлен этот контент.

Веб-проекты, с которыми способен работать html-sketchapp, можно создавать с помощью Preact, или Vue, или Angular, или Backbone, или jQuery, или даже с помощью Ruby или PHP.

Никто не возбраняет использовать и React, но теперь приложение можно стилизовать так, как хочется разработчику, применяя любые подходящие примитивы.

Требования к проекту, который можно было бы обработать с помощью html-sketchapp, были невероятно просты: если имеется HTML-страница — её можно импортировать в Sketch.

Генерирование Sketch-файлов

На первый взгляд то, что делал html-sketchapp казалось чем-то невероятным, но когда мы взглянули на его внутренние механизмы, мы быстро обнаружили, что всё это, на самом деле, не так уж и сложно.

Для того чтобы понять, как работает html-sketchapp, сначала нужно разобраться с форматом файла Sketch. Пожалуй, для кого-то может стать неожиданностью то, что Sketch-файлы, на самом деле, являются обычными Zip-файлами.

Sketch-файл, открытый как файл архива

После распаковки Sketch-файлов как обычных архивов, можно выяснить, что они, в основном, состоят из JSON-файлов, которые, конечно, можно открыть в любом, совершенно обыкновенном, текстовом редакторе.

JSON-файл из Sketch-файла, открытый в текстовом редакторе

Если взглянуть на содержимое этих файлов, можно увидеть, что их формат сравнительно прост, в основном они состоят из небольших блоков вложенных классов.

На самом низком уровне, html-sketchapp позволяет программно генерировать экземпляры этих классов и конвертировать их в JSON. Но он идёт гораздо дальше, не ограничиваясь этими действиями.

Пожалуй, самая мощная функция html-sketchapp — это nodeToSketchLayers. Она даёт возможность конвертировать браузерные элементы в массивы слоёв Sketch. Именно здесь и происходит львиная доля таинства, так как тут содержится вся логика по извлечению браузерных стилей и по преобразованию их в их эквиваленты Sketch.

После подготовки исходных материалов в дело вступает класс SymbolMaster, который собирает всё воедино и динамически генерирует символы Sketch. Символы — это основы любой библиотеки Sketch, а значит, найдя путь между HTML и Sketch, мы можем, обрабатывая выведенные в браузер компоненты React, формировать то, что нужно дизайнерам.

К сожалению, из-за некоторых ограничений в текущем формате Sketch, касающихся того, как кодируются стили текста, сгенерированный документ получается не вполне действительным Sketch-файлом — в html-sketchapp такие файлы называют Almost Sketch (почти Sketch-файлы), или, для краткости — asketch. Такие файлы нужно вручную импортировать с помощью соответствующего плагина. Но, к счастью, этот процесс не слишком сложен.

Поначалу задача связать всё это воедино казалась неподъёмной, но случилось так, что на GitHub уже был демонстрационный проект, показывающий процесс преобразования существующего руководства по стилям в документ Sketch.

Как только мы его обнаружили, мы практически сразу же приступили к экспериментам. В итоге результаты, которые нас просто потрясли, были получены на удивление быстро.

Эксперименты с html-sketchapp

Сначала мы решили самостоятельно выяснить возможности html-sketchapp и «скормили» ему домашнюю страницу веб-сайта нашего руководства по стилям.

Вот твит, это демонстрирующий.

Результаты обработки страницы с помощью html-sketchapp

Далее мы начали генерировать наши первые символы из компонента Button, отрендерив несколько различных вариантов этого компонента.

Вот как выглядела HTML-страница с компонентом.

HTML-страница с выведенным на ней компонентом

А вот что у нас получилось.

Результаты обработки страницы с помощью html-sketchapp.

Для того чтобы подобного достичь, мы придумали специальный JavaScript-файл, который добавляется в папку каждого компонента (например — Button.sketch.js). Подобные файлы определяют символы, которые мы хотели бы экспортировать.

Каждый файл экспортировал бы объект, задающий имя символа и соответствующие ему элементы React.

import React from 'react';
import Button from './Button';
export const symbols = {
  'Button/Pink': <Button color="pink">Button</Button>,
  'Button/Blue': <Button color="blue">Button</Button>,
  'Button/Transparent': <Button color="transparent">Button</Button>,
};

Затем мы создали особый скрытый маршрут на сайте руководства по стилю, который импортировал любой файл, оканчивающийся на . sketch.js и рендерил соответствующие ему элементы React на экране. Поступая так, мы получили возможность значительно упростить процесс преобразования, выводя всё, что нужно для Sketch, на одной странице.

Экземпляр каждого символа был обёрнут в элемент div, в атрибуте data которого было задано имя этого символа, что позволило нам упростить выбор и именование символов на странице.

<div data-sketch-symbol="Button/Pink">
  ...
</div>

Этот шаблон доказал свою чрезвычайную эффективность, и скоро мы расширили его так, чтобы он включал текстовые стили и цвета документа.

Описание текстовых стилей

Текстовые стили

Описание цветов

Примеры цветов на веб-странице

Импортированные цвета

Наше руководство по стилям было отзывчивым, поэтому мы автоматизировали процесс изменения размеров окна браузера и делали снимки символов при различных размерах экрана.

Настройки окна браузера

Текстовые стили в Sketch

Элементы дизайна в Sketch

Это дало нам удобную возможность добавлять, удалять и переименовывать размеры окон, работая с одним файлом. Символы генерировались для каждого необходимого размера окна.
После того, как нам удалось достичь всего того, о чём мы только что рассказали, у нас возникло ощущение, что мы решили казавшуюся нерешаемой проблему, которая касалась поддержки отзывчивого дизайна в Sketch.

Всё это работало на удивление хорошо, хотя нам всё же понадобилось кое-что доработать, в частности, то, что касалось поддержки Sketch. Напоминало это то, как обычно организовывают поддержку браузера, в котором есть ошибки.

От экспериментов к продакшну

То, что началось как не особо масштабный эксперимент, быстро превратилось в нечто вроде мини-фреймворка.

Нам не потребовалось слишком много времени для интеграции html-sketchapp и всех связанных с этим проектом наработок в наше руководство по стилям. Подготовка свежего варианта руководства по стилям теперь выполнялась как как часть стандартного процесса сборки.

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

Для того, чтобы сгенерировать библиотеку для Sketch, нужно было выполнить следующие шаги:

• Компиляция браузерного скрипта с помощью webpack. Туда должны были входить html-sketchapp и код для выбора и преобразования элементов.
  
• Запуск статического веб-сервера на любом доступном порту.
  
• Запуск Puppeteer (это браузер Chromium без пользовательского интерфейса).
  
• Переход по заданному URL.
  
• Внедрение скомпилированного скрипта в работающий экземпляр Puppeteer.
  
• Создание, с помощью функций из скомпилированного скрипта, снимков элементов с использованием каждого из заданных размеров экрана.
  
• Запись полученных JSON-файлов на диск.
  
• Остановка статического веб-сервера.
  
• Остановка браузера.
  

Этот процесс мы тоже хотели автоматизировать. Нам казалась совершенно естественной возможность выполнения всего этого одной командой, которой достаточно было бы просто передать нужный URL. Вот что у нас, в результате, получилось.

Html-sketchapp-cli

Меньше чем через месяц после того, как мы интегрировали html-sketchapp в систему формирования нашего руководства по стилям, мы перевели в разряд опенсорсных проектов html-sketchapp-cli — маленькую утилиту командной строки, которая позволяла автоматизировать вспомогательные операции.

Теперь всё, что нам было нужно для формирования руководства — одна зависимость и простой конфигурационный файл.

module.exports = {
  serve: 'docs/dist',
  url: '/sketch-exports',
  outDir: 'dist/asketch',
  viewports: {
    'Desktop': '1024x768',
    'Mobile Plus': '414x736',
    'Mobile': '320x568'
  }
};

Кроме того, использование html-sketchapp-cli позволило убрать много кода.

Результаты внедрения html-sketchapp-cli

Дизайн как непрерывный процесс

Все эти инструменты теперь являются частью нашей обычной работы. Изменения, вносимые в стили разработчиками, очень быстро попадают к дизайнерам.

После каждой успешной сборки руководства по стилям мы не только автоматически разворачиваем наш сайт на страницах GitHub (используя gh-pages) и публикуем библиотеку компонентов в npm (используя semantic-release) — теперь мы, всё так же автоматически, генерируем те самые «почти Sketch-файлы», готовые к импорту в нашу официальную библиотеку Sketch.

Эта Sketch-библиотека затем распространяется, посредством общего диска, среди членов команды дизайнеров. А это означает, что у наших дизайнеров всегда есть актуальная копия библиотеки, которая синхронизируется с их текущим проектом в реальном времени, даже при открытом редакторе Sketch.

Благодаря новой встроенной поддержке библиотек Sketch, дизайнеры могут открывать меню SEEK Style Guide Library и выбирать нужные им компоненты, зная, что соглашения по именованию и визуальные стили соответствуют ожиданиям разработчиков.

Рабочее место дизайнера

С тех пор, как мы внедрили этот механизм, мы видим как изменения, внесённые в код, непрерывно поступают в Sketch, при этом иногда у тех, кто вносит эти изменения, даже нет установленного Sketch. Так как руководство по стилям подключено к работающим приложениям, стили постоянно улучшаются людьми из всей организации, и теперь мы может быть уверены в том, что все эти изменения попадают в библиотеку Sketch, постоянно поддерживая её в актуальном состоянии.

Технически разработчики и дизайнеры всё ещё работают в разных средах, но мы упорно работаем над тем, чтобы сблизить их ещё сильнее.

Итоги

Каким бы значительным ни было всё то, о чём шла речь, для нас это лишь промежуточное решение. Перенос данных с веб-страниц в Sketch — это очень мощная возможность. Это — большой шаг вперёд на пути к унифицированной среде разработки, но нам, да и всей индустрии веб-разработки, необходимо двигаться дальше.

Граница между разработчиками и дизайнерами может становиться всё более размытой, но инструменты дизайна будущего должны полностью стереть эту границу. Для того, чтобы воспользоваться этим потенциалом, нужны такие инструменты дизайна, которые не имитируют, пусть и довольно точно, целевую среду. Нам нужны инструменты, которые сами созданы на основе этой среды.

К счастью, в мире нет недостатка в людях, прямо сейчас работающих над проблемой универсальных сред разработки и дизайна. Инструменты вроде Compositor, Interplay, Alva, Haiku, Webflow и UXPin нацелены на то, чтобы сломать стены между инструментами дизайна и лежащим в основе веб-проектов коде. Мы полагаем, что появления ещё большего количества таких инструментов долго ждать не придётся.

Как знать, может быть мы даже увидим, как и более традиционные инструменты дизайна внедряют подобный подход для того, чтобы не терять актуальности, в особенности учитывая то, что дизайн-системы всё чаще становятся обычной частью набора инструментов современного дизайнера.

Тем временем, пока мы ждём появления новых инструментов дизайна, в которых будут реализованы принципы, двигающие вперёд индустрию, проекты вроде react-sketchapp и html-sketchapp уже сегодня готовят нас к новым подходам в дизайне и разработке, развивают в нас новое мышление.

Честно говоря, сейчас удивительно подходящий момент для того, чтобы начать воспринимать веб-дизайн по-новому.

Уважаемые читатели! Применяете ли вы react-sketchapp или html-sketchapp в своих проектах?

Загрузить последние обновления программного обеспечения Sketch · Sketch

Что нового

• Аннотации В этом выпуске в приложение Mac добавлены аннотации. Теперь вы можете прикрепить комментарий к любой точке холста и завязать разговор там, где это важно. Независимо от того, работаете ли вы в веб-приложении или в приложении для Mac, все ваши комментарии и разговоры будут синхронизированы. Хотите скрыть аннотации и сосредоточиться на своих проектах? Просто нажмите ⌃ N .
• Импорт файлов Figma Мы рады представить эту долгожданную функцию: теперь вы можете открывать файлы .fig в Sketch! Эта функция доступна в бета-версии, поэтому вы можете столкнуться со странной проблемой (например, наш механизм рендеринга текста обрабатывает вещи иначе, чем Figma). Если вы это сделаете, сообщите нам, и мы все исправим — ваш отзыв поможет сделать импортер еще лучше.
• Шаблоны рабочей области Теперь вы можете превратить любой документ в шаблон, который может использовать любой в вашей рабочей области — идеальный вариант для повторяемых проектов и сохранения согласованной структуры документов. Мы также добавили подборку красивых бесплатных шаблонов, которые помогут начать ваш следующий проект. Вы найдете их все в окне Workspace ( ⌘ О ).
• Библиотеки документов Теперь вы можете включить библиотеки для определенного документа вместо того, чтобы включать их для каждого документа, над которым вы работаете, даже если они вам не нужны. Когда вы открываете документ, мы автоматически устанавливаем все доступные для него библиотеки. Чтобы управлять библиотеками документов, перейдите в Файл > Настройки документа… > Библиотеки из любого документа.
• Улучшения Smart Layout Мы усердно работаем над улучшением Smart Layout! В этом обновлении вы обнаружите, что направления справа налево и снизу вверх теперь ведут себя точно так же, как их обратные аналоги (слева направо и сверху вниз). Когда вы скрываете вложенные экземпляры Symbol, мы теперь сохраняем и удаляем интервалы более надежным и предсказуемым образом. Наконец, мы внесли несколько изменений, которые делают работу с Smart Layout во вложенных макетах более плавной. Ожидайте дальнейших обновлений в ближайшее время!

Что изменилось

• Обновите Sketch Runner до последней версии (1.2.2). Версия 1.2.1 помечена как несовместимая со Sketch 95.
• Плагин Sympli версии 1.3.24 помечен как несовместимый со Sketch 95.1
• Чтобы обеспечить совместимость с macOS Ventura, мы переименовали окно и пункт меню «Настройки» приложения. — теперь он называется «Настройки». Вы по-прежнему можете получить доступ к настройкам, нажав ⌘ , .
• В начале 2023 года старое приложение «Зеркало» будет прекращено, но вы по-прежнему сможете использовать наше новое приложение для iPhone. Running Mirror теперь будет отображать предупреждение о поэтапном отказе, а также ссылку на более подробную информацию.

Что улучшено

• Если поиск документа не дал результатов, вы увидите сообщение «Документы не найдены».
• Мы улучшили производительность рендеринга в потоках прототипов.
• Если функция Pixel Fitting отключена, всплывающие подсказки Canvas теперь всегда будут отображать два десятичных знака. Если во время настройки линий включена функция Подгонка пикселей, значение длины строки во всплывающей подсказке больше не будет колебаться, поскольку оно чередуется между целыми и десятичными числами.
• Мы улучшили производительность рендеринга, переключив нашу архитектуру на один граф сцены для каждого документа, обновляемый для каждого кадра рендеринга.
• В текстовых слоях поля «Ширина» и «Высота» в Инспекторе теперь отражают, является ли ваш текстовый слой «Автошириной», «Авто-высотой» или «Фиксированным размером». Их значения являются заполнителями, поэтому вы все равно можете ввести свои собственные фиксированные значения.
• Знаете ли вы, что при использовании инструмента «Текст» ( T ) вы можете щелкать другие текстовые слои, чтобы редактировать их? Мы сделали это более заметным — теперь, когда инструмент «Текст» активен, вы увидите подчеркнутое состояние наведения при наведении курсора на другие текстовые слои.
• Поля выбора для скрытых объектов теперь заштрихованы, чтобы их было легче отличить от видимого слоя в том же месте.
• Теперь вы можете управлять настройками общего доступа к документам и проектам в рабочей области: приглашать других, делать документы общедоступными или изменять разрешения на загрузку, проверку и комментирование. В окне Workspace щелкните документ или проект правой кнопкой мыши и выберите Share… . Во время редактирования документа выберите File > Share… — или щелкните дополнительное меню ⋯ выше Сотрудничество и выберите Поделиться документом… .
• Мы увеличили область действия для угловых маркеров изменения размера с 6 x 6 до 12 x 12 пикселей на дисплеях с высокой плотностью, чтобы их было легче захватывать. Видимый размер ручек не изменился.
• Мы изменили видимость маркеров на холсте, когда вы выбираете объект внутри аккуратной группы, что дает вам лучшую обратную связь о ваших действиях. При наведении указателя мыши на любой маркер Smart Distribute маркеры углового радиуса исчезают. Когда вы захватываете дескриптор Smart Distribute, все остальные дескрипторы исчезают. При наведении курсора на маркер углового радиуса все маркеры Smart Distribute исчезают.
• Теперь вы можете определить, что должен делать Sketch каждый раз, когда вы распределяете слои, но невозможно сделать это равномерно на полных пикселях. Вместо того, чтобы спрашивать каждый раз, установите флажок Больше не спрашивать в предупреждении, которое вы можете снова изменить через Эскиз > Настройки… > Слои в настройке «При распределении». Это применимо только в том случае, если включена функция Pixel Fitting.

Что исправлено

• Исправлена ​​ошибка, из-за которой элементы управления «Подчеркивание текста» и «Переопределение зачеркивания» не отображали одинаковое состояние между свойствами «Холст», «Инспектор» и «Стиль текста».
• Исправлена ​​ошибка, из-за которой эмодзи с тенью могли неправильно отображаться в текстовом слое.
• Исправлена ​​ошибка, из-за которой в некоторых случаях элемент управления «Сбросить переопределения» отображался постоянно, даже если переопределения не применялись. Сброс состояний должен решить эту проблему.
• Устранена проблема с переопределенным текстом на холсте, из-за которой замена символа на другой размер не обновлялась должным образом. Теперь это работает, как и ожидалось, но вам может потребоваться сбросить все переопределения, которые ранее находились в неправильном состоянии.
• Исправлена ​​ошибка, из-за которой обрезка изображения с прикрепленным цветовым профилем P3 приводила к потере профиля после обрезки.
• Исправлена ​​ошибка, из-за которой текст внутри символа не масштабировался, если для выбора этого слоя использовалось нажатие клавиши Command или двойной щелчок.
• Исправлена ​​ошибка, из-за которой переопределение цвета не отображалось в Инспекторе после переопределения стиля слоя.
• Исправлена ​​ошибка в Инспекторе, из-за которой изменение цвета в переопределениях не обновлялось сразу.
• Исправлена ​​ошибка, из-за которой текст, используемый в качестве маски, мог вызывать растекание цвета текста по краям содержимого маски.
• Устранена проблема, из-за которой активация инструмента «Текст» и наведение курсора на текстовый слой внутри группы приводили к неправильному положению выделения при наведении.
• Устранена проблема, из-за которой при выборе текстовых слоев внутри экземпляров символов значения ширины и/или высоты не отображались в Инспекторе.
• Исправлена ​​ошибка, из-за которой изменение положения текста на пути могло оставить артефакты рисования на холсте.
• Исправлена ​​ошибка, из-за которой уменьшение размера файла приводило к тому, что некоторые изображения растягивались и теряли соотношение сторон.
• При экспорте одного слоя с альфа-маской эффект маски теперь включается в результат, а не экспортируется вообще.
• При вводе новых значений ширины или высоты для текстового слоя с автоматической шириной ограничивающая рамка вокруг текущих размеров слоя теперь остается видимой.
• Устранена проблема, из-за которой некоторые маркеры изменения размера в инструменте «Масштаб» выглядели темнее, чем должны быть.
• Исправлена ​​ошибка, из-за которой клавиши со стрелками не работали, если курсор находился над кнопками выравнивания на вкладке «Дизайн» инспектора.
• Исправлена ​​ошибка, из-за которой редактирование слоя за размытым фоном могло привести к визуальным несоответствиям на холсте.
• Исправлена ​​ошибка, из-за которой область попадания для маркеров углового радиуса на холсте могла быть неправильной.
• Холст больше не меняет положение, когда вы скрываете боковую панель или панель инструментов.
• Устранена проблема, из-за которой маркировка углов X не адаптировалась к системному акцентному цвету для выбранных объектов внутри экземпляров Symbol.
• Устранена проблема при изменении размера слоя, из-за которой всплывающая подсказка, показывающая размеры слоя, мгновенно исчезала при нажатии.
• Мы исправили визуальный дефект в курсоре вращающейся формы.
• Теперь приложение будет отображать ошибку при попытке экспортировать изображение WebP, размер которого превышает поддерживаемый форматом максимальный размер в пикселях (16383 x 16383).
• Исправлена ​​ошибка, из-за которой перетаскивание слоя из списка слоев приводило к неожиданным результатам. Теперь простое перетаскивание на холсте всегда будет создавать точную копию слоя и PNG при перетаскивании в Finder или другое приложение. Использование перетаскивания с нажатой клавишей Option создаст растровое изображение при перетаскивании слоя на холст и PDF-файл при перетаскивании в Finder или другое приложение, например Keynote или Illustrator.
• Устранена проблема, из-за которой фиксированные слои в прототипах масштабировались на экранах, отличных от Retina.
• Устранена проблема, из-за которой при перестановке объекта с помощью функции «Умное распределение» в множественном выборе поле выделения вокруг множественного выбора подстраивалось под изменяемый объект.
• Исправлена ​​ошибка, из-за которой Инспектор не отображал все настройки наложения после копирования и вставки монтажной области наложения.
• Устранена проблема, из-за которой маркеры прототипирования на холсте оставались видимыми после переключения на вкладку «Дизайн» в Инспекторе.
• Устранена проблема, из-за которой при наведении курсора на объект в режиме множественного выбора не отображалось выделение, чтобы сделать его эталонным объектом выравнивания.
• Устранена проблема, из-за которой при выборе элемента внутри аккуратной группы центральные маркеры перестановки временно исчезали, создавая эффект мигания.
• Устранена проблема, из-за которой маркеры углового радиуса иногда не отображались для повернутых прямоугольников.
• Исправлена ​​ошибка, из-за которой прототип не обновлял ссылки после изменения цели взаимодействия.
• Устранена проблема, из-за которой комбинированные фигуры, содержащие один линейный слой, не отображали поле выбора и не могли вращаться.
• Исправлена ​​ошибка, из-за которой, если источник символов содержал символ с измененным размером, замена этого вложенного символа в экземплярах не учитывала этот размер.
• Устранена проблема, из-за которой использование инструмента «Преобразование» для сгруппированных фигур могло неожиданно преобразовывать и перемещать фигуру при использовании угловых маркеров.
• Устранена проблема при использовании инструмента «Монтажная область», из-за которой список шаблонов монтажной области не отображался, если Инспектор был скрыт.
• Исправлена ​​ошибка, из-за которой пунктирные границы меняли положение при преобразовании в контуры.
• При использовании текста по ширине выравнивание последней строки в абзаце теперь будет соответствовать направлению письма вашего языка (слева направо или справа налево). Чтобы изменить направление письма, выберите Текст > Обратное направление письма в строке меню.
• Отображение или скрытие интерфейса частично (боковая панель, Инспектор, линейки и панель инструментов) или полностью теперь влияет только на текущее окно, а не на другие окна.
• Исправлена ​​ошибка, из-за которой можно было редактировать шестнадцатеричное значение заливки с помощью переменной цвета.
• Устранена проблема, из-за которой вставка символов могла не разместить их на полных пикселях, даже если была включена подгонка пикселей.
• Исправлена ​​ошибка, из-за которой вы не могли управлять переопределениями, принадлежащими вложенному символу, если их родитель не был специально выбран. Отныне вы будете видеть каждое переопределение с самого начала в разделе «Управление переопределениями».
• При перетаскивании слоя из списка слоев теперь всегда создается чистая и точная копия исходного слоя и игнорируются любые параметры экспорта, включая префикс/суффикс, размер или тип растрового изображения.

Что нового в Sketch — последние обновления и функции · Sketch

Откройте для себя новейшие функции в наших приложениях для Mac, Интернета и iPhone.

Все Мак Интернет iPhone

Открыть

• Примечания к выпуску для Mac
• Новостная лента

0 новое с момента вашего последнего посещения

1. 00:00 / 00:00

   Аннотации в приложении Mac

   • приложение для Mac

   00:00 / 00:00

   Поприветствуйте аннотации на Mac! Поделитесь своими отзывами и мыслями прямо в контексте ваших проектов во время разработки. Теперь, независимо от того, где вы комментируете или отвечаете, ваши разговоры всегда будут синхронизированы.

   Ранее видел

2. 00:00 / 00:00

   Шаблоны

   • приложение для Mac

   00:00 / 00:00

   Теперь вы можете превратить любой документ в шаблон, который смогут использовать все в вашем Workspace — идеальный вариант для повторяющихся задач или создания согласованных настроек документов. Мы также добавили множество красивых, бесплатных и настраиваемых шаблонов — от презентаций и сообщений в социальных сетях до макетов и визитных карточек — чтобы помочь вам начать ваш следующий проект. Проверьте их в окне Workspace ( ⌘ О ).

   Ранее видел

3. Импорт файлов Figma в Sketch

   • приложение для Mac

   Теперь вы можете открывать файлы Figma в Sketch! Просто перейдите в Файл > Открыть локальный документ ( ⇧ ⌘ O ) и выберите файл . fig или перетащите его на значок Sketch в Dock, а мы сделаем все остальное.

   Ранее видел

4. 00:00 / 00:00

   Smart Layout: лучшая направленность

   • приложение для Mac

   00:00 / 00:00

   Мы усердно работаем над улучшением Smart Layout, и в этом обновлении вы обнаружите, что направления справа налево и снизу вверх теперь ведут себя точно так же, как их обратные аналоги (слева направо и сверху вниз).

   Ранее видел

5. 00:00 / 00:00

   Smart Layout: более предсказуемый и надежный

   • приложение для Mac

   00:00 / 00:00

   При скрытии вложенных экземпляров Symbol мы теперь сохраняем и удаляем интервалы более надежным и предсказуемым образом. Следите за обновлениями!

   Ранее видел

6. 00:00 / 00:00

   Библиотеки документов

   • приложение для Mac

   00:00 / 00:00

   Когда вы работаете с большим количеством библиотек, в таких местах, как окно «Вставка», может быть немного тесно. Так что теперь вы можете просто включить библиотеки, которые вам нужны для определенных документов, оставив только те компоненты, которые вам нужны. Лучше всего? У любого, кто откроет документ, эти библиотеки будут автоматически установлены и доступны.

   Ранее видел

7. 00:00 / 00:00

   2022 — вот и все!

   • приложение для Mac
   • Веб-приложение
   • приложение для айфона

   00:00 / 00:00

   В этом году мы усердно работали над новыми функциями, чтобы дать дизайнерам и окружающим их людям лучшие и более быстрые способы создавать свои лучшие работы. Но если вы не используете Sketch каждый день, возможно, вы пропустили некоторые из наших крупных релизов. Итак, вот краткий обзор некоторых из самых крутых улучшений, которые мы добавили в Sketch за последние 12 месяцев.

   Ранее видел

8. 00:00 / 00:00

   Улучшенный символ переопределяет

   • приложение для Mac

   00:00 / 00:00

   Познакомьтесь с улучшенными переопределениями символов в последнем обновлении Sketch. Мы изменили дизайн панели «Инспектор», чтобы сгруппировать переопределения по типу, чтобы быстрее просматривать и изменять такие вещи, как цвета, текстовые значения, стили и вложенные символы, а также свойства шрифта. Чтобы упростить задачу, теперь вы можете дважды щелкнуть, чтобы погрузиться в экземпляры символов и выбрать отдельные слои внутри.

   Ранее видел

9. 00:00 / 00:00

   Переопределение цвета

   • приложение для Mac

   00:00 / 00:00

   Придумывайте идеи и тестируйте быстрее с переопределением цвета. Будь то заливка, граница, тень или текстовый слой — вы можете переопределить его цвет или переменную цвета в Инспекторе. Кроме того, теперь вы можете просматривать все свои цвета в виде сетки или списка и наводить на них курсор, чтобы получить полезную информацию, например имена или шестнадцатеричные значения.

   Ранее видел

10. 00:00 / 00:00

    Текстовое свойство переопределяет

    • приложение для Mac

    00:00 / 00:00

    В последней версии Sketch мы улучшили работу текстовых слоев с переопределениями.