Как поделиться проектом в фигме
Как организовать проект в 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. расстояние между блоками. Выделить и держа альт навести на соседний блок. Расстояние показывается на панели красными цифрами. Если оно маленькое, то разобрать ничего невозможно. То-же касается и этой надписи на фоне. То-же и расстояний от элемента до края. Приходится либо пользоваться отдельной программой-линейкой, либо экспортировать картинку полностью, кидать в фотошоп и там замерять инструментом-линейкой…
Есть еще ряд неудобств, но больше всего бесит уверенность дизайнеров, которые утверждают что переход на фигму — это радость и панацея для верстальщика и он должен дизайнеру ноги целовать за то, что ему в фигме отдали дизайн на верстку.
Вижу большинство конкретных и личных нюансов. некоторые из них можно решить прост вы не знаете как. например, меряйте расстояние прямоугольником. кстати и дизайнерам не удобно смотреть красные расстояния на красном фоне)) понятно дело, что фигма не для верстки как и фотошоп.. прост вы привыкли к нему. авокод — вот это сила.
Вообще, советую не использовать дефолтный файл, который вам дают, а копировать себе со всеми правами и у вас отпадут все описанные проблемы.
Правильный дизайнер интерфейсов, должен знать минимальные правила вёрстки, тогда и проблем с передачи макета верстальщику не будет.
Фигма простой и мощный инструмент. Если бы она была так не удобна, то не была бы так популярна. ФШ это дед.
Учите фигму, там всё просто и супер удобно. Я ФШ оставил только для красивых картинок.
Понятно дело, что фигма не для верстки как и фотошоп. — это ваша же цитата. Так вы нам и расскажите чем именно она хуже.
Может ваша программа и очень хорошая, но надо быть чуток скромнее — и люди будут к вам снисходительнее.
>Фигма в подметки не годится Фотошопу.
Категорические поддерживаю.
Даже странно видеть, как некоторые неумные люди пытаются еще заявлять, что фигма лучше, а потом искать всяческие отмазки на вопрос — а как в фигме сделать (тут берется любой из примеров того, что в фотошопе делается легко и быстро)?
Как передать файл Figma для редактирования, если в меню нет Can Edit
Прохожу я значит большой курс по UX дизайну. Работаем естественно в Figma. И все выполненные задания мы должны отправлять на проверку куратору. Одно из требований школы это то, что файл Figma должен быть сразу доступен проверяющему для редактирования.
Я вроде как работаю в Фигме не первый год, знаю эту программу отлично, файлами тоже делиться умею, делала это неоднократно. Но каково же было мое удивление, что я не смогла найти этот переключатель сразу. И первое выполненное задание пришлось отправить на проверку только в режиме просмотра (can view).
Естественно в ответе от куратора я получила видеоинструкцию для чайников, как включается опция Сan Edit.
Но черт побери, я же не чайник и не тупица 🥴 Там где у куратора есть, у меня почему-то нет. Смотрите на анимации ⇓
По приглашению выбрать можно, а для всех нельзя
Так же быть не может. Пришлось разбираться.
Кстати, когда куратор уже зашел в файл и появился в списке пользователей с ограниченным доступом, тогда я смогла сменить ему статус на Can Edit. Но для моей учебы такой вариант не подходил, потому что возможность редактирования нужна сразу, а не когда я одобрю 😎
Как поделиться файлом Figma с возможностью редактирования
Оказывается проблема заключалась в том, что я слишком организованная 😄
Вообще в Фигме у меня полный порядок. Все файлы разделены на разделы и категории. Зная, что мне предстоит большой тренинг не на один месяц, я сразу создала отдельный раздел для школы. Естественно все домашние задания я собиралась сохранять в категории Спринты. А категория Work Files предназначалась для рабочих файлов, которые выдавали нам на обучении.
Теперь решения
Оказалось, чтобы поделиться файлом Фигма с возможностью редактирования для всех, а не только для индивидуально приглашенных, проект должен находиться в разделе Drafts. То есть в черновиках. Да, я тоже в шоке, попробуй догадайся.
Решение 1
Просто перенесите ваш проект в черновик и тогда сможете выбрать Can Edit.
Так должно получиться
Похоже придется все файлы с домашними заданиями хранить в черновиках в перемешку с реальными моими черновиками ☹️
Предполагаю что генерировать ссылку редактора, которая будет доступна всем, нельзя, потому что за дополнительных редакторов Фигма берет оплату. На бесплатном тарифе в команде может быть не более 2-х человек с правами редактирования. Поэтому генерировать такую общую ссылку не разумно, ведь она может попасть в свободный доступ.
Вот уж точно, век живи, век учись.
Дополнение…
Оказалось, что способ помогает не всем, стали копать дальше…
Если не сработал первый вариант, создайте новый пустой файл в разделе Drafts и проверьте, как у него обстоят дела с Share, можно ли им поделиться с возможностью редактирования. Попробуйте попереносить этот пустой файл по разным разделам вашей учетной записи и посмотрите, измениться ли что-нибудь.
Если нет, то скорее всего у вас самый сложный случай, с которым вы могли столкнуться. Какой-то косяк, связанный с учетной записью и регистрацией. Это когда вообще на аккаунте шеринг и правки получается дать только членам команды и приглашенным. Кому угодно по ссылке – дать такой доступ не получается.
Я стала свидетелем двух таких случаев за последний месяц. Поддержка фигмы ответила, что не знают, в чем может быть проблема. Опытным путем мы выяснили, что срабатывает только один вариант. Такой:
Решение 2
Выйдите из своей учетной записи и зайдите под другой. Например, если регистрировались через почту, зайдите с помощью Google и наоборот.
Протестируйте новый аккаунт. Там все расшаривается как надо? Ну тогда перенесите ваш проект из одного аккаунта в другой. Других вариантов нет. Успокаивает то, что эта болезнь новых, недавно созданных аккаунтов (на старых пока не встречалась). А значит сменить учетную запись не большая проблема, пока проектов мало.
UX/UI Веб-дизайнер. Занимаюсь дизайном и разработкой сайтов для бизнеса более 6 лет. Связаться со мной можно через страницу Контакты
Figma для маркетологов. Основные возможности и принципы работы
Блочный редактор писем, готовые шаблоны email, формы подписки и автоматизация. Запускайте email-рассылки, чтобы быть на связи со своими клиентами.
Где взять базу? Как сделать красивое письмо? Какие показатели смотреть? Расскажем об этом в бесплатном курсе из 16 писем. Татуировка в каждом письме!
Рассказываем про инструменты для email-рассылок. Обсуждаем лучшие примеры и механики. Говорим о деньгах. Публикуем вакансии.
Figma — основной инструмент многих веб-дизайнеров, поэтому этот редактор изучают почти на всех курсах по UX-дизайну. Маркетологу Figma тоже может быть полезна. Если ваша работа хотя бы частично связана с сайтом и его улучшением, если у вашей компании есть приложение, которое надо периодически обновлять, то стоит хотя бы в общих чертах представлять, как работать в Figma.
Вот несколько задач, с которыми поможет справиться Figma:
Чем крута Figma
Мультиплатформенность. Работать в Figma можно с ПК, телефона и любого другого устройства. Самое классное, что даже если у вас нет аккаунта в Figma, вы сможете просматривать дизайн. Однако оставить комментарии или внести изменения не получится.
Командная работа. Figma работает по принципу Google Docs и других подобных сервисов. Над любым проектом можно работать совместно с другими участниками. Ссылкой на проекты легко делиться. Можно дать права на редактирование или просто на просмотр. Это удобно, если отправляешь дизайн клиенту на утверждение и не хочешь, чтобы он там что-нибудь случайно сломал.
Минималистичный интерфейс. Можно быстро разобраться с основными функциями, посмотрев 2-3 видеоурока.
Бесплатный тариф. Пользоваться Figma можно бесплатно. При этом вам доступны все возможности и инструменты, но права на редактирование вы сможете дать лишь еще одному человеку.
Интерактивные прототипы. В Figma есть возможность объединять наборы экранов сайта или приложения, чтобы по клику на кнопку открывалась форма или другое окно.
Компоненты. Это аналог смарт-объектов в PhotoShop. Компоненты позволяют дизайнерам быстро вносить изменения в одинаковые элементы интерфейса. Например, менять названия разделов в меню на каждой странице или цвета кнопок.
Недостатков у Figma гораздо меньше. Я бы отнесла сюда интерфейс на английском языке, который может отпугнуть начинающих дизайнеров, и то, что возможности редактора заточены под веб-дизайн. Баннеры и плакаты в Figma рисовать неудобно.
Просмотр в фигме: режим презентации в Figma и ссылка на проект
В этом видео поговорим о том как делать предварительный просмотр в фигме. Разберемся с режимом презентации и как поделиться ссылкой на ваш проект с заказчиком или любым другим человеком.
Как отправить ссылку на проект в фигма
Чтобы поделиться ссылкой на ваш проект в фигме и отправить его вашему заказчику, коллеге или любому другому человеку нажмите на кнопку «Share» в верхнем правом углу. Затем на надпись «Copy link».
Если эту ссылку открыть в браузере, то можно будет увидеть, ваш курсор и что вы делаете в реальном времени.
Вы будете видеть аватарки тех, кто просматривает ваш проект сверху и справа. Если нажмёте на какую-то аватарку, то будете видеть курсор и действия этого человека.
Как это можно использовать? Например таким можно обсуждать с заказчиком проект и в реальном времени вносить правки.
Как изменить роль приглашенного человека в проекте в фигме?
Если вы пригласили какого-то человека или поделились с ним ссылкой на проект, то можно изменить его роль. Нажмите на синию кнопку «Share», сверху и справа. Затем напротив нужного человека из списка справа выберите одну из следующих ролей:
Режим предварительного просмотра в фигме
Чтобы включить режим предварительного просмотра в фигме, нажмите на иконку «Present» сверху справа (она похожа на Play). У вас откроется новая вкладка, где вы сможете просматривать фреймы, которые есть в вашем проекте.
Если до этого в режиме прототипирования (Prototype) вы настроили связи между фреймами и элементами интерфейса, то можно просматривать проект, как интерактивный, кликабельный прототип.
Например при нажатии на кнопку можно сделать всплывающие окна (popup формы), перенаправлять человека к другому фрейму, сделать поля в контактных формах активными и т.д.
Другими словами можно создать ощущение реального просмотра сайта или мобильного приложения с возможностью кликать и взаимодействовать с разными элементами интерфейса.
Как поделиться ссылкой на прототип в фигме?
Если вы находитесь в режиме «Present», то можете поделиться ссылкой на ваш прототип. Для этого нажмите на правую верхнюю кнопку «Share prototype» и в появившемся окне нажмите на надпись «Copy link».
При открытии скопированной ссылки в браузере, можно просматривать прототип в режиме презентации.
Внизу по центру можно переключаться между фреймами, с помощью стрелок слево и вправо.
Как в фигме (в режиме просмотра) изменить отображаемое устройство?
Если вы хотите изменить отображаемое устройство в режиме предварительного просмотра «Present», то выберите фрейм. Перейдите во вкладку «Prototype» и нажмите на кнопку «Show prototype settings».
Затем внизу надписи «Device» выберите подходящее устройство из списка. Для примера я выберу фрейм с мобильным приложением и из списка выберу «Iphone 11 pro max».
Если открою предварительный просмотр в фигме и перейду в режим презентации, то фрейм будет отображаться в мобильном устройстве.
Заключение
Итак, в этом видео вы узнали как делать предварительный просмотр проекта в фигме. Также, как демонстрировать вашу работу заказчику или любому человеку скопировав ссылку на проект.