Главная » Инструкции

Figma для iPad Pro: руководство по выживанию

На чтение 19 мин. Просмотров 1.6k. Опубликовано

Изображение для сообщения

Образный 1.2 для iPadOS

Последнее обновление: 10 декабря 2020 г. Эта статья была обновлена, чтобы отразить использование в iPadOS 14.3. Если вы планируете широко использовать образный рисунок с Apple Pencil, прочтите мою сопутствующую статью .

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

Изначально я написал эту статью, чтобы подчеркнуть потенциал возможности путешествовать куда угодно с Figma – самолет, кафе, автобус – с планшетом. По иронии судьбы, большинство из этих вариантов использования стали неактуальными из-за COVID-19. Вместо этого я больше работал с Figma на ноутбуке, переложив свой iPad Pro на второстепенные обязанности.

Другой причиной, по которой мой iPad стал второстепенным, была производительность Apple Pencil в iPadOS 14.0. Он сделал шаг назад по сравнению с iPad 13.7, и я сознательно избегал обновления до тех пор, пока это не было абсолютно необходимо (что было несколько недель назад). Я решил, что обновлю эту статью соответствующим образом. Я рад сообщить, что производительность Apple Pencil в версии 14.3 неуклонно улучшалась до уровня пригодности для использования.

Новое приложение установило стандарт использования Figma на iPad Pro: Figurative для iOS. Это приложение, созданное Матиасом Мартинесом, максимально приближено к созданию производственного опыта. (Ознакомьтесь с моим интервью с Матиасом Мартинесом здесь).

Я тестировал Figma на iPad с момента выпуска iPadOS и хотел поделиться тем, что узнал. Я обновляю эту статью, чтобы отразить последнюю информацию и результаты тестирования на моем устройстве.

  1. iPad Pro 10,5 дюйма 64 ГБ (2018 г.)
  2. Использование пальцев , Apple Pencil 2 и/или USB-мышь и клавиатура.
  3. Подключение к Figma через различные сети Wi-Fi
  4. Бесплатная личная учетная запись Figma
  5. Образный (v1.2.2)
  6. Последняя версия iPadOS (14.3)

Изображение для сообщения

Нет большей радости, чем увидеть SF Pro в Figma на iOS.

Образный теперь лучший вариант для использования Figma на iPadOS 14.3 . Благодаря Figurative теперь можно запустить Figma на iPad Pro и обойтись без ноутбука. Образный образ затмевает необходимость доступа к Figma через Safari или Chrome для iPad.

Изменяющие правила игры функции Figurative:

  1. Пользовательские шрифты : Раньше единственным способом доступа к пользовательским шрифтам в Figma на iPad была корпоративная учетная запись Figma. Этот вариант для многих недоступен. Образный позволяет вам получить доступ к шрифтам, которые вы устанавливаете из настраиваемых профилей. Я протестировал Inter (только частично поддерживается стеком шрифтов Figma по умолчанию), Нью-Йорк и все разновидности Сан-Франциско. Все они доступны для выбора после установки на iPad. Для разработчиков интерфейса iOS это очень важно.
  2. Параметры экспорта: Figurative использует знакомую панель общего доступа iOS для экспорта, что дает вам больше гибкости.
  3. Оптимизированный дизайн экрана: Образное выражение устраняет необходимость в поле URL-адреса, которое в противном случае занимало бы много места. Тем не менее, он поддерживает несколько вкладок. Масштабирование экрана позволяет вам видеть еще больше холста, что полезно как на небольших iPad, так и при подключении к внешнему монитору.
  4. Совместимость с Apple Pencil: образно – единственная игра в городе, в которой можно использовать Apple Pencil с Figma. Для более глубокого погружения в использование Apple Pencil, вот сопутствующая статья, в которой также рассказывается о написанном мной плагине (Pencil Pal), чтобы облегчить жизнь пользователям.
  5. Сочетания клавиш: Вместо того, чтобы перемещаться по меню, Figurative предлагает быстрые удобные для касания ярлыки для общих действий, таких как удаление и дублирование объектов. Хотя клавиатура по-прежнему полезна, эти сочетания клавиш позволяют выжить и без нее.
  6. Жесты отмены/возврата: в «ранние» дни Figma на iPad Pro было действительно легко случайно переместить что-нибудь. Образный использует простое касание несколькими пальцами, чтобы отменить или повторить действия. Я стал ценить и использовать эти жесты чаще.

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

Иногда Figurative перезагружает вкладки посреди работы. Во время тестирования со мной такое случалось только один раз, но я слышал и от других, что это произошло. (На конференции Config Europe Figma объявила, что улучшила размер памяти для файлов. Однако мне не удалось увидеть, как это повлияло на повышение производительности на iPad.)

