Как открыть файл скетч в фигме

Обновлено: 03.07.2024

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

В этом материале мы сравним кроссплатформенный редактор Figma и приложение для работы с векторной графикой Sketch.

История развития

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

«Скетч» — векторный редактор, который работает на платформе macOS и развивается с 2010 года. Версий для Windows или проектирования в браузере нет. Существует программа Lunacy от сторонних разработчиков, которая умеет открывать и вносить изменения в файлы .sketch.

Figma — онлайн-сервис с приложениями для компьютеров и мобильных устройств. Стал популярен благодаря кроссплатформенности и фишкам совместной работы. Разработчики начали создавать проект в 2016 году. За 3 года он не только смог догнать «Скетч» по возможностям, но и увёл значительную долю аудитории. «Фигма» привлекает пользователей удобством. Создал макет, создал ссылку на публичный просмотр и отправил клиенту. Много пространства для работы в команде. В истории показывается, кто внёс изменения и версию всегда можно вернуть к предыдущему состоянию.

Стремительная популярность Figma стала возможной благодаря активной разработке и продвижению в социальных сетях. Популярные блогеры рекламируют инструмент, в интернете тысячи обзоров, в репозитории много плагинов для расширения функционала. Есть Adobe XD, InVision, Zeplin и другие аналоги, но «Фигма» оставляет конкурентов позади.

До сих пор кажется, что облачный редактор с комфортной работой в браузере — выдумка. Figma доказал реальность идеи. Дизайнеры со всего мира создают миллионы UI, делятся фишками с комьюнити и активно создают новые плагины. Развитие уже не остановить, и конкуренты отлично это понимают. Через 3-5 лет продвижения в аналогичном темпе в нише появится лидер и затмить его достижения будет нереально.

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

Возможности сервисов

Figma и Sketch из разных вселенных, но работают они по схожим принципам. «Фигма» доступен на macOS и Windows, а «Скетч» только на Mac.

Проектирование интерфейса

Базовые инструменты двух редакторов и процесс создания UI практически идентичны. Пользователь создаёт чистый холст, открывает панель и добавляет слои. Постепенно он наполняет страницу фигурами, кнопками, текстом, изображениями и прототип «оживает».

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

Панель инструментов, «дерево» слоёв и встроенный инспектор — главные модули двух редакторов, с которыми дизайнер проводит большую часть времени. Они помогают создать интерфейс, обеспечивают навигацию и дают подробную информацию о свойствах элемента.

Ключевое отличие — принцип работы. Отредактировать макет в «Фигме» можно в любом браузере или на компьютере. «Скетч» работает только на операционной системе Apple и фирменных компьютерах Mac.

Инструменты редактирования и прототипирования

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

Элементы в Sketch и Figma привязываются к определённым артбордам, а интерактивное взаимодействие обеспечивается при наведении или клику. Фреймы в «Фигме» более гибкие.

Работа со стилями в Figma более удобная. Цвет можно конвертировать в стиль и применять к любому элементу: заливке, обводке, текстовому фрагменту. В Sketch этот механизм реализован неудобно.

История версий

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

«Фигма» учитывает историю редактирования. На бесплатном аккаунте она доступна в течение 30 дней. То есть, дизайнер может просмотреть изменения за месяц. Если перейти на платный тариф, разблокируется полный журнал.

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

Управлять версиями в Figma удобно. Для каждого элемента списка можно задать имя и подробное описание. Сделайте процедуру частью творческого процесса, чтобы легко ориентироваться в version history. Это актуально для всех дизайнеров, так как заказчики часто просят вернуть блок из предыдущего макета и хорошо, если у специалиста есть копия. Для «Фигмы» такой проблемы не существует. Разве что активен бесплатный тариф, и с момента внесения правок прошло больше месяца.

Импорт и экспорт

Разработчики Figma сделали всё, чтобы «надавить» на недостатки «Скетча» и привлечь аудиторию крутыми фишками. Команда понимала, что векторный редактор для macOS занимает лидирующую позицию и надо заинтересовать потенциальных клиентов.

Целевая аудитория Sketch — дизайнеры с компьютерами Apple. В десктопном приложении «Фигмы» есть функция сохранения проекта в файл. Если внезапно отключится интернет и синхронизация с сервером будет недоступна, выгрузка в локальный документ спасёт от потери данных.

Аналогичным образом работает импорт макетов из Sketch. Выбрали файл на компьютере и через несколько секунд доступно редактирование прототипа. «Фигма» совершила технологический прорыв и сделала переход из конкурирующего редактора максимально безболезненным. Конечно встроенные библиотеки компонентов из «Скетча» перетащить не получится, но это уже что-то.

Шаринг файлов

Сотрудничество с клиентами предполагает обмен файлами и версиями для предпросмотра UI. В Sketch есть нативная интеграция с облачными хранилищами. Сначала документ загружается в сервис и только потом ссылкой можно поделиться.

