Не отображаются картинки макета в Figma
Не помню точно — скорее всего этот макет не подходит для конвертации в Figma без потерь, работайте с ним в Фотошоп. Посмотрите еще раз уроки — в уроках переподаватель говорит с каким макетом работать лучше в Фотошоп, а с какими макетами из курса можно работать и конвертировать в Avocode и Figma.
3 years ago
Один ответ
JavaScript — полный курс с нуля до результата!
Полный курс Python для начинающих – с нуля до специалиста
Photoshop для начинающих Веб-дизайнеров
Adobe Illustrator с нуля – основы дизайна для начинающих
Программирование на Java с нуля
React JS для начинающих + Redux
Django 3 — Full Stack разработка веб сайтов на Python
WordPress – с нуля до Профи!
Основы HTML/CSS — верстка сайтов с нуля
WordPress – Быстрый старт!
Шаблонизатор Pug/jade — современный ускоритель для HTML
ВЕБ-разработчик — с нуля до результата!
Посадка верстки и создание тем на CMS WordPress
Настройка рекламы Яндекс Директ — продвижение сайтов
Настройка рекламы Google — продвижение сайтов
Настройка таргетированной рекламы и продвижение ВКонтакте
Настройка рекламы и продвижение Facebook+Instagram
МЕГАКУРС по рекламе: Яндекс Директ, Google Реклама, ВКонтакте, Facebook+Instagram
Полный курс Android + Java для начинающих
Kotlin — Быстрый старт!
Программирование на C# – от новичка до специалиста
Верстальщик сайтов — HTML, CSS, Bootstrap, JavaScript
SQL и PostgreSQL для начинающих
Создание административной панели на React JS + PHP
Практический JavaScript — продвинутый уровень
GIT. Управление версиями для разработчиков
Программирование на Java с нуля — Уровень 2 + 10 собеседований
Полный курс Python – продвинутый уровень + SQL
Figma для Веб дизайнера — с нуля до профессионала
React с нуля для начинающих + 3 проекта в портфолио!
Веб Дизайн в Figma. Основы Ui Ux дизайна на практике
Алгоритмы и структуры данных от А до Я
Adobe Illustrator с нуля – Уровень 2 – продвинутая практика
Android разработчик – профессиональный уровень (Kotlin)
Веб Дизайн в Figma 2022 Продвинутый уровень. Создание Ui Kit
Шаблоны проектирования на Python
Не отображаются изображения в Present
Сейчас делаю макет. Тексты и фигуры отображаются в Present. А вот изображение нет.
На самой рабочей зоне и при экспорте в картинку оно есть, а при презентации исчезает. Картинка находится во фрейме. Я уже пыталась вставить другой тип файла, через интернет, уже скачанную картинку — ничего.
Также пишет о том, что есть несохранённые изменения. Хотя я постоянно онлайн.
Не отображаются картинки в Figma
Сконвертировала макет в sketch на https://avocode.com/convert-psd-to-sketch , но он открывается без картинок. Есть какие-то еще пути решения, чтобы пользоваться figma?
student__izorLfg
3 years ago
Добрый день. Дело в том, что изначально этот макет был создан в формате растра. При конвертации его в вектор может быть потеря части элементов. Это нормально.
Для работы с растровыми макетами используйте фотошоп.
Для векторных — Sketch, Figma
Почему в фигме не отображаются картинки
Фигма-ответы
880 subscribers
Канал наиболее частых вопросов с ответами из @figmachat.
Вопросы собирают @okunev, @Rekruizer и @zyumbik.
Этот канал — дочерний проект канала @slashdesigner.
Реклама не продаётся.
About
Blog
Apps
Platform
Фигма-ответы
880 subscribers
Channel created
3. Что делать, если при растягивании макета слои смещаются?
Это значит, что не настроены ограничители слоёв. У них стоит настройка Scale по вертикали. Чтобы временно игнорировать её, нужно нажать Cmd на Mac или Ctrl на Windows, затем перетаскивать нижний край макета.
Либо расставить в каждом слое ограничители на Top. Тогда они прилипнут к верхней границе макета и перестанут растягиваться.
Ключи: не растягивались, растягивание, смещение, масштабирование, скейлить артборд, искажаются объекты
—
Задать вопрос про Фигму: @figmachat
4. Как макет из Фигмы сохранить в формате psd, чтобы открыть его в Фотошопе?
Ровного способа нет. Но можно из Фигмы сохранить каждый экран в SVG или PDF, открыть его в Иллюстраторе и сохранить как PSD.
То, что заказчик просит интерфейсный проект в Фотошопе — это признак архаичного мышления. Это значит, что он не понимает, как работать с Фигмой и скорее всего не осознаёт всех плюсов работы в коллаборативной среде.
Проблема не в том, чтобы сделать PSD, а в том чтобы убедить заказчика продолжить работу в Фигме. Если ему для успокоения нужен файл, который точно не потеряется, можно предоставить .fig-файл и научить открывать его в Фигме.
—
Задать вопрос про Фигму: @figmachat
5. В чём обычно анимируют макеты из Фигмы?
Мы устраивали голосование и пришли к выводу, что чаще всего используют Principle (Mac) и After Effects (Mac, Win).
Есть дизайнеры, которые используют Haiku (Mac, в планах Windows).
Набирает популярность относительно новый и мощный Protopie (Mac, Win).
—
Задать вопрос про Фигму: @figmachat
6. Как померить расстояние от слоя до начала колонки?
Если зажать Opt / Alt, меряется расстояние только до края фрейма.
Чтобы измерить расстояние до начала колонки, удобно использовать гайд. Его можно вытянуть из боковой линейки и установить в начало колонки. Теперь при зажатом Opt будет видно расстояние до гайда.
—
Задать вопрос про Фигму: @figmachat
7. Как установить свои шрифты в Figma?
Если ты работаешь в десктопном клиенте Figma, то необходимо установить шрифт в систему, он автоматически добавиться в Figma.
Если ты работаешь в браузере, то необходимо установить Font Helper.
—
Задать вопрос про Фигму: @figmachat
2.4K views edited 12:17
8. Как отключить Google Fonts в Figma?
Необходимо снять галку с пункта «Show Google Fonts»
—
Задать вопрос про Фигму: @figmachat
9. Как загрузить в Figma изображение в большом разрешении?
Если изображение превышает 4096х4096, оно будет сжато до этого разрешения по длинной стороне, о чём появится сообщение Image Resized.
Есть костыльное решение, чтобы это обойти: чтобы загрузить изображение бóльшего размера, необходимо импортировать его как новый фигма-файл, а затем вырезать и копировать его в основной файл.
—
Задать вопрос про Фигму: @figmachat
4.0K views edited 12:40
10. Как открыть несколько окон Figma?
Если ты работаешь в браузере, можно открыть несколько окон Figma.
В десктопном клиенте Figma на macOS — File → New window.
В десктопном клиенте Figma на
Windows — Ctrl + Shift + N
—
Задать вопрос про Фигму: @figmachat
2.5K views edited 13:32
11. Что делать, если в Фигме появляются артефакты — разноцветные полосы?
Проблема может быть вызвана несколькими причинами: либо дело в видеокарте и это может решиться обновлением видео-драйверов на свежие.
Либо причина в глюке самой Фигмы, которая некорректно отображает сетку, выводя на экран линии сетки без отступов. В этом случае полосы появляются только при включенной сетке. Перезапуск Фигмы временно лечит проблему и возвращает линии сеток по местам.
—
Задать вопрос про Фигму: @figmachat
2.8K views edited 08:15
12. Что делать, если картинки не отображаются?
Если растровая картинка отображаются зернисто, можно выделить её и дважды нажать Shift + Cmd + H. Она должна перезагрузиться и стать чёткой.
Если же все картинки и тексты имеют только контуры, а вместо растровых изображений прямоугольники, значит включён режим контуров Outines (Cmd + Y на Маке или Shift + Ctrl + 3 на Винде).
Если это не помогает, может быть медленный интернет и изображения по какой-то причине не прогружаются. Но тогда тормозить будет всё, а не только картинки. Нужно протестировать в веб-версии, а не в клиенте.
Для поиска: текст двоится, пропали картинки, текст контуром
Задать вопрос про Фигму: @figmachat
13. Для разработчиков: как в Фигме копировать цвета и расстояния между объектами, как в Zeplin?
Для этого есть Figma Handoff — инструментарий для разработчиков, доступен во вкладке Code. Полный аналог Зеплина в реальном времени. Урок по работе с ним.
—
Задать вопрос по Фигме: @figmachat
14. Возможно ли использовать Фигму для печатного дизайна?
Зависит от задачи, но в целом идея плохая. Сделать визитку или небольшой буклет можно, если не важно, чтобы чёрный был нормальный, а не тёмно-серый, не важно, чтобы цвета на печати были яркие и сочные. Конверт финального макета из RGB в CMYK даёт существенные искажения цвета.
Надо понимать, что Фигма предназначена только для экранного дизайна, не поддерживает CMYK и попытки делать в ней что-то серьёзнее визитки обречены на провал.
В Фигме нет переносов текста, стилей внутри стилей, движения текста по страницам, автозамен, исчисления в сантиметрах.
Есть только проектировочные пиксели, поэтому можно приблизиться к каноническим 300 PPI путём расчётов. По этой теме есть видео-урок Виктора Теплова.
Если нужно делать многостраничный макет (журнал или газету), мы рекомендуем всё-таки использовать InDesign или Affinity Publisher. Их разработчики сразу ставили задачу делать профессиональное ПО для печати.
Уроки Figma. Как подготовить файл для печати в CMYK 300 dpi [Фигма уроки]
Что такое CMYK? Почему 300 dpi? Как перевести миллиметры в пиксели? А также шаблоны для печати в типографии.
Шаблоны из урока
https://www.figma.com/c/file/803397321136884492
PDF RGB/CMYK Converter…
4.7K views edited 16:31
15. Как вставлять в макеты рыбные тексты, имена, телефоны или аватары?
Для этого есть множество плагинов, которые можно найти по запросу content. Вероятно, лучший из них — Content Reel от разработчиков из Microsoft. У них есть и другие наработки.
Можно даже вставлять lorem ipsum, но не стоит, поскольку тогда твой дизайн потеряет контекст. Контент — часть дизайна. Лучше тратить время на то, чтобы писать осмысленные тексты и никогда не использовать lorem ipsum.
3.0K views edited 16:42
16. Как создать рабочие кликабельные ссылки в PDF в Figma?
Многие ошибочно думают, что можно в настройках прототипа настроить переход по ссылке, то она будет работать и в PDF. Это не так, и прототипы не влияют на экспорт!
Единственный на сегодняшний день способ вставить рабочую ссылку в PDF — это написать её в тексте в формате https://example.com или просто example.com (без https:// только для .com доменов). Такой текст автоматически конвертируется в гиперссылку при экспорте PDF из Figma.
Чтобы сделать “рабочую” кнопку, можно покрыть ссылками любую область и задать им прозрачность 0.01%.
При этом учитывай, что ссылки в PDF из Figma работают не везде. Чаще всего они кликабельны только при открытии файла в Google Chrome, иногда в других браузерах и Preview на macOS. Поэтому для более сложных задач следует использовать приложения для редактирования PDF онлайн или программы типа Adobe Indesign, Acrobat.
17. Как передать исходник заказчику?
Figma — облачный инструмент, поэтому достаточно лишь скинуть ссылку на файл или дать заказчику права на просмотр. Открой меню Share (голубая кнопка в правом верхнем углу), введи адрес почты клиента и отправь инвайт. Либо убедись, что включен доступ по ссылке (Anyone with the link can view), скопируй ссылку на файл кнопкой Copy link внизу и скинь её клиенту.
Осторожно: человек с доступом к файлу может смотреть все свойства объектов, а также делать дубликат файла себе. Второго можно избежать в платных командах, но от скриншотов никто не защищён. Никогда не давай права на просмотр файла до получения предоплаты за работу!
Если заказчик требует исходники в .PSD, .sketch или других форматах, то обсуждать возможность работы в Figma нужно до начала работы. Перевести файл Figma в формат фотошопа или скетча — задача не из быстрых.