Я все равно не решусь перерезать шнур. полностью с Mac. Например, Figurative не может обрабатывать большие файлы. Основываясь на моем тестировании и отчетах других образных пользователей, большие файлы (например, 145000 слоев и 0,19 ГБ памяти) не будут загружаться должным образом.. (Чтобы было ясно, Chrome для iPad и Safari также борются с большими размерами файлов, поэтому это может не быть проблемой, которую может исправить Figurative.)

Чтобы полностью отказаться от Mac, вам понадобится для управления размерами файлов и разделения работы на более мелкие части.

Если вы кодируете свои собственные плагины, вам все равно понадобится настольное приложение. Я не думаю, что это изменится в ближайшее время (но я рад, что это неверно). Любые плагины, которым требуется интерфейс рабочего стола (например, Zeplin), очевидно, не будут работать на iPad Pro, но в остальном многие плагины работают нормально.

Включение поддержки Apple Pencil делает Figurative единственным способом запускать Figma на iPad Pro без мыши и клавиатуры. В моем тестировании приложение было достаточно умен, чтобы знать, использую ли я карандаш или пальцы, и реагирую соответственно. Для лучшей производительности я рекомендую отключить функцию Scribble.

Хотя эта новая поддержка не позволяет вам создавать и редактировать объекты в Figma одними пальцами, я сомневаюсь, что это тот вариант использования, который кто-то действительно действительно хочет. Использование Apple Pencil с Figma – это довольно круто.

Производительность рисования от руки, похоже, снизилась по сравнению с 13,7, что привело к более грубым линиям и замедленному времени отклика. Между 14.0 и 14.3 производительность Pencil улучшилась до такой степени, что его можно было использовать, с заметной задержкой только при слишком быстром перемещении Apple Pencil.

Для тех, кто планирует использовать iPad Pro с внешним монитором. , Я рекомендую многопортовый цифровой AV-адаптер USB-C, который позволяет отображать изображение на внешнем HDMI-совместимом мониторе и одновременно заряжать его.

Клавиатура Magic Keyboard для iPad Pro очень удобна. более портативный форм-фактор по сравнению с отдельной клавиатурой и/или мышью Bluetooth. Но на самом деле любая мышь или клавиатура должны нормально работать с Figurative – даже проводные, если у вас есть переходник с USB-C на USB.

При использовании Figma настоятельно рекомендуется использовать внешнюю клавиатуру:

  1. Это упрощает управление Figma с помощью команд клавиатуры, таких как подталкивание объектов или копирование/вставка. Я часто использую команду отмены; очень легко случайно переместить объекты.
  2. Это максимизирует пространство просмотра холста и устраняет некоторые проблемы при использовании экранной клавиатуры (например, доступ к клавишам-модификаторам).
  3. Доступ к клавишам-модификаторам упрощает выбор нескольких элементов или просмотр контекстных меню.

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

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

Если вы войдете в Figma на рабочем столе и на iPad Pro, последний может работать как Планшет Wacom. Хотя обновление экрана рабочего стола происходит с небольшой задержкой, можно превратить iPad Pro + Apple Pencil во второе устройство ввода..

Хотя в этом обзоре предполагается, что у вас нет Mac, Sidecar – это отличная функция, которая расширяет пространство вашего экрана для управления несколькими окнами Figma.

Я только тестировал живое сотрудничество с собой (имеется в виду в том же файле на Mac и iPad), и iPad, похоже, не отставал. Фактически, вы можете запускать Figurative в нескольких окнах (как с разделением, так и с плавающей точкой сверху), а это означает, что можно запускать прототип и редактор одновременно!

Другой вариант использования, который я изучал 2020 год – использовать iPad для управления прототипом. Под этим я подразумеваю изменение прототипа в реальном времени путем внесения изменений в редактор на iPad. Например, я создал плагин под названием Slide Show, который эффективно превращает любую серию кадров в управляемую слайд-колоду, не объединяя их в качестве прототипа. Затем вы можете динамически изменять данные в реальном времени с помощью других плагинов, например для создания таймера реального времени.

Изображение для сообщения

Изображение для сообщения

Функция масштабирования экрана отлично подходит для увеличения доступного пространства холста.

Мне нравится Figma. Это потрясающий инструмент для дизайна.

Благодаря включению первоклассной поддержки мыши в iPadOS и дебюту Figurative, Figma на iPad Pro получила большой импульс. Это тот момент, когда я могу оставить свой ноутбук на работе и полагаться на iPad Pro при выполнении большинства рабочих задач. Только большие файлы, снижение производительности Apple Pencil и поддержка/разработка плагинов не позволяют мне полностью перерезать шнур.

Определенно стоит провести тест-драйв Figma с Figurative, особенно если вы хотите использовать iPad Pro, чтобы «избавиться от дизайнерского зуда», находясь вдали от ноутбука.

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