Команда Figma и здесь нашла гибкое решение. Пользователи могут не только распространять ссылки на live версию макета, но и отправлять готовые библиотеки компоненты. Создал новую команду, сделал общее пространство и открыл доступ. Логотипы, исходники и другие файлы собраны в одном месте.

Возможности:

Личное приглашение.
Публичная ссылка с разными правами.
Встраивание фрейма на сайт.

Совместная работа

Мы плавно подобрались к одному из главных критериев, который важен для дизайнеров. Коллективная разработка макета — стандартная задача. Создатели «Фигмы» решили не обходиться одним комментированием и внедрили масштабную систему.

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

Комментирование в Sketch доступно только после установки специального плагина. Это было круто до появления «Фигмы», а теперь выглядит как динозавр, который ещё не вымер, но уже никому не интересен.

Обратная совместимость

Sketch — десктопное приложение, которое как и Photoshop имеет зависимость от версий. Проекты, созданные на версии 51.0 могут полностью не открыться в 52.0. С «Фигмой» таких проблем нет. Редактор обновляется, возможностей становится больше, а проблем с совместимостью нет.

Анимация

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

В Figma есть функция «Smart Animation», которая создаёт плавные переходы между фреймами и различные эффекты. При наведении на кнопку появляется градиент и заливка, слои подгружаются с анимацией, блоки «оживают» благодаря технологиям. В Sketch существует плагин под эти задачи, но этого мало.

Производительность

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

При переходе на «Фигму» многие дизайнеры отмечают рост производительности. Они открывают десятки фреймов, быстро переключаются между ними и вносят изменения. При просмотре больших файлов в браузере нагрузка на оперативную память никуда не исчезает.

С функционалом сервисов разобрались. Теперь проанализируем юзабилити продуктов.

Удобство использования

Переход со «Скетча» или Adobe XD в «Фигму» пройдёт без трудностей, так как интерфейс и возможности проектирования очень похожи. А вот в альтернативной ситуации приспособиться к особенностям «Скетча» после Figma будет непросто.

Во-первых, надо иметь под рукой производительный Mac последних выпусков, который стоит как несколько обычных компьютеров. Во-вторых, на жестком диске должно быть достаточно места для хранения объёмных макетов. И не стоит забывать о проблеме совместимости.

Интерфейс — вопрос вкуса и привычки. Специалисты осваивают новые инструменты и решения, чтобы повысить продуктивность. Одни говорят, что им ближе Figma. Другие не воспринимают всерьез ничего кроме Sketch.

Плагины

Небольшие расширения, которые увеличивают возможности есть и в «Скетче», и в «Фигме. В первом случае библиотека состоит из пользовательских и официальных плагинов, которые доступны в репозитории. Для установки дополнения надо скачать его, ознакомиться с инструкцией разработчика и запустить на компьютере. Продукт автоматически добавится в Sketch и будет доступен в меню.

Figma придерживается концепции облачной платформы во всех аспектах. Плагины собраны в специальном разделе и устанавливаются в один клик. Архивы не надо загружать или распаковывать. Просмотрели список, нажали «Install» и пользуетесь. Функционал находится в стадии бета-тестирования, но уже сейчас в списке есть много крутых дополнений для автоматизации.

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

Тарифные планы

Бесплатный доступ к «Фигме» неограничен по времени. Пользователи могут создать 3 проекта и добавить 2 редакторов. Два платных тарифа продаются за 12 и 45 долларов в месяц. За эти деньги доступны командные библиотеки, полная история версий проектов, аналитика и закрытые плагины.

В «Скетч» доступно 2 варианта: персональная и корпоративная лицензии. В первом случае за 99 долларов дают доступ к программе, 1 год обновлений и 365 дней подписки на фирменный сервис Cloud. Для организаций цена зависит от количества подключенных устройств.

По стоимости оба инструмента находятся примерно на одном уровне. В «Фигме» выгоднее платить за год сразу.

Преимущества и недостатки

У любого программного обеспечения есть сильные и слабые стороны. Герои нашего обзора — не исключение.

Преимущества Sketch:

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

Недостатки:

совместимость только с macOS;
зависимость от ресурсов системы;
мало возможностей без плагинов.

Преимущества Figma:

совместная работа;
шаринг файлов;
кроссплатформенность;
высокая производительность;
стабильное обновление;
бесплатный тариф;
история версий.

Недостатки:

для использования нужен интернет;
проблемы с текстовыми слоями;
импорт файлов работает неидеально.

Редакторы будут постоянно сравнивать и всегда найдутся аргументы в пользу разных мнений, но одно можно сказать с уверенностью — они подходят для решения определённых задач. Если нужен полноценный инструмент под macOS — выбираем Sketch. Если не хочется уходить с Windows — устанавливайте Figma.

Обращайтесь в веб-студию IDBI за крутым веб-дизайном под ваши задачи. Мы следим за трендами, используем накопленный опыт и знаем, как создать идеальный UI под вашу целевую аудиторию.

