Как в Figma дать клиенту ссылку на макет — без необходимости ему авторизироваться в проге?
Возникла такая проблема: надо клиенту дать ссылку на макет, но он не хочет регистрироваться либо авторизоваться в самой проге?
Никак не могу сообразить и самое обидное не могу в гугле найти. Какую ссылку не скопирую в Figma — все требуют авторизации. Может как-то не так задаю вопрос.
- Вопрос задан более трёх лет назад
- 19494 просмотра
2 комментария
Простой 2 комментария
Figma Tips and Tricks — сверхмощный рабочий процесс
Вот полный список самых последних и самых удобных комбинаций клавиш и техник Figma. Они сэкономят ваше время и сделают ваш рабочий процесс в Figma максимально комфортным.
Дублирование слоев
Чтобы дублировать слой, выберите необходимый, и перетащите с зажатой клавишей Option. Чтобы сделать еще больше копий вы можете использовать Cmd + D.
Наименования слоев по умолчанию
Просто удалите старое имя слоя и нажмите Return, если вам нужно сбросить наименование текстовых слоев, и имя будет скопировано с текстового поля.
Необычные круги
Нарисуйте круг и используйте инструмент Arc, чтобы превратить его в какой-нибудь крутой график.
Применение непрозрачности
Чтобы изменить значения непрозрачности для любого выбранного объекта, используйте цифры на клавиатуре. Для еще большей точности быстро нажмите две цифры.
Как копировать стиль
Чтобы скопировать стиль выбранного элемента, используйте Command + Shift + C, а затем Command + Shift + V, чтобы вставить его в другой объект.
Как копировать выбранные свойства
Все точно также, как и со стилями. Просто выделите необходимые свойства на панели (можно выбрать несколько свойств ) и скопируйте их с помощью Cmd + C, а затем вставьте другой объект с помощью Cmd + V.
Сверхбыстрое изменение
Наведите курсор на любое значение на панели «Свойства», зажмите и перетаскивайте — значения будут плавно изменяться.
Умное выделение
Одновременно выберите несколько элементов и чтобы отрегулировать расстояние используйте линии между ними. Кроме того, чтобы изменить положение элементов, вы можете нажать на кружок в центре объекта и перетащить его.
Перемещение выделения
Сделайте рамку выделения кликом мыши и не отпуская ее нажмите и удерживайте клавишу пробела, потом просто перетащите выделение в любое место.
Производительность Figma
В меню (доступ к нему с помощью Cmd + /), найдите «Использование ресурсов» и посмотрите состояние ресурсов, используемых Figma.
Сочетания клавиш
Поиграем с комбинациями клавиш! Введите Ctrl + Shift +? и посмотрите, какие комбинации вы недавно использовали.
Наложения в прототипах
Для плавного, мягкого эффекта создайте модальное окно в виде отдельного фрейма, свяжите его с другим фреймом и установите в свойствах прототипа значение «Наложение».
Позиционирование оверлеев
Когда вы выбираете для «Overlay» «Пользовательский» режим наложения, вы можете легко перетащить его в любое место. Если вы наведите курсор мыши за пределы этого поля, сохраняя при этом выделение, вы можете использовать стрелки клавиатуры для большей точности изменений.
Состояния оверлеев
Чтобы установить несколько состояний для оверлеев, создайте несколько версий Overlay и добавьте взаимодействия между ними. Убедитесь, что вы установили свойство Swap для выбранного перехода, чтобы состояния заменяли друг друга.
Невидимые цели
Чтобы создать цель для ваших прототипов, нарисуйте прямоугольник и уменьшите его непрозрачность до 0%, или просто нажмите 0 на клавиатуре.
Специальные действия и триггеры
Вы можете использовать разные триггеры для переходов ваших прототипов, а также специальные действия, такие как возврат к предыдущему экрану или закрытие наложения.
Значение шага смещения
Найдите «Смещение» в меню (Cmd + /) и отрегулируйте большое и малое смещение для большей точности, управляя стрелками на клавиатуре. Большой сдвиг — стрелки клавиатуры + Shift, и вы можете установить его на 8 пикселей, если вы работаете с сеткой 8 пикселей.
Выбор заблокированных слоев
Чтобы получить доступ к заблокированным слоям, просто нажмите Ctrl + клик правой кнопкой мыши. Вуаля!
Пакетная разблокировка/отображение объектов
Найдите в Figma Menu (Command + /) «Unlock» или «Unhide» и вы получите параметр, который будет выполнять эту операцию за вас.
Пакетный импорт изображений
Нажмите Cmd + Shift + K чтобы открылось меню импорта изображений, а затем выберите несколько изображений. Тогда вы сможете нажимать на отдельные фигуры, чтобы заполнить их изображениями.
Импорт изображений и GIF
Чтобы заполнить форму изображением, перетащите изображение или gif файл на слой «Заливка» на панели «Свойства». Если вы используете GIF-файлы, нажмите на миниатюру, и вы сможете настроить кадр. Когда вы откроете файл, GIF будет работать.
Советы по копированию и вставке
Чтобы вставить другую фигуру в верх определенного слоя, используйте комбинацию Cmd + C, а затем Cmd + Shift + V.
Выбор с помощью клавиатуры
Вы можете использовать Return для редактирования векторных фигур, но также Return полезен для навигации в структуре группы. Вы можете выбрать группу и нажать Return, чтобы войти в нее.
Регулировка цветовых значений
Откройте настройки цвета и чтобы изменить его значения, просто нажимайте стрелки клавиатуры вверх / вниз. Работайте быстрее используя Shift.
Вставка значений из CSS
Выберите любой код из CSS, который содержит значения цвета, независимо от того, является ли он rgba, hex или hsla, и вставьте его в шестнадцатеричное поле в Figma — он автоматически установит нужное значение.
Изменение цвета в режиме реального времени
Если вы хотите предварительно просмотреть окончательный цвет, который вы применяете для объекта. Кликните на превью пипеткой (круг в правом верхнем углу) и зажмите правую кнопку мышки. Теперь, при перемещении мыши, цвет будет автоматически меняться.
Изменение свойств текста
Чтобы изменить свойства текстового поля, дважды щелкните на границе текстового фрейма.
Пакетное изменение шрифта
Найдите пункт «Выбрать все одинаковые шрифты» в меню, а затем измените его свойства на панели.
Отрегулируйте параметры «hue» и «alpha» с помощью прокрутки
Когда вы находитесь внутри палитры цветов, используйте прокрутку мыши, чтобы настроить оттенок, или удерживайте параметр Option, чтобы соответствующим образом изменить параметры альфа.
Создание нескольких компонентов
Вы можете создать несколько компонентов одновременно — просто выберите несколько объектов и перейдите к маленькой иконке шеврона в верхней части. В появившемся списке выберите вариант создания нескольких компонентов.
Префиксные слои
Используйте диалоговое окно Rename Layer для добавления префиксов к выбранным элементам.
Замена компонентов
Если вы называете Компонент с префиксом, вы можете легко поменять Компоненты с теми же префиксами, щелкнув правой кнопкой мыши на одном из экземпляров и выбрав в меню опцию «Обмен».
Поиск основного компонента
Чтобы перейти к главному компоненту, выберите экземпляр и выберите ссылку «Go to Master Component» на панели «Свойств».
Предварительный просмотр объекта
Если вы хотите добавить фон в предварительный просмотр компонента на панели «Ресурсы», просто используйте прямоугольник с черным фоном в качестве хоста для компонента.
Создавайте миниатюры в Figma
Если вы хотите, чтобы ваша главная страница в Figma была более чистой, то на первой странице документа используйте фрейм, который появится в виде эскиза. Поместите остальные части дизайна на вторую страницу.
Расширенное переименование слоев
Используйте Cmd + R после выбора слоев, которые вы хотите переименовать. Также постарайтесь использовать постоянные выражения для лучшего соответствия слоев и переименования.
Удаление частей наименований слоев
Используйте то же самое окно Layer Rename, чтобы удалить общие части наименований слоев. Например, если вы хотите удалить один сегмент между слешами, чтобы лучше организовать слои.
Поиск слоев на холсте
Если вы хотите быстро найти слой на холсте — поищите его на панели слоев и дважды щелкните на миниатюру слоя. Тааадааам! Все просто.
Группировка цветовых стилей
Подобно именам слоев, которые вы можете сгруппировать, вы можете использовать тот же метод для группировки цветов внутри цветовых стилей.
Добавление описаний к компонентам
Вы можете легко добавить описание к любому компоненту. Просто убедитесь, что вы выбрали основной компонент, и тогда вы сможете изменить его описание в свойствах. Во время передачи исходников комментарии будут отображаться как комментарии в CSS, так что это простой способ добавить заметки для разработчиков в компонент.
Сохранение файлов с описанием
Если вы хотите сохранить файл с дополнительным описанием в истории редакций, просто используйте сочетание клавиш Cmd + Shift + S.
Совместное использование определенной версии документа
Вы можете получить доступ к истории версий в Figma, а затем выбрать любую из них. Кликнув правой кнопкой мыши вы можете поделиться нужной версией в виде ссылки.
Обмен ссылками из Figma
Если вы хотите быстро поделиться ссылкой на документ из десктопного приложения, щелкните правой кнопкой мыши по имени документа и выберите параметр «Копировать ссылку».
Открытие файлов из буфера обмена
Если у вас есть ссылка на файл Figma, и вы хотите открыть ее прямо в десктоп приложении, просто выберите «Файл» → «Открыть URL из буфера обмена». Вот и все, ребята! … по крайней мере пока что? Я буду постоянно обновлять эту статью, поэтому не забудьте оставить комментарий или просто добавьте ее в закладки! Перевод статьи Greg Rog
Импорт и экспорт форматов в Фигме. Конвертирование дизайн-макетов в разные форматы
Есть большой список программ в которых UI/UX дизайнеры создают макеты для сайта. Figma, Sketch, Adobe XD, Photoshop – это лишь небольшой список самых популярных из них. Каждое приложение имеет свои достоинства, которых нет у других. Поэтому иногда необходимо иметь возможность переместить дизайн-макет, сделанный в одной программе, для редактирования его в другой. В данной статье мы затронем способы конвертирования между форматами, в частности для Фигмы. Так как в свете последних событий это является наиболее актуальным.
Какие форматы поддерживает Фигма
Первое, что мы рассмотрим это форматы, которые Figma поддерживает из коробки (то есть вам не требуется установка дополнительных плагинов или расширений, для работы с ними).
Импортировать мы можем почти любые картинки, Sketch файлы и сами файлы Фигмы (.fig)
Экспортировать можно в PDF (но только фреймы, находящиеся в рутовой папке) – это нужно в основном для того, чтобы презентовать ваш макет.
Так-же фигма позволяет экспортировать в PNG и SVG выбранный набор элементов. Делается это через контекстное меню (ПКМ -> Copy/Past as)
На этом возможности фигмы заканчиваются и для взаимодействие с другими форматами, вам нужно приложить чуть больше усилий. Об этом и пойдет речь дальше.
Конверсия между форматами
Прямая конверсия между двумя программами не всегда возможна, поэтому для того чтобы преобразовать дизайн-макет из одной программы в другую нужно преобразовывать макет в промежуточный формат. На диаграмме ниже представлены всевозможные взаимосвязи между форматами.
Если стрелка входит в определенный формат, то это означает, что “исходящий” формат можно стандартными средствами преобразовать во “входящий”. К примеру файлы фотошопа (.psd) могут зачитываться при помощи Adobe Illustrator и Sketch. Или к примеру Фигма может зачитывать Sketch файлы.
Отдельно нужно сказать про EPS и SVG форматы. Они не имеют конкретной программы, которая их создает. Поэтому для них входящая стрелка означает, что “источник” умеет экспортировать в этот формат. К примеру, Sketch умеет экспортировать в формат EPS.
На основе данной диаграммы также можно сделать вывод, что все программы умеют импортировать SVG и почти все экспортировать. Поэтому его можно назвать самым удачным “промежуточным” форматом.
Для того чтобы сконвертировать Фигму в HTML есть 2 способа. Бесплатный и условно-бесплатный. Начнем со второго.
К условно-бесплатным способам можно отнести различный плагины или web-конвертеры, которыми вы можете воспользоваться, но только пока действует бесплатная пробная версия, дальше придется платить. Одним из примеров может быть AnimaApp.
Бесплатный способ более интересный (сложный). Состоит он в следующем -вам нужно экспортировать ваш дизайн-макет в PDF, с помощью стандартных средств Фигмы, после чего найти инструмент, для просмотра пдфника в вебе (Только не используйте стандартный просмотрщик, вам нужен ресурс, который преобразует ваш документ в HTML страничку. Например этот – PDF Viewer). Как можете видеть на картинке ниже, после импорта, ваш PDF превратился в HTML верстку.
После этого скачайте весь сайт при помощи Ctrl + S и вы получите файлы сайты. Теперь осталось дело за малым) Отделить HTML код вашего макета от остальной части скаченного сайта.
Есть вот такой плагин (Protoship Teleport), который позволяет экспортировать любую HTML страничку в Adobe XD файлы. Для этого вам нужно скачать расширение для Google Chrome, а также расширение для самого Adobe XD. Можно посмотреть на странице плагина. Вот так это выглядит:
Export Kit
Отдельное внимание нужно уделить следующему инструменту для экспорта дизайн-макетов в готовые проекты. С помощью данного приложения вы НЕ сможете преобразовать файл из одного дизайн формата в другой. Оно предназначено для конвертирования дизайн-макета в готовый интерактивный проект. Таким образом вы сможете создать дизайн в Figma, Sketch или др. Приложении и на основе него сделать готовую HTML страничку или Android приложение. При этом вы получите не сплошной HTML, а проект созданный c использованием фреймворка (Например с помощью React). Естественно звучит это все слишком хорошо, чтобы быть бесплатным.
Если вам нужен бесплатный рабочий способ, с помощью которого можно преобразовать дизайн из одного формата в другой, то конвертируйте в SVG, после чего вы можете использовать этот файл в любом редакторе. Минусы данного подхода очевидны – далеко не вся информация может быть сконвертированна (например древовидная структура).
Если же вам в первую очередь нужно качество и вы не готовы делать постобработку дизайн-макетов, то пользуйтесь платными плагинами.
Считаете ли вы SVG формат приемлемым для перемещения из одного редактора в другой ? Напишите об этом в комментариях.
Ссылка — на цикл статей по Фигме.
Передаем дизайн-файлы разработчикам: полное руководство
Дизайн — не финальный этап работы над проектом. Чаще всего, спроектировав все экраны, мы должны передать файлы разработчику. Но как сделать это грамотно, чтобы финальный результат выглядел и работал именно так, как мы задумали?
Грамотно передать дизайн разработчику — довольно сложная задача. Для этого требуется четкая коммуникация и общее понимание целей проекта. Дизайнеры должны убедиться, что в файлах содержится вся необходимая информация, а разработчики — научиться правильно интерпретировать макеты и воплощать их в жизнь. Хотя этот процесс может отнимать много времени и быть утомительным, он будет эффективным, если вы используете правильные методы и инструменты.
Предлагаем вашему вниманию рассказ в четырех действиях о различных стадиях передачи дизайна. Занавес открывается!
Стадия 1. Отрицание
Вероятно, вы думаете, что дизайн похож на шутку: если вам приходится его объяснять, значит он не так уж хорош.
Если вы довели свой дизайн до совершенства, у вас может появиться ложное ощущение, что прилагать какие-то усилия для передачи файлов не нужно. К тому же, скорее всего, у вас нет времени на подготовку этой пустяковой документации. Вы слишком заняты проектированием! Просто перебросьте свой дизайн через стену и надейтесь на лучшее. ��
В конце концов, вы уверены в своих разработчиках. Они хорошо знают, что делают. Они суперумные и точно справятся сами.
Стадия 2. Замешательство
Затем наступает день, когда вы наконец-то можете увидеть реализованный проект. Но подождите, кажется что-то не так. Лейаут идеален — пиксель в пиксель с макетом, но шрифт вашей мечты отсутствует! Микровзаимодействия также кажутся тревожно странными и запутанными.
Вы падаете духом, вспомнив, что забыли отправить разработчику файл веб-шрифта. Однако вы сохраняете спокойствие, потому что могло быть и хуже. По крайней мере, это не Comic Sans — утешаете вы себя.
Вы внимательно смотрите на анимацию, которую так заботливо разрабатывали. Вам не нравится этот толстый штрих. Затем вы роетесь в глубинах своей памяти и вспоминаете, что штрихи в Figma экспортируются как заполненные контуры. Поэтому вашему фронтенд-магу пришлось импровизировать, чтобы приблизительно воссоздать нужную форму.
Все взаимодействия происходят одновременно и с одинаковой скоростью. Нет ни упреждения (anticipation), ни сценичности (staging). Ваш внимательный глаз может заметить, что параметры анимации выбраны случайно, из-за чего результат выглядит неуместно. Опыт совсем не кажется таким идеальным, как вы его задумали…
Стадия 3. Принятие
Даже если вы будете говорить до посинения, все равно многие моменты могут оставаться непонятными. Пора отступить на шаг назад и подумать, как улучшить свой рабочий процесс.
Организация
Итак, возможно, вам действительно необходимо подготовить свои макеты. Вы можете начать с присвоения имен всем фреймам верхнего уровня. Тогда разработчики смогут находить в Figma нужные экраны с помощью функции поиска (Cmd+F).
Расположите ваши макеты в логическом порядке. Используйте разделы (Sections — Shift+S) для группировки сценариев. Кроме того, вы можете показать связи между экранами при помощи простого графика или создать интерактивный «Прототип«, воспользовавшись соответствующей вкладкой.
Комментарии
Хорошая идея — кратко описать непонятные фрагменты вашего дизайна. Чтобы написать несколько слов, не потребуется много времени, но это поможет вашей команде быстро разобраться, что к чему. Добавляйте примечания или используйте комментарии Figma, чтобы объяснить важную механику, лежащую в основе ваших идей.
Компоненты
Компоненты обеспечивают согласованность всех интерфейсов. Разместите их на отдельной странице или используйте дополнительный файл библиотеки.
Предоставьте краткое описание, чтобы разработчики сразу понимали, как планируется использовать компоненты. Вы также можете добавить в поле Description (описание) релевантные ключевые слова. Figma учитывает их при выдаче результатов поиска.
Видео
Figma — хороший инструмент для демонстрации простых переходов. Однако для сложных анимаций лучше использовать короткие ролики из After Effects.
Плагин AEUX — самый простой способ перенести ваш дизайн из Figma в AE. Чтобы загрузить его, перейдите по ссылке.
Используйте установщик ZXP для After Effects. Затем вы сможете найти расширение здесь: Window/Extensions/AEUX.
В Figma AEUX должен быть импортирован из манифеста, поскольку он не опубликован в разделе Community. AEUX будет доступен после установки через Plugins/Development/AEUX.
К сожалению, системы координат в приложениях различаются. Поэтому некоторые слои могут быть экспортированы с неправильным выравниванием. Это особенно актуально для повернутых изображений и текстовых слоев.
Вы можете исправить это вручную. Выберите опцию Export reference image (Экспортировать эталонное изображение) в плагине AEUX. Затем используйте его в качестве оверлея для корректировки положения проблемных слоев. После этого вы можете заанимировать композицию и отрендерить видео предварительного просмотра.
Графики анимации
Видео эффективнее тысячи слов. Однако никто не сможет угадать точные значения, просто посмотрев короткий ролик. Используйте графики анимации, чтобы сообщить разработчикам числовые значения продолжительности, задержки, ускорения или замедления.
Lottie
В вашем проекте будут анимированные иллюстрации? Тогда Lottie — то, что вам нужно. Это векторный инструмент с открытым исходным кодом, который позволяет импортировать анимации After Effects в виде JSON-файлов в мобильные приложения и веб-сайты. Разработчики могут использовать эти файлы для добавления анимаций в цифровые продукты.
Подробнее о создании анимаций с помощью Lottie читайте в этой статье.
Этап 4. Доработка
Figma — мощный инструмент для совместной работы. И хотя он способен имитировать некоторую интерактивность, такую как клики и эффекты наведения, он не подходит для сложных взаимодействий. В After Effects можно создать любую анимацию, но разработчики не смогут определить свойства элементов по видео. Перевод спецификаций в графики занимает дополнительное время, и, к тому же такие прототипы не являются интерактивными.
Именно здесь нам на помощь приходит ProtoPie. Он позволяет не только воплотить идеи в жизнь, но и предоставить разработчикам информацию, необходимую для написания кода.
Записи взаимодействий
С помощью ProtoPie вы можете записать любой сценарий взаимодействия внутри вашего прототипа. И речь не просто о стандартном видеоролике, как тот, что отренедерен в AE. Запись сопровождается спецификацией триггеров, откликов, свойств слоев, длительности, задержек, ускорений и замедлений, описывающих движение каждого элемента. Все аккуратно помещается на одном экране. Мечта инженеров стала реальностью.
Записи взаимодействий доступны в облаке ProtoPie. Сначала нужно загрузить файл в облако. В приложении ProtoPie нажмите на иконку облака в правом верхнем углу, а затем откройте ссылку в браузере.
Нажмите кнопку Record (Запись) на панели инструментов и следуйте своему сценарию использования. Когда вы закончите, нажмите кнопку Stop (Стоп), чтобы сохранить запись. Планы Pro и Enterprise позволяют создавать неограниченное количество сценариев. В бесплатном варианте вы можете записать не более двух сценариев для одного прототипа.
Обязательно дайте своей записи осмысленное название. Четкие описательные названия облегчают работу с файлами.
Чтобы переименовать запись, откройте выпадающий список записей и кликните по иконке редактирования. Нажмите Enter для подтверждения.
Проверка взаимодействий
Записанный сценарий отображается на странице Recordings (Записи). В центре экрана располагается ваша анимация.
Снизу находится временная шкала со всеми триггерами и отдельными дорожками реакций. Нажав на любую из них, вы можете просмотреть характеристики и свойства слоя на панели свойств справа.
Выбранный слой подсвечивается в макете. Кроме того, при наведении курсора на любой выбранный элемент можно измерить расстояния между объектами на холсте. Любые догадки исключены.
Нажмите кнопку воспроизведения или клавишу пробела, чтобы просмотреть запись. Вы можете менять скорость воспроизведения: замедлить видео, чтобы уловить все нюансы, или воспроизвести его в нормальном темпе, чтобы понять, как именно будет ощущаться взаимодействие. Кроме того, вы можете перетащить индикатор текущего времени в нужное место.
Заключение
Поначалу передача файлов разработчику может показаться сложной и трудоемкой задачей. Но практика и коммуникация помогут вам стать настоящим специалистом по совместной работе. Поддерживайте порядок в своих файлах и давайте фреймам осмысленные имена. При необходимости добавляйте комментарии и используйте теги в описаниях компонентов. Попробуйте использовать Lottie для анимации и записи взаимодействий ProtoPie для сложных прототипов.
Я уверена, что коллеги оценят ваши усилия, а ваш дизайн будет реализован именно так, как вы себе представляете.