Тем не менее, выпуск Figurative заставляет меня пересмотреть эту позицию. Ранее я предполагал, что установка Figma на iPad Pro будет чудовищным делом, и, возможно, скрытый скачок к тому, чтобы сделать iPadOS «официально поддерживаемым», открывает большую банку червей и делает тестирование невероятно трудным. Как дизайнер продукта, я могу посочувствовать.

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

Даже если iPad останется в списке «официально не поддерживаемых», я надеюсь, что Figma продолжит позволять разработчикам, таким как Матиас, исследовать возможности. Я твердо верю в будущее, в котором iPad – это все, что нужно для создания отличного дизайна, и я хотел бы продолжать использовать Figma в этом будущем.

Если вы хотите узнать больше о Figma на iPad вот две мои другие статьи на эту тему:

  • Мое интервью с создателем Figurative Матиасом Мартинесом – все это невозможно без этого замечательного приложения. Мне понравилось узнавать, что в первую очередь вдохновило его на его создание.
  • Если вы хотите попробовать отказаться от клавиатуры и мыши, вот моя статья об использовании Figma с Apple Pencil 2. Это более глубокий вопрос. погрузитесь в примеры использования Apple Pencil и плагина Pencil Pal.

Есть вопросы о Figma на iPad Pro? Дай мне знать в комментариях. Я отвечу как можно лучше. Спасибо за внимание!

Нельсон Тарук – главный дизайнер Lextech , руководитель отдела продуктов в LexGo и ведущий инструктор на figmateamtraining.com .

Meet Dimension

План с открытым исходным кодом для адаптации полнофункциональных инструментов дизайна, таких как Figma, с настольных компьютеров на планшеты.

Тео Штраус

6 августа 2019 г. · чтение 9 мин.

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

  1. Компьютер для обработки продукта (деятельности) – подумайте о веб-приложениях.
  2. Инструмент для дизайна – где я обычно разрабатываю веб-приложения.

И, как и большинство дизайнеров, я какое-то время полагался на два «отраслевых стандарта»:

  1. MacBook Pro
  2. Sketch

Но, если вы обратите внимание на прошедшее время, произошли две вещи:

  1. В 2018 году я закрыл окно Sketch и впервые открыл файл Figma моего друга. Figma не только мгновенно заменила Sketch, но и заменила другие инструменты, которые я использовал в то время. Будущее дизайна было ясно: это была Figma.
  2. В 2019 году я отложил свой ноутбук и пошел в Apple Store, чтобы попробовать iPad Pro. IPad Pro меня не просто поразил, Apple Pencil и iPadOS тоже. Будущее компьютеров было ясно: iPad Pro был им.

Пока я размышлял над покупкой iPad Pro, меня удерживал один вопрос: Если Figma – это Создавая будущее инструментов дизайна, а Apple строит будущее компьютеров, почему они не работают друг с другом хорошо?

Я понял, что для создания действительно эффективного -go Figma, нужно просто отвязать его от настольного компьютера – убрать клавиатуру и мышь – и подключить планшет – добавив стилус и поддержку multi-touch. Поразмыслив, я понял, что сделать это не так просто. Однако, если в обещанных портативных и доступных планшетах опыта не хватало только средства дизайна, я решил, что должен решить проблему сам.

Изображение для сообщения

Шесть месяцев спустя я рад представить Dimension – план адаптации Figma с настольного компьютера к планшету.

Я начал работу с Dimension, руководствуясь тремя принципами:

  1. Удобство использования – в Figma должны быть одинаковые функции между платформами.
  2. Реализуемость . Команда Figma должна легко реализовать Dimension, чтобы его можно было развернуть как можно скорее.
  3. Настраиваемость – измерение не должно основываться исключительно на моем рабочем процессе, оно должно быть открытым для включения других.

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

Эти приоритеты также определяют содержание этой статьи. Во-первых, я расскажу о Usability , где подробно расскажу об основных предложениях Dimension по обеспечению эффективности настольных компьютеров и полным набором функций для планшетов. Далее я расскажу о Реализуемость , в котором я расскажу, как Dimension разработан как для быстрой интеграции с Figma, так и для широкого расширения сообществом. Наконец, я расскажу о настраиваемости : каждое предложение, упомянутое в этом посте, было разработано для изменения дизайна, поэтому уместно поговорить о том, как внести свой вклад в проект.

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

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

Отрезание клавиатуры

При использовании На компьютере сочетания клавиш доминируют в рабочем процессе дизайнера. Первым шагом, который я предпринял, чтобы довести их эффективность до планшета, хотя, казалось бы, отсталой, я разместил все горячие клавиши оборудования – Command (⌘), Option (⌥), Control (⌃), Shift (⇧) и стрелки – поверх пользовательского интерфейса Figma.

Однако, составив карту каждого сочетания клавиш, я увидел, что при наличии жестов эти клавиши можно комбинировать. Вскоре после этого у Dimension был свой переносимый ответ: Цифровые клавиши и жесты .