Возможно, вы недавно услышали о Figma. Это веб-приложение (с гибридной нативной версией), цель которого – решить ту же проблему, которую решает Sketch: упростить и ускорить проектирование и прототипирование программного обеспечения.

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

Почему вы должны подумать о Figma

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

Когда речь заходит о Figma все сводятся к следующим двум аспектам:

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

Кроме того, вы можете поделиться файлом с правом только комментировать или только просматривать. Тот факт, что вам не нужно беспокоиться о версии файла, устраняет много проблем. В результате, если вы работаете в команде, Figma нет равных. Если в вашем проекте участвует кто-то, не работающий на Mac и Sketch, Figma – лучший выбор.

Что нужно знать, переходя со Sketch

В большинстве случаев Figma и Sketch невероятно похожи. Первоклассный интерфейс Sketch – первое, что покажется практически идентичным в Figma. Есть бесконечное рабочее пространство, слои находятся слева, контекстные свойства справа.

Первое, что вы захотите сделать – установить десктопное приложение.

Хотя это не «настоящее» нативное приложение, для реальной дизайнерской работы, оно все же лучше, чем браузерная версия. Фактически, несмотря на гибридную природу приложения, отличия в основном проявляются в способе обработки файлов и немного более длительном времени запуска.

Совет: вы можете настроить свой браузер на автоматическое открытие ссылок Figma в приложении. Если браузер не предлагает вам это сделать, нажмите кнопку меню и кликните «Open in desktop app».

Артборды и «фреймы»

В Sketch вы часто будете использовать «Артборды» для создания мини-холстов для экспорта по отдельности и с цветом фона на ваш выбор.

В Figma нет артбордов, и вы можете настраивать цвета фона и параметры экспорта для любого элемента, даже группы. Но в Figma ближайший аналог к артборду – это «фрейм». Фрейм действует, как область просмотра браузера, это означает, что, если вы измените размер фрейма, элементы внутри него будут масштабироваться в соответствии с их ограничениями и правилами масштабирования.

Фреймы по умолчанию «обрезают» содержимое внутри (применяют маску), и Figma поддерживает ряд предустановленных размеров для фреймов, чтобы соответствовать различным устройствам и размерам экрана. Поэтому фрейм позволит вам добиться того же, что и артборд в Sketch.

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

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

Совет: Если вы хотите изменить размер фрейма и не хотите искажать его содержимое, удерживайте клавишу ⌘ во время изменения размера.

Библиотеки и «активы»

В Sketch, как только вы создаете символ, сам символ перемещается на отдельную страницу «Символы», и появляется экземпляр символа, где вы его создали.

В Figma символы называются «Главные компоненты» (Master Components) и обозначаются иконкой с 4 маленькими ромбами. Экземпляры символов называются «Компоненты» и обозначаются большим ромбом.

Когда вы создаете новый главный компонент в Figma, он мгновенно появляется и сохраняется там, где вы его создали. К этому нужно привыкнуть, но, когда привыкните, сможете оценить функциональность компонентов Figma. Мы вернемся к этому аспекту позже.

Создайте новую страницу «Символы» (или назовите ее «Компоненты», что больше соответствует Figma).
Преобразуйте свой элемент в компонент (выберите его и нажмите ⌥⌘K).
Скопируйте новый компонент, затем вставьте его на место (⇧⌘V) – копия является экземпляром компонента.
Выберите главный компонент, кликните по нему правой кнопкой мыши и выберите «Move to Page» → Символы (или «Компоненты», если вы так называли страницу).

Поскольку в Figma нет стандартного места для хранения всех ваших символов, у нее есть альтернативный инструмент для поиска нужного элемента, который называется «Активы» (Assets). Это вкладка, которая находится в верхней части панели слоев. Она позволяет вам видеть упорядоченное представление сетки с возможностью поиска (вы также можете выбрать представление списка). Командные библиотеки – «опубликованные» файлы Figma, созданные для того, чтобы быть библиотеками компонентов – также будут отображаться здесь, и это отличный способ использовать библиотеки иконок.

Совет: Дважды кликните по иконке слоя, чтобы отцентрировать этот элемент на экране.

Обработка файлов

Хотя у Figma есть свой формат файлов (File → Save as .fig), основной способ совместной работы и обмена макетами Figma – ссылки. Нажмите синюю кнопку «Share» в правом верхнем углу. Вы обнаружите, что это похоже на Документы Google: вы даете доступ конкретным пользователям или доступ по ссылке.

Если вы привыкли сохранять для проекта несколько версий одного и того же файла Sketch, каждый раз увеличивая номер версии в имени файла, вы можете сделать это и в Figma: в браузере файлов нажмите кнопку с многоточием для проекта, и используйте опцию «Duplicate».

