• При переходе на Present в фигме, не появляется фото и иконки.Что делать?

    @UNFAMIILIAR
    Дизайнер-любитель
    Здравствуйте, Alex!
    Такая ситуация могла произойти, если картинки не находятся во фрейме который вы просматриваете. Я сейчас объясню подробно.
    1) Вот например я создал фрейм, поместил туда текст и картинку.
    60b672e9141c6345959864.png
    2) Теперь я зайду в Present и посмотрю как все отображается.
    60b6732621bb2172889706.png
    3) Картинки нет. Теперь возвращаемся обратно в редактор и смотрим на панель слоев. В моем случае картинка не отображается, потому что она не находится в том самом фрейме, который мы решили посмотреть.
    60b673be18e93740624002.png
    Исправляю эту ситуацию и перемещаю картинку в данный фрейм через панель слоев.
    60b673c87dce9438829372.png
    4) Захожу в Present и она у меня теперь отображается.
    60b67411c3156935811549.png

    P.S. Советую обратить внимание еще на линии в пункте 3 во втором скриншоте. Т.е. эти линии (которые отображаются в виде пунктирных линий синего цвета от левой и верхней части картинки) показывают Constrains картинки в данном фрейме. Это также помогает понять находится ли она в данном фрейме или нет.
    Надеюсь я помог вам с ответом.
    Желаю удачи!
    Ответ написан
    Комментировать
  • Можно ли в настройках текста задать небольшой наклон букв?

    @UNFAMIILIAR
    Дизайнер-любитель
    Здравствуйте, Олег Юрьевич!
    Я нашел подходящий плагин, который поможет сделать вам нужный наклон для текста.
    https://www.figma.com/community/plugin/74147291952...

    И заодно оставлю пример работы данного плагина, с помощью которого я сделал небольшой наклон в тексте.
    60b6707daea02014442334.png
    Надеюсь я помог вам с ответом.
    Желаю удачи!
    Ответ написан
    Комментировать
  • Как привязать колонки к сетке в Material?

    @UNFAMIILIAR
    Дизайнер-любитель
    Здравствуйте, sketchtooler!

    В гайдлайне указаны не 360 px и не 600 px, а 360 dp и 600 dp. Разница между такими значениями есть. Советую еще раз обратиться к гайдлайну, т.к. у меня не так много знаний в этой области и чтобы я ненароком не дезинформировал вас.
    https://material.io/design/layout/pixel-density.ht...

    Но опыт создания сетки есть.
    Например я делал Дашборд из 12 колонок и 12 строк и это помогло мне аккуратно расположить элементы на макете.
    Также для нижней навигации в мобильной версии сайта я использовал колонки. Количество колонок строго зависят у меня от количества элементов в навигационной панели. Например, если у меня в ней Поиск, Меню и Профиль, то и колонок в ней будет 3 штуки.

    И еще, попробуйте посмотреть другие работы, в которых по-любому будут использовать колонки, чтобы вы смогли для себя понять нужные пропорции колонок для каждого типа устройств.
    Надеюсь я помог вам с ответом.
    Желаю удачи!
    Ответ написан
    Комментировать
  • Как в Фигме во время прототипирования на 11 айфоне дизайнить так, чтобы инфа не попадала на верхнюю плашку айфона?

    @UNFAMIILIAR
    Дизайнер-любитель
    Здравствуйте, Алиса Ямалиева!
    В разделе Community мы можете найти подходящие Дизайн системы для создания макета под айфон.

    1) iOS design system — Free UI kit (макеты на странице "Templates" работают с iPhone 11 pro max и с iPhone 11)
    https://www.figma.com/community/file/852445385275060830

    2) iOS/iPadOS 13 Design UI Kit (макеты на странице "Safe Areas" работают с iPhone X)
    https://www.figma.com/community/file/768365747273056340

    Короче говоря, очень полезные компоненты iOS, которые помогут вам сделать макет для айфонов.
    От себя хочу добавить, что в первой ссылке просто используют пустое пространство в этой области. Просто лучше лишний раз не заходить туда и все.
    Советую посмотреть другие работы в разделе Community, там очень много интересных дизайн систем, не только для мобильных устройств, но и для веб сайтов тоже.
    https://www.figma.com/community

    Надеюсь я не опоздал с ответом и смог помочь вам.
    Желаю удачи!
    Ответ написан
    Комментировать
  • Как сделать анимацию кнопок в фигме?

    @UNFAMIILIAR
    Дизайнер-любитель
    Здравствуйте, Katy93!
    Очень интересный вопрос!
    *Я спустя 4 часа .·´¯`(>▂<)´¯`·. *
    60b616487b208169403230.png
    Я знаю три варианта создания таких кнопок. Первый вы узнали из видеороликов. Я расскажу про второй, которым я пользуюсь и чуть-чуть про третий.

    Второй вариант:
    1) С помощью оверлея (Open overlay/Close overlay)
    + Можно задать простую анимацию.
    - Не работает SmartAnimate. Например плавные линии не будут вырисовываться, как показано в роликах в вашем вопросе.

    Для того чтобы его сделать нужно:
    1. Создать кнопки:
    • Статичная кнопка (static);
    • При наведении (hover);
    • При нажатии (pressed).

    60b5d414b983f153861792.png
    А вот так они должны выглядеть в панели слоев .
    60b5d4454ed5c875445469.png
    (в свернутом виде)
    60b5d5a0f17a0685395068.png
    (в развернутом)
    2. Так, теперь переименуем их.
    Выделяем все наши кнопки и нажимаем сочетание клавиш CTRL + R.
    60b5d6a132483330569214.png
    Я это делаю для того, чтобы объединить все кнопки под единым компонентом.
    Для этого во втором поле "Rename to" пишу: "Buttons/". Да, в конце названия я ставлю слеш, чтобы как раз объединить их в единый компонент. И дописываю "Variant" без слеша в конце, это нужно для того, чтобы можно было потом подставить цифру и слеш. В итоге у меня получается: "Buttons/Variant".
    И нажимаю Rename.
    60b5e18dbc145141799848.png
    60b5e19ca5274894337482.png
    3. Я выделяю первую группку кнопок и опять нажимаю сочетание клавиш CTRL + R. Далее нажимаю "Current name", чтобы он взял текущие название кнопок и подписываем "1" и в конце ставим "/" слеш, чтобы обозначить что Variant 1 является группой с которой мы будем работать дальше. В итоге у меня написано: "$& 1/".
    Нажимаю Rename.
    60b5e48b3db47032600269.png
    60b5e49237cb4720023194.png
    4. Далее я выделяю первую кнопку в Варианте 1 и подписываю после слеша "static". Ко второй кнопке подписываю "hover". К третьей "pressed".
    60b5e5ea99bfa740447145.png
    60b5e5f1771f1563574407.png
    5. Повторяю пункт 3 и 4 для остальных групп кнопок. Т.е. Variant 2 и Variant 3. У которых будут только по два типа кнопок, это static и hover.
    Важно! по правилам создания вариантов кнопок я допустил ошибку. У меня отсутствует у Variant 2 и Variant 3 вариант кнопки pressed, а у Variant 1 присутствует. Далее я покажу где эта ошибка проявляется. Не забывайте создавать все варианты кнопок!
    60b5e82a0782a999013346.png
    60b5e82f69ea8591134542.png
    6. Далее выделяем все кнопки и нажимаем сверху "Create multiple components". У нас каждая кнопка станет отдельным компонентом. Справа нажимаем "Combine as variants". И видим что все кнопки поместились в единую группу под названием Buttons.
    60b5eb603f61f601470491.png
    60b5eb67d8087644398168.png
    60b5eb71c29d4093374837.png
    7. Слегка изменяем правую панель вариантов, чтобы было удобно ориентироваться при выборе нужной кнопки.
    60b5ed13c0657506260940.png
    Думаю, так будет лучше.
    60b5ed964464d032790764.png
    8. Вызываем нашу кнопку через панель Assets. И перетаскиваем ее на рабочую область.
    60b5ee5810594105083060.png
    60b5ee5ecce32130367763.png
    60b5ee660f68e674608852.png
    9. Теперь в правой панели мы можем настраивать эту кнопку как угодно.
    60b5ef04d53c2453345451.png
    Но! Как я уже писал выше, здесь есть ошибка в создании вариантов кнопок. Так как у меня pressed присутствует только в Variant 1, то он будет отображаться даже если мы выберем Variant 2. И если мы будем находиться в Variant 2 и нажмем pressed, то он нас переключит на Variant 1 и поставит pressed. Это неправильно! Это ошибка! Тут либо нужно убрать вариант кнопки pressed, либо добавить к Variant 2 и к Variant 3 отображение кнопки pressed.
    60b5f291aabd1909111593.png
    60b5f297edd18523703010.png

    2) Теперь настраиваем Prototype у кнопок
    1. Вызываем еще несколько кнопок из панели Assets (я рассказывал как это делать в 8 пункте предыдущего раздела). И ставим им подходящие свойства в правой панели.
    60b5f40b2630a227636947.png
    60b5f41041213789382550.png
    2. Настроим что будет происходить с кнопкой, когда на нее будут наводить мышкой. Для этого я нажимаю на кнопку static и захожу в панель Prototype. Справа от кнопки появляется кружок, который при наведении будет отображать плюс. Нажимаем на этот кружок и перемещаем его к кнопке со свойством hover.
    60b5f774dfa41083186742.png
    60b5f77b58f31382857654.png
    60b5f780d7f15753257367.png
    3. У нас справа появляется небольшая панель в которой мы настроим что при наведении мышкой на static у нас постепенно появлялся hover.
    Сейчас настройки тут такие: При клике (On click) навигация к (Navigate to) "Название фрейма"(в нашем случае, он будет отображать название группы кнопок, т.е. Buttons) с анимацией Мгновенно (Instant).
    60b5f7fa7e7ee232196132.png
    4. Нажимаем на On click и меняем этот параметр на Mouse enter (я знаю что есть вариант While hovering (когда наводят), но разницы в них не вижу, поэтому пользуюсь Mouse enter (когда наводится мышка)).
    60b5faab42c0e655530163.png
    5. Далее нажимаем на Navigate to и меняем на "Open overlay". Это нужно как раз для появления нашей hover кнопки. Но это еще не все, потом нужно установить где будет появляться этот оверлей кнопки. На данный момент у меня стоит настройка появления этого оверлея по центру фрейма, это не то что нам нужно. Меняем этот параметр на "Manual". Это нужно для более детальной настройки появления кнопки hover. В нашем случае мне нужно, чтобы она появлялась на месте static, поэтому, после того как я нажму "Manual" у меня появится hover с кружком по центру и диагональными линиями. Беремся за этот hover, который с кружком по центру и перетаскиваем его на место кнопки static. Таким образом мы настроили появление hover кнопки на месте static.
    60b5fd821d6a4753904980.png
    60b5fdab12674493983916.png
    60b5fdc817158409744549.png
    60b5fe06cc372595354740.png
    60b5fe1ae73f8242733894.png
    60b5fe235b279835291939.png
    6. И вместо анимации Instant (Мгновенно) ставим Dissolve (постепенно).
    60b5ff495a10a108792473.png
    60b5ff514755c219907188.png
    7. Готово. Мы настроили первую кнопку, теперь перейдем к настройке кнопки hover. Для этого нажмем на нее, чтобы далее настраивать в панели Prototype.
    60b60086887fc974073604.png
    8. Текущая проблема состоит в том, что если мы наводим мышку, то static превращается в hover, но если отводим мышку, то у нас остается hover. Сейчас это исправим. Мы нажимаем на плюс в правой панели выбираем параметр "Click" и меняем его на "Mouse leave" (мышка уходит). И задаем действие, которое будет происходить, а нам нужно чтобы отображался вновь static, поэтому ставим вместо "None" параметр "Close overlay".
    60b602da18b91751217225.png
    60b602e23b110686517388.png
    60b602f3c1094636591353.png
    60b602fbdeb5e317990802.png
    Ответ написан
    Комментировать
  • Пропадают линии в Figma?

    @UNFAMIILIAR
    Дизайнер-любитель
    Здравствуйте, Homkadesigner!
    Мне кажется проблема кроется в отсутствии у линий нужного параметра "Constraints". Это я понимаю по вашим словам "Пропадают линии в Figma при уменьшении макета (фрейма).
    Причем пропадают не все, а только часть линий."
    Я приведу пример, как я понял ваш вопрос.
    1. Вот у нас есть линии у них установлены стандартные настройки "Constraints". (Лево и Верх)
    60a9714f42ea6389137301.png
    2. Если я захочу уменьшить фрейм, то произойдет такая ситуация.
    60a9716eb1ab4286144582.png
    Если я так понимаю суть вашей проблемы.
    Для того, чтобы решить ее:
    1. Нужно выделить все пунктиры и установить им в "Constraints" для параметра длины "Scale". Для того, чтобы их длина уменьшалась пропорционально макету или увеличивалась.
    Например.
    Ставлю такие настройки для пунктиров в "Constraints".
    60a973866724c090688698.png
    Пример №1 Я увеличиваю макет по размерам.
    60a974420684a096980430.png
    Пример №2 Уменьшаю макет и хочу обратить ваше внимание на то, что они остались пунктирами и все они находятся в зоне фрейма.
    60a9750a07b4a458822892.png
    Настройки высоты для "Constraints" тогда подберете сами, они зависят от того с какой части вы уменьшаете макет.
    Надеюсь мой ответ поможет вам.
    Всего доброго.
    Ответ написан
  • Как поставить разрешение экрана dekstop или imac в Figma?

    @UNFAMIILIAR
    Дизайнер-любитель
    Здравствуйте!
    eeeee_what, для отображения списка фреймов под разные устройства вам нужно:
    1. Нажать "Frame" или кнопку "F" на клавиатуре.
    60a96d2a4f833873660700.png
    2. После чего с правой стороны вы увидите меню Фреймов.
    60a96d6ae04cd328235529.png
    3. Фрейм разрешения imac находится в пункте "Desktop".
    4. Для Планшетов нужно зайти в "Tablet".
    60a96da82f73b739454808.png
    5. И нажимаете на нужный фрейм, после чего он появляется в рабочей области.
    60a96e001ed74628420746.png
    Ответ написан
    Комментировать