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

Я недавно использовал Figma в первый раз, и хотя он был в целом интуитивно понятным и легким в освоении (из Sketch и Illustrator), было несколько загадочных вещей, которые я хотел бы было легче обнаружить. Итак, вот они:

Сочетания клавиш и другие советы

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

ХитEnterвыделить и начать редактирование текста, С выделенным текстовым фреймом нажмитеEnterи весь текст в рамке будет выделен, чтобы начать редактирование. ХитEscвернуться к редактированию самого текстового объекта.

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

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

Удалить точки сShift + Delete,В Adobe Illustrator вы можете «удалять» точки с пути, а не удалять их, оставляя путь в такте; закрытая векторная форма останется закрытой, например, хотя она изменит форму. Вы можете сделать то же самое с Figma, выбрав точки, а затем нажавShift + Delete«Удалить и вылечить выбор».

Ограничения Фигмы, большие и маленькие

Это не просто для прототипа состояний кнопок

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

Работа с типом примитивна, в лучшем случае

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

• Там нет стилей персонажей, только стили абзаца и стили могут применяться только на уровне абзаца.
• Здесь нет «локальных переопределений».Другими словами, если у вас есть абзац, в котором используется стиль «Основной текст» с нормальным весом, нет способа привязать его к этому стилю и применитьсмелыйиликурсивтолько слово или фразу в абзаце.
• Определенные атрибуты всегда применяются ко всему текстовому фрейму.Хотя вы можете применять разные стили к разным абзацам внутри текстового фрейма (в отличие от Sketch), интервал между абзацами и отступ применяются ко всему текстовому фрейму. Таким образом, вы не можете, например, иметь первый абзац с нулевым отступом, а следующие абзацы имеют отступ с 32px. Даже если эти атрибуты являются частью определения стиля текста, они работают только в том случае, если применяются к отдельным фреймам.
• Несколько незначительно, но: подтекст и супертекст доступны только в том случае, если в используемом вами шрифте присутствуют фактические суб и суперглифы.

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

Вы не можете сделать прототип заполнить браузер

Представьте, что вы разработали прототип сайта для настольных ПК с шириной 1440 пикселей. Если ваш клиент просматривает его в браузере шириной 1600 пикселей, вы, вероятно, захотите, чтобы ваш прототип увеличился до размера окна браузера (background-size: coverв CSS). Тамявляютсядоступно несколько вариантов масштабирования, но тот, который вы ожидаете работать таким образом, «Заполнить - масштабировать или вверх или вниз», просто не Документы говорят:

Заполнить - масштабирование или увеличение или уменьшение для заполнения гарантирует, что прототип заполняет экран на любом размере или разрешении экрана. В отличие от опции «Подгонка», «Заливка» также позволяет масштабировать прототип для заполнения больших экранов.

Но это просто не работает. Или, возможно, он работает на основе высоты, а не ширины, что не помогает.

Там нет реального форума поддержки

Это также проблема с обеими программами. Есть сообщества, которые могут найти помощь, такие как Stack Overflow и Spectrum. Но Спектрум, в частности, действительно плохо подходит для поддержки, и, конечно же, он не является законным местом для отправки запросов или сообщений об ошибках. Я нашел, однако, что по электронной почтеsupport@figma.comбыл очень эффективен. Возможно, это уже было в стадии разработки, но некоторые отзывы, которые я дал, были реализованы в следующий раз, когда я использовал приложение!

Оригинальная статья