Дата публикации Oct 3, 2019
Несколько полезных советов, функций и ограничений инструмента дизайна / прототипирования на данный момент.
Я недавно использовал Figma в первый раз, и хотя он был в целом интуитивно понятным и легким в освоении (из Sketch и Illustrator), было несколько загадочных вещей, которые я хотел бы было легче обнаружить. Итак, вот они:
ХитEnter
переключить режим векторного редактирования, Когда выбран векторный объект, такой как предварительно определенная форма или что-либо нарисованное с помощью инструмента «Перо», нажмитеEnter
редактировать точки или линии вектора. Когда вы закончите, нажмитеEnter
снова, чтобы выйти из режима редактирования. Форма останется выбранной.
ХитEnter
выделить и начать редактирование текста, С выделенным текстовым фреймом нажмитеEnter
и весь текст в рамке будет выделен, чтобы начать редактирование. ХитEsc
вернуться к редактированию самого текстового объекта.
Выберите отдельный элемент напрямую с помощьюCommand-click
, Вместо двойного щелчка на объекте, который является дочерним элементом группы или фрейма, или для перехода по нескольким группам / фреймам, просто нажмите и удерживайтеCommand
ключ при нажатии один раз.
Быстро изменить цвет заливки с помощью пипетки.Выбрав любой объект, нажмитеI
поднять пипетку. Затем выберите нужный цвет из любой точки холста.
Удалить точки сShift + Delete
,В Adobe Illustrator вы можете «удалять» точки с пути, а не удалять их, оставляя путь в такте; закрытая векторная форма останется закрытой, например, хотя она изменит форму. Вы можете сделать то же самое с Figma, выбрав точки, а затем нажавShift + Delete
«Удалить и вылечить выбор».
В Figma нет понятия «состояние», и все анимации и переходы выполняются с помощью оверлеев. Так, например, вместо того, чтобы иметь компонент кнопки, который имеет «активное» состояние, вам нужно создать отдельный фрейм с вашим активным состоянием и использовать его в качестве наложения. Для одной или двух кнопок ничего страшного, но это быстро становится утомительным.Вот хорошее видео, демонстрирующее, как создать прототип взаимодействия «зависания» и «щелчка»,
Меня огорчает, что как в Sketch, так и в Figma текст рассматривается как гражданин второго сорта. Для разработки приложения, возможно, это не большая проблема - у вас могут быть только короткие фразы или элементы из одного слова. Но большинство веб-сайтов в основном текстовые, и отсутствуют основные возможности по сравнению с CSS и любой программой верстки:
У Figma есть некоторые преимущества перед Sketch: управление и редактирование стилей текста (и стилей в целом)многоболее надежный И, как упоминалось выше, вы можете по крайней мере применить другой стиль текста к двум разным абзацам в одном и том же текстовом фрейме, хотя не все атрибуты будут соответствовать друг другу. С другой стороны, Sketchделаетразрешить переопределение стилей, а также различные абзацы и межстрочный интервал в одном текстовом фрейме. (Но не с помощью текстовых стилей! Тьфу - они оба отстой в этом отделе.)
Представьте, что вы разработали прототип сайта для настольных ПК с шириной 1440 пикселей. Если ваш клиент просматривает его в браузере шириной 1600 пикселей, вы, вероятно, захотите, чтобы ваш прототип увеличился до размера окна браузера (background-size: cover
в CSS). Тамявляютсядоступно несколько вариантов масштабирования, но тот, который вы ожидаете работать таким образом, «Заполнить - масштабировать или вверх или вниз», просто не Документы говорят:
Заполнить - масштабирование или увеличение или уменьшение для заполнения гарантирует, что прототип заполняет экран на любом размере или разрешении экрана. В отличие от опции «Подгонка», «Заливка» также позволяет масштабировать прототип для заполнения больших экранов.
Но это просто не работает. Или, возможно, он работает на основе высоты, а не ширины, что не помогает.
Это также проблема с обеими программами. Есть сообщества, которые могут найти помощь, такие как Stack Overflow и Spectrum. Но Спектрум, в частности, действительно плохо подходит для поддержки, и, конечно же, он не является законным местом для отправки запросов или сообщений об ошибках. Я нашел, однако, что по электронной почтеsupport@figma.comбыл очень эффективен. Возможно, это уже было в стадии разработки, но некоторые отзывы, которые я дал, были реализованы в следующий раз, когда я использовал приложение!
© machinelearningmastery.ru | Ссылки на оригиналы и авторов сохранены. | map