www.machinelearningmastery.ru

Машинное обучение, нейронные сети, искусственный интеллект
Header decor

Home

Начало работы с Figma: что нужно знать

Дата публикации Oct 3, 2019

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

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

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

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

Чтобы редактировать точки или линии векторной фигуры, нажмите Enter. Нажмите Enter еще раз, чтобы выйти из режима редактирования векторов.

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

Начните редактировать текст во фрейме, нажав Enter. Нажмите Esc, чтобы выйти из режима редактирования текста.

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

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

Измените цвет заливки или текста, нажав клавишу I, чтобы открыть пипетку.

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

Используйте Shift + Delete, чтобыудалятьуказывает путь, а не удаляет их

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Footer decor

© www.machinelearningmastery.ru | Ссылки на оригиналы и авторов сохранены. | map