Однако есть лучший способ: сохранить копию текущего состояния в истории версий. Нажмите меню Figma в верхнем левом углу (⌘ /) и выберите File → Save to Version History (⌥⌘S). Это сохранит в истории все состояние файла Figma на этот момент. Позже вы можете просмотреть эту историю и восстановить старые версии. Старая версия, которая восстанавливается, добавляет новое состояние в историю версий, поэтому при восстановлении вы фактически не перезаписываете более новые версии. Если вам просто нужно скопировать элемент из старой версии, вы можете щелкнуть правой кнопкой мыши по нужному элементу и выбрать «Duplicate», чтобы получить отдельную версию этого состояния файла, потому что, к сожалению, вы не можете просто выбрать и скопировать элемент из прошлой версии вы можете только просматривать / восстанавливать / дублировать их.

Примечание: бесплатная версия Figma хранит только 30-дневную историю версий. Если вы хотите неограниченную историю версий, перейдите на платную версию.

Figma достаточно хорошо справляется с импортом файлов Sketch.
Начиная с последних версий, вы можете копировать и вставлять из Sketch непосредственно в Figma.
Вы можете копировать и вставлять векторные изображения прямо из Illustrator в Figma.
Вы можете перетаскивать SVG-файлы или изображения непосредственно в Figma, как в Sketch.
Вы можете скопировать PNG-файл прямо из браузера в Figma (щелкните правой кнопкой мыши, пункт «копировать картинку»).
Вы также можете скопировать SVG-файлы из своего браузера, но они преобразуются в растровые изображения. Если вы хотите импортировать в формате SVG, сохраните их на рабочем столе и перетащите в Figma.
Или вы можете скопировать разметку SVG напрямую и вставить ее в Figma.
Анимированные GIF-файлы не воспроизводятся в Figma.

Переопределение символов и компонентов

В Figma символы называются «Компонентами», и точно так же, как вы можете создавать переопределения символов в Sketch – аспекты символа, которые можно настраивать для каждого отдельного экземпляра – вы можете создавать переопределения компонентов в Figma.

В Sketch есть отдельная панель «Переопределений» на боковой панели свойств. Это позволяет создать очень удобный и привлекательный способ изменения свойств символа, таких как используемый значок или текстовая метка кнопки.

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

Скройте или «удалите» слой, чтобы переопределить видимость этого слоя в экземпляре компонента.
И наоборот, вы можете отобразить любой слой, который скрыт в главном компоненте. Например, у вас могут быть нейтральные, наведенные и сфокусированные состояния внутри одного компонента кнопки и скрытия или отображения каждого слоя в экземпляре, чтобы показать желаемое состояние.
Дважды кликните по текстовому полю, чтобы изменить текст.
Измените цвет компонента. Вы даже можете изменить эффекты. Вы можете их удалить, скрыть или изменить. Хотите тень на вашем экземпляре кнопки, но не в главном компоненте? Добавьте ее непосредственно к экземпляру. Или добавьте ее в главный компонент и по умолчанию скройте, а затем отобразите эффект в экземпляре.
Вы можете изменить экземпляр на другой символ. По умолчанию компоненты того же размера, что и экземпляр, отображаются как «Связанные компоненты» (Related Components). Это отличный способ поменять иконки.

Также есть кнопка для сброса любых созданных вами переопределений, это маленький ромб со стрелкой внутри:

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

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

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

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

Совет: щелкните правой кнопкой мыши по экземпляру компонента и выберите «Go to master component». Это полезно, если вам нужно изменить аспект повторно используемого компонента и применить его ко всем экземплярам, или, если вам нужно настроить ограничения масштабирования.

Слабые стороны Figma

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

ВFigmaнет официальной поддержки плагинов. Пока существует сторонний проект, вы, по сути, устанавливаете неофициальную копию Figma. В результате у вас не так много доступных плагинов. У Figma есть веб-API, который, как мы надеемся, однажды сможет то же, что и плагины в Sketch, но он все еще ограничен, есть только чтение API. Так что, если вы не можете жить без расширений, хорошенько подумайте.
Офлайн поддержка работает вSketchблагодаря локальным файлам. Чтобы иметь возможность работать в Figma с файлами в автономном режиме, вам нужно использовать нативное приложение и сначала открыть файл, прежде чем перейти в автономный режим.
Файловый браузерFigmaне поддерживает папки. Это плоская иерархия, и вам нужно искать файлы, которых нет в разделе «Recent». Все файлы, которые не были опубликованы, попадают в раздел «Drafts». Вы можете к этому привыкнуть, и это ничем не отличается от Google Docs, но это другой способ мышления, если у вас уже существует шаблон для организации своих файлов.
Вы не можете изменить размер вложенных элементов компонента. Как упоминалось в разделе переопределений, хотя вы можете создавать многократно используемые компоненты с использованием вложенности и умных ограничений, вы не можете изменять размер вложенных элементов. Это большой минус, когда вам нужно изменить размер кнопки внутри компонента, чтобы текст при этом вписывался в ее размер. Обходный путь – отсоединить родительский экземпляр, но это сделает некоторые компоненты менее пригодными для повторного использования. Этот момент обсуждается здесь.

Прочее

Изменение масштаба:

