Как отправить ссылку в фигме

Ссылки в Figma

Ссылки в Фигма могут вести на:

При этом фрейм или страница может находиться в любой работе.

Ссылки работают только в режиме редактирования, в прототипе ссылки не работают. Если вы наведете курсор на ссылку в редакторе, Figma покажет всплывающее окно, в котором отображается путь (в виде Страница/Фрейм, если элемент находится в этом же файле, и в виде ссылки — если в другом или если это ссылка на страницу в интернете).

Фрейм на другой странице

Страница в этой же работе

Ссылка на фрейм (на этой же странице)

Ссылка на фрейм в другой работе

Как поставить ссылку

Чтобы поставить ссылку, выделите часть текста или весь слой с текстом и нажмите на иконку со скрепкой сверху в панели.

Сделать ссылкой

Работа с какими-то элементами, отличными от текста, пока что не обнаружена.

Ссылка на фреймы и страницы вставляются так же как и ссылки на страницы — это линки на страницы в figma.com/. Подбора по названию нет, вам надо сначала скопировать адрес интересующего вас элемента.

Как получить ссылку на фрейм или страницу в Figma

Ссылка на страницу: в списке страниц откройте контекстное меню и найдите Copy Link.

Копировать ссылку на страницу

Ссылка на фрейм: откройте контекстное меню, перейдите в Copy/Paste — Copy Link.

Скопировать ссылку на фрейм

Горячей клавиши для копирования ссылки пока что нет.

Источник

Демонстрация прототипа заказчику в Figma без сохранения изображений

Помимо возможности мультиплеера (иными словами, командной работы над проектом) в Figma есть очень полезная функция — можно показать прототип проекта в режиме демонстрации клиенту прямо в его браузере.

Таким образом вы избавляетесь от необходимости экспортировать проект в jpg или png и рассылать тяжелые изображения через почту или обменники.

Как включить режим демонстрации

Режим демонстрации включается в правой верхней части экрана треугольной кнопкой «Present».

Кнопка Present в интерфейсе Фигмы

В окне демонстрации по умолчанию открывается активный фрейм, либо первый. Кнопками в нижней части экрана можно переключаться между фреймами, при это переключение между страницами недоступно.

Также в этом режиме можно просматривать и оставлять комментарии. Для этого нажмите на окно диалога в верхней левой части.

Как расшарить демонстрацию проекта

Чтобы получить ссылку для отправки клиенту:

Стоит отметить, что макеты, разумеется, не адаптивные, поэтому у пользователя с меньшим разрешением экрана может появиться горизонтальный скролл.

Как изменить девайс в презентации

Девайс меняется в режиме редактора в правом тулбаре в разделе Prototype.

Как скрыть тулбар и футер

Чтобы просмотру прототипа не мешал интерфейс Фигмы, вы можете скрыть тулбар и футер с помощью горячих клавиш ⌘\ или ⌘. (ctrl\ или ctrl. для Windows) или через меню Option > Show Toolbar and Footer. Подробнее читайте здесь.

Как поменять цвета фона в прототипе

В рабочем файле в правом сайдбаре выберите вкладку Prototype, далее, если у вас не выбран фрейм, вы сразу увидите поле Background — меняйте его.

Если вы уже выбрали один из фреймов, нажмите кнопку Show prototype settings и уже в открывшихся настройках меняйте цвет Background.

Как заменить черный цвет фона на свой? Не создать еще один фрейм позади всего, а именно заменить черный цвет?

