Просмотр в фигме: режим презентации в 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
Фигма автоматически сохраняет версию файла после 30 минут простоя в любом проявлении: вы можете просто полчаса не вносить правки, либо вообще закрыть файл.
Из истории можно восстановить или дублировать версию файла.
Как сохранить версию в историю
Вы также можете самостоятельно сохранить версию: откройте меню File > Save to Version History (горячие клавиши (Mac) ⌥ + ⌘ + S ).
Во всплывающем окне укажите название и описание версии.
Сохранение версии истории в Figma
Как просмотреть историю
Просмотреть историю можно через меню File > Show Version History.
Окно истории открывает справа на месте панели свойств. Каждая сохраненная версия хранит информацию о том, кто ее редактировал и когда она была сохранена.
Список версий в Figma
Чтобы увидеть версию из списка, нажмите на ее название.
Чтобы вернуться в актуальное состояние, нажмите на Edit Current Version в верхней левой части редактора.
Как восстановить версию
Чтобы восстановить версию, выберите ее и нажмите на дополнительное меню из трех точек, а затем выберите Restore This Version.
Восстановление версии
Это восстановит файл до этой конкретной версии и создаст новую версию автосохранения в вашей истории.
Как восстановить версию в другой файл
Чтобы восстановить версию в другом файле, воспользуйтесь инструментом «Дублирование»: нажмите на дополнительное меню из трех точек, а затем выберите Duplicate.
Дублирование версии создает новый файл, который является точной копией версии без какой-либо истории версий, комментариев или разрешений для общего доступа.
Figma — простое решение для дизайнера, сложное решение для верстальщика
Если вы работаете в области web-разработки, то рано или поздно, вам суждено будет познакомиться с Figma. Смиритесь с этим фактом и начинайте изучать. Я же попробую описать данный продукт, с точки зрения повседневного пользователя.
Для начала стоит упомянуть о парочке приятных моментов, за которые дизайнеры любят использовать Figma. Что ж приступим:
Самый неоспоримый плюс – халява
В отличие от повседневных продуктов дизайна, будь то Adobe пакет (Photoshop, Illustrator, Adobe XD … ), или Bohemian Coding (Sketch) эта программа условно бесплатная для пользователей. Разумеется за определенные финансовые вливания Вы получите дополнительные плюшки, но и без оных, продукт выглядит вполне достойно. Будем надеяться, что данная политика не поменяется, и правообладатели не начнут закручивать гайки. Аминь.
Для тех кто не в теме – это способность одновременно работать над одним проектом нескольким людям. И когда я написал одновременно, то это действительно так, я как верстальщик, вижу, как дизайнер(или даже дизайнеры) правят проект realtime прям на своем мониторе. Выглядит этот эффект как teamViewer. Дизайнер больше не хранит свои макеты локально, теперь это всё живет в облаках. Не нужно больше обмениваться скриншотами с менеджером, процесс создания проекта стал публичным, необходим только браузер с нормальной скоростью Интернета.
Задействован принцип кроссплатформенности
Стала не важна операционная система (Windows, MacOS, Linux) верстальщика и дизайнера. Они смогут работать над одним проектом без проблемы несовместимости ОС.
Удобные быстрые клавиши
Если вы уже привыкли работать с графическими редакторами посредством hot key для вас не составит труда быстро освоиться с новым функционалом.
Программа имеет довольно толковое описание клавиш быстрого вызова, и к тому же они сильно повторяют функционал клавиш Photoshop или Sketch, за что авторам отдельное спасибо. Все ведь ленивые и не хотят опять обучаться, как вызвать элемент Pen.
Возможность работы с векторной графикой
В Figma можно работать не только с растровыми изображениями, но и с векторной графикой, экспортируя и импортируя готовые решения в формат SVG. Эта фишка очень полезна, особенно если вы беспокоитесь о производительности своего web проекта, который можно очень сильно ухудшить, если вставлять не тот формат, или не того размера.
Возможность создания компонентов
Да, для верстальщиков поясню, что в дизайне тоже есть компоненты. И им тоже даровано свойство Наследования (привет ООП). К примеру можно создать типовую кнопку, а потом “продублировать ” её по всем артбордам. И потом, когда от заказчика придёт желание перекрасить все кнопки в розовый горошек, это всё решается за пару кликов (разумеется, если дизайнер умеет данным свойством пользоваться)
В Фигме есть функционал настраиваемых плагинов, и их там довольно много.
Представлены как продукты частных компаний, так и реализации open source сообщества. Пока что, из-за частых обновлений софта можно увидеть забагованость функционала, но я уверен, что это поправят.
А теперь о негативных моментах, с которыми сталкиваются пользователи Figma в процессе работы, ну или о том, чего так не хватает, а очень надо.
Проблема с определением фактических размеров элементов и расстояния между ними
К сожалению, в процессе верстки постоянно сталкиваюсь с проблемою узнать реальное расстояние между элементами. Особенно плохо обстоят дела, если дизайнер забыл очистить картинки от прозрачного фона (transparent background) или некорректно прописал межстрочный интервал для текста.
Иногда эту проблему можно решить, выбрав элемент отсчета, а затем с зажатой клавишей Alt нажать на элемент, расстояние до которого необходимо узнать, но это не всегда работает.
Перекрытие и заблокированные слои
Очень часто происходят случаи, что получив ссылку на макет сайта, верстальщик не может изъять нужные элементы дизайна по причине того, что они перекрыты вышестоящими слоями, или же эти слои вообще заморожены.
Проблемы с текстом
а если открыть данный шаблон уже в режиме дизайнера, то уже можно наблюдать, что там Roboto Bold задействовано.
Семейство шрифта вроде ж одно и то, а только в процессе верстки его всё равно через свойство @font-face отдельно подключать надо, иначе эффекта как на макете не получить. И пока не затяните на свой проект, вы этого не узнаете (и можно долго играться со свойством font-width).
Если же вы работаете не только с открытыми Google шрифтами, но и используете личный подключаемый набор, а он ещё и кирилличный, то будьте готовы к приключениям.
Отдельные танцы с бубном начинаются, если ваш дизайнер очень любит градиентные шрифты с тенями и обводками.
Тут в код, предоставляемый Фигмой, можно вообще не смотреть. Как вариант решения проблемы вы можете сохранить данный текст в SVG (иногда это дешевле чем импортировать к странице новый шрифт), ну а если всё-таки будет необходимость заниматься решением данной проблемы на серьезном уровне, то опять забирайте макет на свой личный проект.
Тут правда у меня возникли вопросы, почему возле ползунков смены значения градиента разработчики поленились вывести хотя бы процент текущего значения, не говоря уже про угол направления градиента, и мне как верстальщику приходиться самому угадывать какое значение надо будет поставить в background: linear-gradient, а потом починить это через background-clip: text; Собственно свойство text-stroke в коде фигмы я пока тоже не встречал, хотя возможно это связано что оно ещё не во всех браузерах зеленое.
*Делитесь своими мнениями в комментариях, почему это может быть так сложно реализовать?
Figma является облачным продуктом
Иначе говоря, если у Вас нету связи с глобальной паутиной на хороших скоростях, возвращайтесь в свою пещеру к настенной живописи, или переходите на оффлайновые продукты. Тут Фигма увы бессильна и Ваше творчество так и останется недоступно для общественности, и не важно, что сроки горят, и завтра сдавать проект.
Работа в фигме расхолаживает дизайнера
Возможно, конечно, это лично моё субъективное мнение, но макеты, которые отдаются дизайнерами под верстку сайтов, ниже качеством по сравнению с макетами, выполненными в Photoshop или Sketch. (* я прям чувствую, что сейчас у кого-то подгорело)
И ладно, если с текстом это ещё может нормально прокатить, ленивый верстальщик с шестнадцатеричного представления цвета
скорее всего перейдет к rgba представлению
А вот если дизайнер решит делать такую штуку к блоку элементов (там где про background-color, color, background: linear-gradient ….), при этом, половина элементов будет с прозрачностью, а вторая, нет, то тут можно во вкладку Code и не смотреть.
В общем, Фигму нельзя рекомендовать как начальный инструмент для молодого дизайнера. Порог входа, тут пониже будет, но и нервы вы своими макетами коллегам испортите.
Отсутствие нормальной Темной темы
Это очень печально, но пока в Фигме нет возможности адекватно менять визуальное представление рабочего пространства под свои нужды. Особенно остро это стает когда пользуешься приложением, а не браузерной версией где можно извращается, ставя поверх браузера какие-то дополнения, плагины. Разуметься присутствуют плагины умельцев, но поскольку Фигма очень часто апдейтиться, то плагины за ней не успевают.
Лучше б конечно, чтоб за данный функционал отвечали те, кто пишет продукт
Личные попытки поставить Темную тему. (Windows 10, Chrome 76) были печальны.
*Возможно, у владельцев Mac-ов дела обстоят лучше. Делитесь в комментариях…
О том почему это важно и полезно можете посмотреть в презентации Тёмная сторона веба, Никиты Дубко Надеюсь что поправят. Всё-таки дизайнеры — тоже люди, и им тоже надо дать возможность комфортно работать 8 часов в сутки 5 дней в неделю.
Вот такой вот кратенький обзорчик Figma у меня вышел с пожеланиями и ворчанием.
Надеюсь, что мой пост прочитает кто-то из разработчиков данного продукта и сможет его улучшить. В любом случае за данным продуктом я вижу будущее, и желательно, чтоб он развивался в правильном направлении.
FAQ Figma. Ответы на самые популярные вопросы
Figma купить
Покупать фигма совсем не обязательно. Это бесплатная программа. Ты можешь зарегистрироваться в ней на официальном сайте фигма.ком, скачать там десктопную версию пользоваться на здоровье бесплатно. Платить нужно только тем, кто работает в команде и нужен доступ большому количеству пользователей к библиотеке компонентов и стилей. Тогда придется выложить по 15 долларов за пользователя в месяц. Такой подход больше настроен для больших команд, студий и корпораций.
Программа фигма, как научиться в ней работать
Один из самых популярных вопросов. Есть замечательный курс по фигме, в котором все четко и подробно расскажут и ты научишься работать в программе.
Figma как экспортировать
Экспортировать в фигме можно в несколько разрешений и несколькими способами.
Способ номер один. Выделяешь фрейм, справа в панели в самом низу есть вкладка export там выбираешь нужный формат и место для сохранения
Способ номер два. Клик правой клавишей на объекте и выбираешь формат для копии и эта копия сохраняется у тебя в буфере обмена. Теперь можешь постить ее куда хочешь
Figma или adobe xd
Если ты читаешь это на страничке сайта, посвященного фигме, то у меня для тебя есть ответ — Figma.
Figma как сохранить проект
Тень в фигме. Как настроить тень в Figma
Тень в фигме прячется в разделе effect. Там есть, как ниспадающая, так и внутренняя. Кстати, ты можешь применять к одному объекту сразу несколько теней, что очень круто.
Как верстать из Figma
Верстать из фигмы довольно просто. Когда ты делишься проектом с верстальщиком он может посмотреть код каждого элемента в макете, расстояния и многое другое, что ему нужно. Фотошопу такое и не снилось. Так же он может удобно нарезать макет на картинки и иконки. + ко всему ты всегда можешь выгрузить свой макет в zeppelin, а там уже верстак знает что делать. Все css свойства объектов можно посмотреть в отдельной вкладке справа вверху, там же можно посмотреть свойства для ios и android
Отмена в фигме, как отменить действие
Так же, как и везде ctrl+z. Если ты не знал — фигма помнит твои изменения в макете 30 дней. Так что откатиться таким способом можно далеко. Но для большего удобства есть контроль версий.
Figma или Фотошоп
Однозначно Фигма. Без вариантов.
Как поделиться макетом в Figma
Тут ты можешь выбирать с какими правами делиться макетом — только просмотр или с возможностью редактирования. Так же можно через имейл приглашать людей в проект.
Как ставить комментарии в фигме
Для того, чтобы ставить комменты в фигме есть отдельная пиктограмма. По клику на ее ты можешь видеть комменты других участников проекта.
Как сохранить макет себе
Сохранить макет в фигма себе просто. Дублируешь его к себе в черновики и там ты уже в праве распоряжаться им как хочешь. При этом все внесенный тобой изменения не будут отражаться в оригинальном макете.
Как скрыть рабочие поля в Figma
Чтобы посмотреть только ui своей работы без рабочих полей жми ctrl+\ (англ раскладка)
Как создать вертикальный текст
Есть пара вариантов:
Как в фигме написать текст по кругу
НИКАК. Тот же ответ на вопрос «Как искривить текст, как расположить текст на кривой, на дуге и тд. Пока что такой фичи не завезли.
Пока то есть кривой и сырой плагин для таких целей, но глобально ответ на этот вопрос остается прежним — никак. вот тут смотри про плагин
http://figmaweb.ru/kak-razmestit-v-figma-tekst-po-krugu-ili-krivoj/
Как измерить расстояние между объектами
Выделяешь объект, зажимаешь alt и смотришь расстояния до интересующих тебя блоков. Помни, что для текста расстояния меряются от текстового блока, а не от букв.
Как удалить направляющие
Либо обратно перетащить их за пределы рабочей области, либо выделить и нажать del.
Как сохранить проект в Figma
Как открыть несколько окон Figma?
В десктопном клиенте Figma на macOS — File → New window.
При работе в браузере — просто открой несколько вкладок с Figma
В десктопном клиенте Figma на
Windows — Ctrl + Shift + N
Как загрузить в Figma изображение в большом разрешении?
Фигма принимает изображения максимально 4096х4096. Если ты попытаешься загрузить большее разрешении, оно все равно ужмется до 4096х4096.
Как отключить Google Fonts в Figma?
Сними галочку напротив пункта «показать гугл шрифты»
Как макет из Фигмы сохранить в формате psd для фотошоп?
Глупая и странная затея. Есть костыль, конечно, но лучше отказаться от общения с заказчиком, которые требует от тебя таких извращений.
Решение: из фигмы сохраняем в svg или pdf, открывает это в иллюстраторе или афинити и уже оттуда сохраняем в psd
Как в Figma объединить слои
Объединить в группу ctrl+g сразу во фрейм ctrl+alt+g. Можно еще воспользоваться булевыми операциями и сделать union. Разные способы объединения слоев хороши для разных задач.
Как в фигме вставить скопированный текст
Ты, конечно, удивишься — ctrl+v. Чтобы вставить текст без стилей, а точнее сказать, чтобы он принял на себя стили того текстового блока куда ты его вставляешь ctrl+shift+v
Как поделиться макетом figma
Кликаешь на кнопку Share у себя в рабочей области
Далее во всплывающем окне кликаешь на ссылку Copy Link. Все. ссылка скопирована у тебя в буфер обмена. Можешь отправлять ее куда угодно и кому угодно.
49 комментариев к “FAQ Figma. Ответы на самые популярные вопросы”
Раньше верстал из Фотошопа. Последние пол года в коллективе работаю в Фигме. Фигма в подметки не годится Фотошопу.
чем именно фигма хуже для верстальщика?
Может не хуже. Но верстальщику, который умеет уже все делать в фотошопе, нужно учиться делать все в фигме. например, дизайнер не всегда понимает как вообще можно сделать то, что он нарисовал на сайте. Верстальщику нужно это все придумывать. И часто какие-то элементы, которые дизайнером задумывались как отдельные приходится кидать на фон. Для этого их нужно объединять как-то с фоновыми изображениями. Наверно в фигме есть возможность это сделать, перегруппировать и экспортировать, но это нужно глубоко изучать фукционал.
2. есть небольшой фон, размещенный посреди блока. Как экспортировать его чтобы фон был нужной ширины, скажем 1920 пикселов, при этом все незанятое пространство заполнялось прозрачным фоном? Я не нашел такой возможности. Может плохо искал.
3. Выбор элементов не совсем удобный. Если есть один слой с элементами и на него дизайнер накладывает другой слой (например фигурный фон залезает) то элементы предыдущего фона выбрать можно только справа в слоях.
4. работа с текстовыми блоками. Если там смешанный стиль, как выделить отдельно разные части и понять какой стиль применен?
5. расстояние между блоками. Выделить и держа альт навести на соседний блок. Расстояние показывается на панели красными цифрами. Если оно маленькое, то разобрать ничего невозможно. То-же касается и этой надписи на фоне. То-же и расстояний от элемента до края. Приходится либо пользоваться отдельной программой-линейкой, либо экспортировать картинку полностью, кидать в фотошоп и там замерять инструментом-линейкой…
Есть еще ряд неудобств, но больше всего бесит уверенность дизайнеров, которые утверждают что переход на фигму — это радость и панацея для верстальщика и он должен дизайнеру ноги целовать за то, что ему в фигме отдали дизайн на верстку.
Вижу большинство конкретных и личных нюансов. некоторые из них можно решить прост вы не знаете как. например, меряйте расстояние прямоугольником. кстати и дизайнерам не удобно смотреть красные расстояния на красном фоне)) понятно дело, что фигма не для верстки как и фотошоп.. прост вы привыкли к нему. авокод — вот это сила.
Вообще, советую не использовать дефолтный файл, который вам дают, а копировать себе со всеми правами и у вас отпадут все описанные проблемы.
Правильный дизайнер интерфейсов, должен знать минимальные правила вёрстки, тогда и проблем с передачи макета верстальщику не будет.
Фигма простой и мощный инструмент. Если бы она была так не удобна, то не была бы так популярна. ФШ это дед.
Учите фигму, там всё просто и супер удобно. Я ФШ оставил только для красивых картинок.
Понятно дело, что фигма не для верстки как и фотошоп. — это ваша же цитата. Так вы нам и расскажите чем именно она хуже.
Может ваша программа и очень хорошая, но надо быть чуток скромнее — и люди будут к вам снисходительнее.
>Фигма в подметки не годится Фотошопу.
Категорические поддерживаю.
Даже странно видеть, как некоторые неумные люди пытаются еще заявлять, что фигма лучше, а потом искать всяческие отмазки на вопрос — а как в фигме сделать (тут берется любой из примеров того, что в фотошопе делается легко и быстро)?