Удерживайте z и кликните мышкой, чтобы увеличить.
Удерживайте z и перетащите, чтобы увеличить область.
Удерживайте z и ⌥, чтобы уменьшить масштаб.
Удерживайте пробел для панорамирования.

Color Picker: Кликните по образцу цвета, затем используйте клавиши со стрелками ↑ и ↓, чтобы осветлить или затемнить цвет.

Панель свойств: вы можете выбрать заливку, обводку или эффект, щелкнув по пространству вокруг него. Затем вы можете скопировать его (⌘C) и вставить в любой другой символ или фигуру (⌘V), чтобы вставить скопированное свойство.

Группы: если вы удалите все элементы в группе, она исчезнет. Точно так же, если вы создаете текстовую область и ничего не пишете, она исчезнет. Никаких пустых групп!

Изображения: когда вы добавляете растровое изображение, оно действует как заливка внутри прямоугольника (например, background-image в CSS). Это позволяет легко применить маску к изображению, просто изменив размер прямоугольника. Меньше масок!

Встроенные базовые инструменты прототипирования. Чтобы начать, нажмите вкладку «Prototype» на панели свойств.

Рисование векторной графики в Figma создает «сети», в которых одна точка может иметь несколько соединений, а не только две, как в Sketch или Illustrator. Нужно к этому привыкнуть, но на практике это работает довольно хорошо, безусловно, лучше, чем в Sketch.

Вы можете скопировать код для внешнего вида любого элемента, выбрав вкладку «Code» на панели свойств. Она предоставляет синтаксис для CSS, iOS и Android. По общему признанию, эта функция находится в зачаточном состоянии, но, безусловно, это отличный маленький плюс.

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

Стоит ли переключаться на Figma?

На момент написания этой статьи, нельзя реально предположить, что Figma лучше, чем Sketch, как и наоборот. Оба приложения имеют свои сильные и слабые стороны, и тот факт, что они сосуществуют, означает, что на рынке присутствует здоровая конкуренция, которая принесет пользу обоим. На самом деле, некоторые из основных причин использования Figma (работает в браузере, отлично подходит для совместной работы) в той или иной форме в 2019 году уже относится и к Sketch. Зная это, стоит ли менять рабочий инструмент?

Вам следует рассмотреть возможность перехода на Figma, если сильные стороны (в том числе сообщество) перевешивают недостатки (изучение нового инструмента, отсутствие поддержки плагинов).

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

Sketch – это замечательное приложение, и если оно вам подходит, оставайтесь с ним. Если вы действительно хотите переключиться на Figma, не делайте этого, если вам нужно выполнить проект в сжатые сроки, потому что, хотя кривая обучения при переходе из Sketch невелика, она все-таки есть. Вместо этого, когда у вас будет время, прочтите учебные руководства. А затем переключайтесь на новый инструмент, когда будете готовы. Я надеюсь, что эта статья помогла вам с выбором инструментов дизайна!

Переход на другой инструмент – это не то решение, к которому следует относиться легкомысленно. В этой статье представлен опыт Help Scout по переносу дизайн-системы из Sketch в Figma: почему мы поменяли рабочий инструмент, пошаговое описание процесса, и его последствия. Этот опыт применим к любой команде, обдумывающей масштабную миграцию с одного инструмента на другой.

В прошлом году, всякий раз, когда я разочаровывался в Sketch, мой коллега предлагал мне попробовать Figma. Затем, когда я написал статью о построении нашей дизайн-системы в Sketch, я получил множество отзывов от людей, рекомендовавших мне попробовать Figma. А недавно Линда – глава отдела дизайна в Help Scout, спросила меня: «Эй, Базз, может нам следует использовать Figma?»

Я больше не мог с этим бороться… Я просто должен был попробовать Figma!

99% практики, реальные задачи от крупных компаний страны и шанс попасть на работу мечты.

Это не признание в любви к Figma или критика в адрес Sketch. Это предостережение для тех, кто подумывает о смене инструментов. Это история об особенностях миграции дизайн-системы с одной платформы на другую.

Понимание стоимости

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

Для Help Scout трудность заключалась в том, что наша дизайн-система построена, как несколько взаимозависимых библиотек Sketch, управляемых с помощью GitHub. У нас также есть несколько проектов, процессов и обширной документации, которые зависят от файлов Sketch. И не забудьте о грандиозных усилиях, связанных с обучением и переводом всей команды на новый инструмент, одновременно выполняя текущую работу!

Развитие дизайн-системы Help Scout через GitHub

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

Достаточно сказать, что это решение было не легко принять.

Прощупайте почву

Понимая, что мое решение окажет влияние на всю команду и компанию, я начал с того, что потратил два полных дня на изучение Figma. Я смотрел видео, общался с другими дизайнерами, которые часто ее используют, и я играл с ней… очень много! По сути, я исследовал насколько легко было бы переместить наши Sketch-компоненты. Возник вопрос: будет ли это так же просто, как открыть в Figma файл с расширением. sketch?

Неудивительно, но ответ нет.

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