Action

Первый рассматриваемый ключ, Command ( ⌘), было преобразовано в Действие, более подходящее название для его цели. Действие сохраняет функциональность Command в сочетании с клавишами со стрелками (например, уменьшение ширины фигуры) и заменяет функции Command и Control (⌃) в сочетании с буквенными клавишами. При перетаскивании с нажатием кнопки «Действие» появляется меню «Действие», позволяющее дизайнерам выбрать действие одним движением.

Изменить

Вариант тоже был преобразован: в Изменить. Modify сохраняет функциональность Option (⌥), но в сочетании с мультисенсорным вводом дает больше возможностей. Например, Option Hovering на рабочем столе показывает расстояние между выбранной фигурой и другой рядом. На планшете нажатие кнопки «Изменить» при одновременном нажатии нескольких фигур показывает расстояние не только между двумя из них, но и всеми.

Клавиши со стрелками

Хотя клавиши со стрелками сохраняют свое имя, Dimension также преобразует их, комбинируя их с Shift (⇧). На рабочем столе Shift работает в паре с клавишами со стрелками исключительно для быстрого перемещения. На планшете дизайнеры могут щелкнуть по кнопке со стрелкой для сверхподталкивания, устраняя необходимость в дополнительном нажатии.

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

Сказать привет пользователю стилус и перемещение по мыши

Затем появилась другая аппаратная функция компьютера – трекпад. Из двух возможностей трекпада – наведения и выбора – планшеты поддерживают только одну. Для Dimension встроить поддержку обоих означало принести два секретных оружия: Stylus и Sticky Taps .

Stylus

Styli, например Apple Pencil – это привычный и, что более важно, точность трекпада или мыши. Выбор форм, слоев и параметров – ключевой аспект рабочего процесса дизайнеров; Щупы позволяют дизайнерам делать это не только на планшете, но и с большей свободой и скоростью. Действия, требующие наведения указателя мыши на весь экран (например, щелчок по меню новой формы), превращаются во вращение и нажатие стилусом.

Липкие касания

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

Интеграция ввода

Обеспечение максимально эффективного взаимодействия дизайнеров – основная тема Dimension. Ввод данных, таких как числа, стал важной частью головоломки этой темы.

В Dimension, когда дизайнер выбирает поле ввода (например, размер шрифта текстового поля), становятся доступными два метода ввода : Клавиатура и Ползунок .

Клавиатура

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

Slider

Во-вторых, рядом с инспектором появляется ползунок, позволяющий им прокручивать с различной скоростью – 10 пикселей, 1px, .5px – как при просмотре видео на планшете.

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

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

Каким будет путь к реализации в Figma Dimension?

Изображение для сообщения

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

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

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

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

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

Если Figma строят будущее инструментов дизайна, а Apple строит будущее компьютеров, почему они не работают друг с другом?

Изображение для публикации

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

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

Заполнив форму, вы можете получить доступ к основная жила файлов Dimension.

Разделяя Dimension, вы можете привлечь больше внимания и участников.

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

Итак, что дальше?

Изображение для сообщения

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

Чтобы узнать больше о Dimension, посетите веб-сайт (который на самом деле является прототипом Figma): theostrauss.com/dimension

Чтобы узнать обо мне больше, посетите мой сайт: theostrauss.com/twitter/medium/linkedin

И всем, кто мне помогал: спасибо.

Измерение было бы невозможно без потрясающей помощи:

  • Эндрю Шум, который давал отзывы на всем протяжении
  • Кейс Сэндберг, который помог мне потрясающе снимать демо Dimension
  • Дэниел Бурка, вдохновивший меня дизайном с открытым исходным кодом
  • Девин Манкузо, который подтолкнул меня к на самом деле разрабатывает Dimension в первую очередь.
  • Джордан Сингер, мой гуру дизайна и лучший охотник за продуктами.
  • MDS, который ретвитнул меня, когда никто другой не сделал
  • Сэм Эккерт, который также ретвитнул меня, когда никто другой не сделал
  • Тушар Паливал, который анимировал демонстрации Dimension со скоростью света.
  • Union Square Сотрудники Apple Store, которые продали мне iPad и разрешили вернуть его через неделю.
  • Сотрудники Apple Store в Верхнем Вест-Сайде, разрешившие мне работать над Dimension, не задавая вопросов.

Изображение для сообщения

Изображение для сообщения

Изображение для сообщения

За кулисами в Apple Store, в« студии анимации »и в студии видеосъемки

Изображение для сообщения

За кулисами веб-сайта Dimension, прототипа Figma, занесенного в Книгу рекордов Гиннеса по большинству подключений в файле Figma… не официально, но вероятно.
Оцените статью
futurei.ru
Добавить комментарий