Ответы пользователя по тегу Figma
  • Как вставить свою карту в Figma?

    NewWingsAsya
    @NewWingsAsya
    Веб-дизайн, интерфейсы и бренд-айдентика.
    Чтобы вставить свою google-карту в Figma можно использовать плагин Map Maker.

    Как добавить карту по шагам:
    1. Выберите прямоугольник в который хотите вставить карту
    2. Запустите плагин Map Maker
    3. Введите в плагине название города и отрегулируйте Zoom Level карты
    4. Нажмите кнопку Make Map


    5fe0e6724cfe6532793055.gif
    Ответ написан
    1 комментарий
  • Как в Figma изменить стиль кнопки после клика по ней?

    NewWingsAsya
    @NewWingsAsya
    Веб-дизайн, интерфейсы и бренд-айдентика.
    Изменить стиль кнопки после клика по ней в прототипе Figma можно с помощью настройки Open Overlay:
    1. Разместим кнопку для состояния «‎после клика» на отдельном артборде, в моем примере это залитая цветом кнопка. Артборды с состояниями элементов можно располагать над соответствующим артбордом, где они должны появляться, чтобы не мешать экранам основного сценария.
    2. На артборде с дизайном для кнопки добавляем интерактивность по клику(On Click) и выбираем опцию Open Overlay, чтобы поверх дизайна появлялся артборд с залитой кнопкой: On Click → Open Overlay → Frame 2
    3. В настройках Overlay выбираем тип позиционирования появления элемента – Manual(ручная настройка), сдвигаем кнопку пока она не займет нужное место после появления на артборде.
    4. Теперь настраиваем обратный переход в прототипе: по клику на залитую кнопку (она вынесена отдельно в артборде) переходим на основной артборд с дизайном. On Click → Navigate To → Frame 1
    5. Нажимаем плей и смотрим как работает прототип

    5fc8bc052c60b475042547.gif
    Ответ написан
    Комментировать
  • Как в figma объединить сразу несколько изображений?

    NewWingsAsya
    @NewWingsAsya
    Веб-дизайн, интерфейсы и бренд-айдентика.
    Мне кажется в вашем случае подойдет такой вариант: сохранить себе в черновики дизайн в Figma (Duplicate to your drafts), который вам пошарил дизайнер и там уже объединить нужные объекты в группу (Ctrl+G), которую потом экспортировать в нужный формат.

    В avocode есть функция объединения изображений для экспорта (Merge layers), у Figma в режиме Inspect (Режим, когда пошарили дизайн для просмотра) подобного функционала пока нет.

    Как добавить себе в черновики копию макета в Figma:
    1. Наведите на название проекта в Figma и нажмите на стрелочку вниз
    2. Выберите Duplicate to your drafts
    3. Снизу появится сообщение что копия была создана, и предложение открыть ее, нажимаете Open
    4. Теперь в вашей копии документа вы можете объединять графику для экспорта
    Ответ написан
    Комментировать
  • Как увеличить панель управления в Figma?

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

    Windows:
    • Увеличить панель управления в Figma: Ctrl + Alt + =
    • Уменьшить: Ctrl + Alt + -
    • Установить по умолчанию: Ctrl + Alt + 0

    macOS:
    • Увеличить панель управления в Figma: Option - Command - =
    • Make Smaller: Option - Command - -
    • Установить по умолчанию: Option - Command - 0

    5fc586d2bcc05390624061.gif
    Ответ написан
    2 комментария
  • Закругленный текст в фигме?

    NewWingsAsya
    @NewWingsAsya
    Веб-дизайн, интерфейсы и бренд-айдентика.
    Сделать текст по кругу в Figma можно с помощью плагина Figma To Path, вот как это делать:
    1. Рисуете круг или окружность
    2. Выделяете текст и окружность, в плагине высветится надпись: "curve and text selected", нажимаете в плагине кнопку Link, для того, чтобы связать текст и окружность
    3. Плагин создаст копию надписи и расположит буквы по окружности, дальше настраиваете параметры в плагине, такие как выравнивание по центру или по краю, направление текста по окружности/reverse
    4. Выделите первоначальный текст который вы линковали и настройте на панели свойств по вкладке Text расстояние между буквами/Letter Spacing. Если текст короткий, то можно увеличить расстояние между буквами, чтобы текст занял всю длину окружности. Так же можно настроить размер текста и его толщину.

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

    5fbed4e14fb5d951026419.gif
    Ответ написан
    1 комментарий
  • Как нарисовать круговые диаграммы в Figma?

    NewWingsAsya
    @NewWingsAsya
    Веб-дизайн, интерфейсы и бренд-айдентика.
    Создание круговых диаграмм в Figma по шагам:
    1. Создаем круг/Ellipse и наводим на него курсор, справа появится точка старта разрыва инструмента Arc для изменения длины окружности.
    2. Потяните за эту точку и задайте нужную длину окружности, что удобно, она считается в процентах, поэтому если нужен кусок диаграммы в 40% вы выставляете это же значение при изменении длины
    3. Чтобы сделать отверстие в центре круга, потяните за точку в центре круга/параметр Ratio изменяет толщину отверстия в круге
    4. Чтобы повернуть окружность, потяните за точку старта/Start, его направляющая отмечена дополнительной точкой внутри, и измените угол поворота окружности

    5fbc6b44271fe864278620.gif
    Ответ написан
    Комментировать
  • Как сделать неоновый текст в Figma?

    NewWingsAsya
    @NewWingsAsya
    Веб-дизайн, интерфейсы и бренд-айдентика.
    Вот еще вариант: можно использовать шаблон с неоновым эффектом Neon effect (Community). В шаблоне прилагается инструкция.
    1. Дублируете себе файл figma с шаблоном Neon effect (Community)
    2. Свой текст превращаете в векторную фигуру с помощью функции Flatten, убираете заливку/Fill и ставите строк/Stroke
    3. Выбираете полученную векторную фигуру и нажимаете Enter, так вы переходите в редактирование точек фигуры, выделаете все точки и копируете
    4. Заходите в шаблон Neon effect (Community) во вторую страницу Neon, находите мастер компонент. Выбираете фигуру из шаблона в компоненте и нажимаете Enter. В режиме редактирования выделаете все точки, удаляете их и вставляете точки своей фигуры.
    5. Возвращаетесь в первую страницу Cover и смотрите результат

    5fb4682ec8f94044146903.gif
    Ответ написан
    1 комментарий
  • Как задизайнить перспективу в фигме?

    NewWingsAsya
    @NewWingsAsya
    Веб-дизайн, интерфейсы и бренд-айдентика.
    Можно использовать плагин Isometric из каталога плагинов Figma:
    5fadb6e157fec535692253.gif
    Ответ написан
    2 комментария
  • Text shadow figma?

    NewWingsAsya
    @NewWingsAsya
    Веб-дизайн, интерфейсы и бренд-айдентика.
    Добавить тень к тексту вы можете с помощью эффекта Drop Shadow на панели справа:
    5fac5f2d7ab4e724445671.gif
    Ответ написан
    Комментировать
  • Как в Figma дать клиенту ссылку на макет - без необходимости ему авторизироваться в проге?

    NewWingsAsya
    @NewWingsAsya
    Веб-дизайн, интерфейсы и бренд-айдентика.
    Чтобы клиент мог оценить дизайн лучше скидывать ему ссылку на просмотр прототипа.
    Отправляем клиенту ссылку на макет по шагам:
    1. Включить предпросмотр/present в правом верхнем углу
    2. В режиме предпросмотра нажать кнопку Поделиться прототипом/Share Prototype
    3. Выбрать настройки шаринга: Anyone with the link – can view
    4. Нажать на кнопку Copy link – появится снизу сообщение что ссылка скопирована. Эту ссылку отправляете клиенту.
    5. Перейдя по ссылке в браузере клиент увидит ваш дизайн.

    5fabae63ed706895699197.gif
    Ответ написан
    Комментировать
  • Фигма. Функция обтекания текстом картинок?

    NewWingsAsya
    @NewWingsAsya
    Веб-дизайн, интерфейсы и бренд-айдентика.
    В Figma сейчас разбивают текстовый блок на две части, чтобы добиться эффекта обтекания текстом. 5fa4a2bdeb89b569217996.gif
    Ответ написан
    Комментировать
  • Делаю layer blur изображению, и появляется рамки которые не нужны, как исправить?

    NewWingsAsya
    @NewWingsAsya
    Веб-дизайн, интерфейсы и бренд-айдентика.
    Сохраняем заблюренную картинку без полупрозрачной рамки:
    1. Создать копию прямоугольника и отключить для него блюр
    2. Новый прямоугольник положить под заблюренное изображение и выровнять оба прямоугольника чтобы их границы совпадали
    3. Выделяем обе фигуры и создаем маску
    4. Теперь верхнюю заблюренную картинку внутри маски нужно чуть увеличить иначе останется полупрозрачный край

    Картинка готова, можно экспортировать.
    5fa32f5091a7e984474507.gif
    Ответ написан
    Комментировать
  • Как в Figma нарисовать такую кнопку?

    NewWingsAsya
    @NewWingsAsya
    Веб-дизайн, интерфейсы и бренд-айдентика.
    Принцип такой: Сначала убираем заливку/ fill, затем добавляем обводку/ stroke. Получается прозрачная контурная кнопка 5fa328042d5a7790114618.gif
    Ответ написан
    Комментировать
  • Как в figma выделить сразу несколько слоев?

    NewWingsAsya
    @NewWingsAsya
    Веб-дизайн, интерфейсы и бренд-айдентика.
    Есть несколько способов как выделить несколько объектов в Figma:
    1. просто выделить область на макете, где находятся несколько слоев
    2. зажимаем клавишу shift и выделяем нужные объекты на макете по одному
    3. зажимаем ctrl и выделяем в списке слоев нужные слои по одному
    4. зажимаем shift и выделяем в списке слоев несколько слоев подряд

    5fa31c8cc6769017660633.gif
    Ответ написан
    Комментировать
  • Как экспортировать многослойные изображения из figma?

    NewWingsAsya
    @NewWingsAsya
    Веб-дизайн, интерфейсы и бренд-айдентика.
    Принцип такой: объединяем несколько слоев в группу, горячие клавиши Ctrl+G, группу
    уже экспортируем, картинка в итоге получается одна 5fa1edcb81f7f262295102.gif
    Ответ написан
    Комментировать
  • Как делать градиент у иконки в figma?

    NewWingsAsya
    @NewWingsAsya
    Веб-дизайн, интерфейсы и бренд-айдентика.
    Добрый день. Принцип такой: выделяем все слои иконки и объединяем через булевые операции Union Selection. Затем на полученную фигуру добавляем заливку из градиента.5fa1e51dabe6d554690946.gif
    Ответ написан
    Комментировать
  • Как просто увеличивать текст в figma?

    NewWingsAsya
    @NewWingsAsya
    Веб-дизайн, интерфейсы и бренд-айдентика.
    Добрый день. В Figma есть функция Scale (Горячая клавиша K) на панели инструментов в Move Tool, с ней можно увеличивать текст просто потянув за одну из сторон. 5fa09fa49f91e487193118.gif
    Ответ написан
    Комментировать
  • Figma - как закрепить задний фон?

    NewWingsAsya
    @NewWingsAsya
    Веб-дизайн, интерфейсы и бренд-айдентика.
    Принцип такой: объединить контент, который должен скроллиться, в один артборд и задать для этого артборда параметры Vertical Scrolling на вкладке Prototype. Уменьшить высоту артборда до величины окна или области скролла. Включаем просмотр и смотрим 5fa08b65b0b7f618659924.gif
    Ответ написан
    Комментировать
  • Как корректно обрезать обьект в Figma?

    NewWingsAsya
    @NewWingsAsya
    Веб-дизайн, интерфейсы и бренд-айдентика.
    Принцип такой: обводим предмет пером, затем отключаем обводку/stroke у фигуры и включаем заливку/fill. После этого вектор перемещаем под изображение, выделяем оба слоя и включаем маску.
    5fa08230e872c156413877.gif
    Ответ написан
    Комментировать
  • Как в Figma экспортировать картинку в формате png для ретины, пришлите скриншот?

    NewWingsAsya
    @NewWingsAsya
    Веб-дизайн, интерфейсы и бренд-айдентика.
    Добрый день. Чтобы экспортировать изображение для Retina, его нужно сохранить в увеличенном вдвое размере(2x), чтобы, к примеру, картинка с разрешением 200x200px стала 400x400px. Эти увеличенные изображения затем отображаются в первоначальном размере, что позволяет добиться четкой, чистой графики на экранах с высокой плотностью пикселей. 5f9f34a2274e6319354592.gif
    Ответ написан
    1 комментарий