Слишком сложно? Да. Но это отлично работало для нас.

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

Превью того, как мы добавили в Sketch переопределения уровня Figma

Хотя подобная сложность в Sketch позволила нам достичь уровня гибкости, который Figma предлагает «из коробки», это означало, что практически любой компонент, импортированный из Sketch, принес с собой ненужный уровень сложности. Чтобы использовать Figma, нам нужно было перестроить все с нуля.

Время принятия решения!

Учитывая вышесказанное, и несмотря на то, что считал Figma – лучшим инструментом, который усилит компанию в долгосрочной перспективе, я принял решение, что подобный переход будет для нас слишком сложным и дорогим. Заново создавать целые библиотеки – это слишком много работы! Это было похоже на расставание, прежде чем дать ему шанс.

Но, как оказалось, Figma – клиенты Help Scout. Услышав наше решение придерживаться Sketch, наш начальник отдела продаж связался с продуктовой командой Figma – не обязательно для того, чтобы изменить чье-то мнение, а для того, чтобы по-дружески поделиться опытом. Они попросили обсудить мое решение. И это была возможность, которую было нельзя упускать!

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

К тому времени, когда я говорил с командой Figma, я уже поменял точку зрения. Всего за пару дополнительных дней я понял, насколько продуктивнее станет наша команда с такими функциями. Стоимость перехода на другой инструмент не изменилась, но изменилось мое мнение, стоит ли это делать. Глава отдела дизайна Help Scout подытожил: если мы думаем, что когда-нибудь сделаем это, то почему бы не сегодня?

Так что я закончил свой разговор с представителями Figma просьбой: «Дайте мне пару советов, как лучше это сделать», что они любезно и сделали.

Как совершить переход

Итак, возможно, вы оказались на моем месте. Вы хотите перейти на другие инструменты, но перед вами стоит грандиозная задача по воссозданию сотен компонентов, стилей и множества документации. Что ж, мой друг, тебе нужен взвешенный и системный подход к решению этой задачи. У вас могут быть свои особенности, но именно так всего за неделю я перенес в Figma всю дизайн-систему Help Scout.

1. Разделите свои библиотеки

Это относится и к созданию библиотек Sketch, но я настоятельно рекомендую разбивать дизайн-системы на отдельные суббиблиотеки, которые охватывают разные части вашей экосистемы. В нашем случае у нас есть «Ядро», содержащее компоненты, применимые к любому дизайну (активы бренда, иллюстрации, иконки и т. д.), а затем документы, относящиеся к конкретной области. Такой подход немного облегчает переход на другой инструмент, когда вы перемещаете элементы дизайн-системы организованными порциями.

Наши разделенные библиотеки дизайна

В нашем случае миграция на Figma начиналась с элементов «Ядра», которые затем использовались для создания последующих библиотек.

2. Полагайтесь на стили (+ документацию)

В Figma есть «Стили», которые работают так же, как стили шрифтов в Sketch, но с дополнительным преимуществом – они также применяются к цвету и эффектам. Поэтому очень полезно определить все цвета и общие элементы в одной библиотеке, а затем задокументировать их.

Пример того, как стили задокументированы в каждой библиотеке

3. Покажите, как расширить компоненты

Поскольку Figma позволяет намного лучше контролировать, расширение компонентов, вероятно, в конечном итоге у вас выйдет меньше компонентов, чем было в Sketch. Вместо «button solid color» и «button outlined» в Figma вам понадобится просто «button». Из-за этого я обнаружил, что важно документировать различные способы расширения компонента непосредственно в самой библиотеке.

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

Пример того, как из одного компонента Figma можно собрать весь диалог

4. Организовывайте материалы надлежащим образом

Именование важно!

5. Импорт VS Создания заново

Воссоздавая сложные Sketch-компоненты, я буквально делал скриншот, а затем «калькировал» его в Figma. Как бы смешно, это не звучало, но это было гораздо быстрее, чем импортировать их из Sketch и удалять ненужные элементы. И мне немного стыдно признаваться, но мне нравится подобная работа, кроме того оказалось, что такой рабочий процесс был более эффективным.

(Но, конечно, если вы переносите более простые компоненты, такие как иконки, возможности импорта в Figma вас устроят).

6. Обучите свою команду

Поскольку у нас на 100% удаленная команда, мы хорошо проинформированы о большинстве происходящих в компании процессов. И это не было исключением. Поэтому команда заранее знала о предстоящем переходе на новый инструмент.

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

7. Ва-банк

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

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

Конечно, библиотеки наши Sketch все еще существуют; они просто больше не документируются и не обновляются. И в условиях перехода на другой инструмент, текущие проекты продолжают использовать файлы Sketch (хотя некоторые дизайнеры решили перенести свою работу в Figma), тогда как в новых проектах используется только Figma.

Вывод: составьте план!