Чтобы заменить фоновый цвет в прототипе, надо перейти во вкладку Prototype справа и поменять цвет в Background (если у вас выбран фрейм, сначала нажмите на Show prototype Settings

Источник

Просмотр в фигме: режим презентации в Figma и ссылка на проект

В этом видео поговорим о том как делать предварительный просмотр в фигме. Разберемся с режимом презентации и как поделиться ссылкой на ваш проект с заказчиком или любым другим человеком.

Как отправить ссылку на проект в фигма

Чтобы поделиться ссылкой на ваш проект в фигме и отправить его вашему заказчику, коллеге или любому другому человеку нажмите на кнопку «Share» в верхнем правом углу. Затем на надпись «Copy link».

Если эту ссылку открыть в браузере, то можно будет увидеть, ваш курсор и что вы делаете в реальном времени.

Вы будете видеть аватарки тех, кто просматривает ваш проект сверху и справа. Если нажмёте на какую-то аватарку, то будете видеть курсор и действия этого человека.

Как это можно использовать? Например таким можно обсуждать с заказчиком проект и в реальном времени вносить правки.

Как изменить роль приглашенного человека в проекте в фигме?

Если вы пригласили какого-то человека или поделились с ним ссылкой на проект, то можно изменить его роль. Нажмите на синию кнопку «Share», сверху и справа. Затем напротив нужного человека из списка справа выберите одну из следующих ролей:

Режим предварительного просмотра в фигме

Чтобы включить режим предварительного просмотра в фигме, нажмите на иконку «Present» сверху справа (она похожа на Play). У вас откроется новая вкладка, где вы сможете просматривать фреймы, которые есть в вашем проекте.

Если до этого в режиме прототипирования (Prototype) вы настроили связи между фреймами и элементами интерфейса, то можно просматривать проект, как интерактивный, кликабельный прототип.

Например при нажатии на кнопку можно сделать всплывающие окна (popup формы), перенаправлять человека к другому фрейму, сделать поля в контактных формах активными и т.д.

Другими словами можно создать ощущение реального просмотра сайта или мобильного приложения с возможностью кликать и взаимодействовать с разными элементами интерфейса.

Как поделиться ссылкой на прототип в фигме?

Если вы находитесь в режиме «Present», то можете поделиться ссылкой на ваш прототип. Для этого нажмите на правую верхнюю кнопку «Share prototype» и в появившемся окне нажмите на надпись «Copy link».

При открытии скопированной ссылки в браузере, можно просматривать прототип в режиме презентации.

Внизу по центру можно переключаться между фреймами, с помощью стрелок слево и вправо.

Как в фигме (в режиме просмотра) изменить отображаемое устройство?

Если вы хотите изменить отображаемое устройство в режиме предварительного просмотра «Present», то выберите фрейм. Перейдите во вкладку «Prototype» и нажмите на кнопку «Show prototype settings».

Затем внизу надписи «Device» выберите подходящее устройство из списка. Для примера я выберу фрейм с мобильным приложением и из списка выберу «Iphone 11 pro max».

Если открою предварительный просмотр в фигме и перейду в режим презентации, то фрейм будет отображаться в мобильном устройстве.

Заключение

Итак, в этом видео вы узнали как делать предварительный просмотр проекта в фигме. Также, как демонстрировать вашу работу заказчику или любому человеку скопировав ссылку на проект.

Источник

Figma для маркетологов. Основные возможности и принципы работы

Блочный редактор писем, готовые шаблоны email, формы подписки и автоматизация. Запускайте email-рассылки, чтобы быть на связи со своими клиентами.

Как развиваться в диджитал. Какие каналы сейчас в тренде. Как зарабатывать больше и поднимать чек за свои услуги.

Рассказываем про инструменты для email-рассылок. Обсуждаем лучшие примеры и механики. Говорим о деньгах. Публикуем вакансии.

Figma — основной инструмент многих веб-дизайнеров, поэтому этот редактор изучают почти на всех курсах по UX-дизайну. Маркетологу Figma тоже может быть полезна. Если ваша работа хотя бы частично связана с сайтом и его улучшением, если у вашей компании есть приложение, которое надо периодически обновлять, то стоит хотя бы в общих чертах представлять, как работать в Figma.

Вот несколько задач, с которыми поможет справиться Figma:

Чем крута Figma

Мультиплатформенность. Работать в Figma можно с ПК, телефона и любого другого устройства. Самое классное, что даже если у вас нет аккаунта в Figma, вы сможете просматривать дизайн. Однако оставить комментарии или внести изменения не получится.

Командная работа. Figma работает по принципу Google Docs и других подобных сервисов. Над любым проектом можно работать совместно с другими участниками. Ссылкой на проекты легко делиться. Можно дать права на редактирование или просто на просмотр. Это удобно, если отправляешь дизайн клиенту на утверждение и не хочешь, чтобы он там что-нибудь случайно сломал.

Минималистичный интерфейс. Можно быстро разобраться с основными функциями, посмотрев 2-3 видеоурока.

Бесплатный тариф. Пользоваться Figma можно бесплатно. При этом вам доступны все возможности и инструменты, но права на редактирование вы сможете дать лишь еще одному человеку.

Интерактивные прототипы. В Figma есть возможность объединять наборы экранов сайта или приложения, чтобы по клику на кнопку открывалась форма или другое окно.

Компоненты. Это аналог смарт-объектов в PhotoShop. Компоненты позволяют дизайнерам быстро вносить изменения в одинаковые элементы интерфейса. Например, менять названия разделов в меню на каждой странице или цвета кнопок.

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

Источник

Ссылки в фигме: как сделать кликабельные гиперссылки.

Если вам потребовалось вставить кликабельные ссылки в фигме, то вот простая и пошаговая инструкция на 1 минуту. Вы узнаете как быстро и легко сделать гиперсссылку.

Ниже инструкция, по добавлению ссылок в текст, кнопку или любой другой элемент.

Как сделать ссылку в Figma в тексте

Чтобы добавить кликабельную ссылку в текст в Figma, выделите нужный фрагмент текста и нажмите на пиктограмму ссылки сверху. После этого вставьте ссылку на нужный сайт.

Если нажать на созданную ссылку, то появится возможность перейти по ней. Для этого нажмите на надпись «Open link». Если захотите отредактировать ссылку, то нажмите на надпись «Edit».

Как вставить ссылку в кнопку, изображение или любой элемент?

Чтобы добавить ссылку на кнопку, изображение или любой другой элемент в Figma, сначала нужно преобразовать его во фрейм. Для этого выберите элемент и нажмите на правую клавишу мыши. Выберите пункт «Frame selection» или зажмите 3 горячие клавиши «Ctrl + Alt + G».

После того, как фрейм создан, выберите его, перейдите в правой панели в раздел «Prototype» и нажмите напротив надписи «Interaction» на плюс.

Нажмите на надпись «Click». В появившемся окне вместо значения «None» выберите «Open link».

Появится возможность вставить вашу ссылку в поле, как показано на скриншоте выше.

Если перейдете в режим презентации (иконка Play сверху и справа), то при нажатии на эту кнопку будет открываться та ссылка, которую вы вставили.

Заключение

Итак, вы узнали как делать ссылки в фигме. Это довольно простая инструкция по гиперссылкам. Если есть вопросы по теме ссылок или по работе или в программе Figma, то пишите их в форме комментариев ниже. Если тема будет интересной, то напишем отдельную статью по этой теме или запишем видео.

Источник