Трудно завершить подобную статью, не сказав, что у меня есть ответы на все вопросы, хотя, это не так. Но мой совет всем, кто решил переключиться на другие инструменты, делайте это медленно. Проведите исследование, составьте план, определите стоимость и взвесьте, готовы ли вы ее заплатить. Неважно переходите ли вы на Figma, Sketch, InVision Studio, Adobe XD, Framer X или любой другой модный новый инструмент, о котором я еще не слышал.

За последние 3 месяца Figma полностью выместила Sketch и Zeplin из рабочего процесса команды Statsbot.

Расскажу, чем Figma так хороша и почему история с массовой миграцией дизайнеров с Photoshop скоро повторится. Только в этот раз в роли покинутого отеческого дома выступит не Adobe, а Bohemian Coding.

Я очень люблю Sketch. В 2014 году мастер-класс Дмитрия Новикова из MacPaw познакомил меня с его чудесами и с тех пор 90% моих процессов, от рисования иконок и презентаций до вытачивания детальных макетов веб- и мобильных интерфейсов, плавно перекочевали в Sketch. Авторитет Adobe дал трещину и начал осыпаться, пока его законные территории медленно, но верно отжимались по праву сильнейшего.

Релиз Zeplin подключил новую массу восторженных голосов: стоило показать фронтенд-разработчику насколько улучшится его жизнь без лазаний в макеты и фраз «Вась, скока блюр у твоих хипстерских теней делать?», «Нарежь иконки, да под ретину не », и они пускали скупую мужскую(иногда женскую) слезу.

Умение работать в связке Zeplin+Sketch стало стандартным требованием к дизайнеру интерфейсов.

За последующие пару лет рынок UI-тулзов расправил плечи и начал предлагать один продукт за другим. Даже Adobe засуетились и выдали довольно сырой Adobe XD (Comet в девичестве), но уже на момент релиза он сильно отставал от существующих решений, и восторги с фанатской трибуны Adobe в духе «Ну сейчас-то мы вам покажем» поутихли.

UPD: Со свежей версией Adobe XD почти не знаком, но ее, вроде, хвалят.

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

И тут я познакомился с Ней.

Figma объединила в себя все лучшее, что происходило в миром инструментов UI-дизайна за последние несколько лет.

Figma — это лучшие качества Sketch, Zeplin и InVision в одном крутом продукте.

Figma работает в браузере и доступна на любой платформе (если ты уже работал в конструкторах страниц типа Webflow или Tilda, проблем с адаптацией не будет).

Дизайнерам привычно, что все, что работает через браузер — исключительно промежуточные звенья процесса, но не основная, «большая и серьезная», среда для работы. К этому нужно было слегка привыкнуть.

Организация файлов. Все рабочие файлы хранятся в облаке и организованы простым деревом «команда/проект /файл», поэтому больше никаких конфликтов копий, «Залей в Дропбокс », «Не подсосалось», «Макеты в папке Company/Design/Web/New/3.0/Актуальное/Новая папка(5)». В папку Drafts автоматически сваливаются любые новые файлы, несохраненные в явном виде.

Идея коллаборативного воркфлоу заражает один продукт за другим и успешно демонстрирует, что это весело, задорно и полезно для процессов.

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

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

Ты впускаешь разработчиков в свой sketch-файл, а они там что-то меняют. «Не классно!», подумала тройка ребят из Турции и выпустила Zeplin, где фронтенд мог тыкать на все, что видит, не боясь внесения изменений.

Осталось только постоянно заливать свежие версии макетов, проставлять теги и отвечать на комментарии.

…И все это я это успешно забывал делать, за что получал лучи ненависти .

Спасением для меня стала Figma, в которой весь Zeplin заменила индивидуальная настройка прав: приглашаешь разработчика в проект, назначаешь ему «read-only» и отпускаешь в свободное плавание: он радостно копошится в макетах, смотрит цвета, размеры, отступы, отковыривает ассеты и предается прочим утехам.

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

Для обсуждения макетов не приходится никуда «отбегать», весь фидбек собирается на месте и здесь же обсуждается.

Выгрузка в Dropbox всегда была неидеальна и часто порождала проблемы с конфликтом копий и путаницу с поиском актуальных версий. Для Sketch постоянно появляются варианты git для дизайнеров, например — Abstract.

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

UPD: Ха! “Git для дизайнеров появится в Sketch”. Догоняют ребятки.

В Figma — Лучший. Редактор. Кривых.

Чем меня однажды «купил» Sketch, так это приятной работой с кривыми. После Фотошопа с его топорным Pen Tool-ом, рисовать векторные иконки в Sketch было исключительным удовольствием.

Но и тут Figma удивляет.

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

Точки можно бесконечно соединять с другими, что дает возможность делать сложные шейпы;
Удаление точки на кривой кривой не приводит к разрыву шейпа и исчезновению заливки, а соседние точки скомпенсируют прежнюю форму (как минимум, очень постараются);

Можно менять заливку отдельных частей шейпа, образованных пересечениями кривых;
Линии. Можно. Двигать!
Точки — тоже, и их положение повлияет на соседние.

Описание всех чудес «Vector Networks» можно почитать в посте Figma CTO Эвана Уоллеса вот тут. Удивительно, сколько вдумчивой работы было проделано при создании этого инструмента.

Принципы изменения размеров (Sizing в Sketch) можно задавать отдельно для ширины и высоты группы, чего раньше не хватало.

В Sketch есть выпадающий список: Stretch / Pin to Corner / Resize object / Float in space. Мне трудно сразу определить что выбрать, чтобы ресайз работал так как мне нужно.

В Figma это работает и выглядит интуитивнее.

Привязка потомка к стороне или размеру родителя (место для шутки про «мамку автора») происходит в один клик.

Важное: Зависимости для объекта/группы можно задавать только от размера Frame-а, а не родительской группы.

Frame — не то же самое, что и Artboard в Sketch. Frame можно создать внутри другого Frame-а, поэтому его стоит воспринимать просто как “прокачанную” группу, а не отдельный экран. К этому нужно привыкнуть.

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

Layout Grid. Настройки сетки всегда перед глазами, в отличие от Sketch, где нужно лезть в меню, вызывать модалку и пока ты настраиваешь колонки, макет недоступен для редактирования. Кстати, фреймы «липнут» к краям колонок и масштабируются вместе с ними, соблюдая сетку и отступы.

Подробно о grid layout, constraints и прочем оккультизме читай вот тут.

Они же — Symbols в Sketch, но не совсем они. Есть пара весомых отличий:

Родитель. Создавая новый компонент, он не выносится на отдельный артборд, как это сделано в Sketch, а сосуществует с потомками в одном пространстве.

Детишки. Как говорят сами создали Figma, копируя родителя, ты создаешь не его копию, а экземпляр («instance»).

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

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

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

В Figma шрифты тянутся из Google Fonts, а те, которые используются с локально, подкачиваются в проект. И это прекрасно.

Sketch-like интерфейс

Интерфейс Figma очень похож на Sketch, и это удобно — от первого запуска до полноценной работы прошло

40 минут, благодаря сохранению почти всех привычных паттернов и шорткатов.

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

Интеграция с Framer

Импорт из Sketch

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

Годный экспорт SVG

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

Оперативная поддержка

Лайв-чат со средним временем ответа 2–3 часа. Ребята очень внимательные и даже пишут скринкасты, когда хотят что-то объяснить. Приятно.

Она бесплатная

Для отдельных пользователей. Для команд Figma выкатили прайсинг, который заработает в начале июля:

Что нам этот переход дал:

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

2. Стало легко найти исходники всего. Несмотря на то, что мы и раньше требовали от дизайнеров, чтобы все исходники были в корпоративном Google Drive — находить там зачастую ничего не получалось, приходилось писать дизайнеру и просить прислать макет или показать, где он лежит. Теперь в Фигме видны файлы всех, и я могу найти любой исходник любого дизайнера за секунды.

3. Дизайн-система обновляется у всех сразу. Дизайн-системой у нас фулл-тайм занимается выделенная команда. Как только ребята обновляют какой-нибудь системный компонент — всем автоматически приходит апдейт. Теперь можно в один клик обновить стиль кнопки во всех макетах всех дизайнеров компании. Ну ок, не совсем в один — им надо будет подтвердить обновление сначала.

4. Вместе со Скетчем нам почти что перестали быть нужны Zeplin и InVision. Разработчики сразу видят все спецификации в Фигме и забирают оттуда иконки. Прототипы тоже проще делать сразу в Фигме.

5. Фигма бесконечно хранит историю всех изменений. Не нужно иметь много копий одного и того же файла, всегда можно вернуться к любой старой версии.

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

1. Начали с того, что пара дизайнеров-энтузиастов переключилась на Фигму на 2 недели. Переезд туда, кстати, занимает примерно минуту, потому что файлы Скетча можно просто импортировать и продолжать работать, как ни в чём не бывало. Заодно импортировали и дизайн-систему, там правда уже пришлось немного потрудиться.

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

3. Решили, что будем переходить. Команда дизайн-системы занялась полноценным портированием библиотеки компонентов. Собственно, «переход» означал ровно это — библиотеку в Скетче мы перестаём поддерживать.

4. Здорово, что в процессе мы были на связи с ребятами из самой Фигмы, они очень оперативно отвечали и помогали со всеми нашими вопросами. Однажды мы нашли неприятный баг с авторизацией, который мешал работать — нам в тот же день прислали способ проблему обойти, а через два дня в новой версии полностью исправили.

Вот так, теперь используем Фигму и нарадоваться не можем. А мне по этому всему поводу вот что интересно: всё уходит в браузер. Нативных приложений, которые мне были бы нужны на компьютере, уже почти что и не осталось. По инерции использую iA Writer только (божественно красивый, все тексты, заметки и размышления пишу только там), да Keynote. Ну и Слак, но он в браузере ничем не отличается.

Этот пост был изначально опубликован в Телеграм-канале Design & Productivity .

Читайте также: