какие форматы файлов поддерживает figma

Как сохранять в Фигме: форматы JPG, PNG, PDF, SVG, FIG

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

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

Быстрая инструкция по экспорту файлов в Фигме

какие форматы файлов поддерживает figma. Смотреть фото какие форматы файлов поддерживает figma. Смотреть картинку какие форматы файлов поддерживает figma. Картинка про какие форматы файлов поддерживает figma. Фото какие форматы файлов поддерживает figma

Любое изображение, картинку, фото, фрейм, макет, файл или проект целиком можно экспортировать с помощью функции экспорта. Выберите нужный элемент и нажмите напротив надписи «Export» иконку «+». После этого вы сможете выбрать нужный формат.

какие форматы файлов поддерживает figma. Смотреть фото какие форматы файлов поддерживает figma. Смотреть картинку какие форматы файлов поддерживает figma. Картинка про какие форматы файлов поддерживает figma. Фото какие форматы файлов поддерживает figma

Нажав на надпись «Prewie» вы можете сделать предварительный просмотр экспортируемого элемента. Чтобы сохранить элемент на компьютер нажмите на кнопку «Export НАЗВАНИЕ ВЫБРАННОГО ЭЛЕМЕНТА».

Изменение масштаба экспортируемых файлов

Если хотите сохранить проект размерами в 2 раза меньше, то стоит выбрать другой масштаб. Изначально стоит 1X — это значит, что ваш проект будет сохранятся один к одному.

какие форматы файлов поддерживает figma. Смотреть фото какие форматы файлов поддерживает figma. Смотреть картинку какие форматы файлов поддерживает figma. Картинка про какие форматы файлов поддерживает figma. Фото какие форматы файлов поддерживает figma

Если для макета размерами 1920 x 1000 px, поставить значение 0.5X, то масштаб сохраненного файла будет в два раза меньше (960 x 500 px). Аналогично объект увеличится в 2 раза, если поставить 2X.

Сохранить проект или картинку в Figma в формате JPG

Формат JPG — это растровый формат. Элементы сохраняются с расширением «.jpg».

Формат JPG подходит для сохранения:

Инструкция по экспорту из Figma в JPG на компьютер:

какие форматы файлов поддерживает figma. Смотреть фото какие форматы файлов поддерживает figma. Смотреть картинку какие форматы файлов поддерживает figma. Картинка про какие форматы файлов поддерживает figma. Фото какие форматы файлов поддерживает figma

Чтобы сохранить любой объект, проект или дизайн макет в Figma выделите его. К примеру возьмем первый экран Landing Page. В правой панели нажмите на иконку плюсика напротив надписи «Export». Выберите из списка формат JPG. После этого нажмите на кнопку экспорта и выберите место для сохранения на компьютере.

Сохранение из фигмы файлов в формате PNG

PNG — это растровый формат изображений. Отличие PNG от JPG состоит в том, что этот формат подходит для сохранения изображений с прозрачным фоном.

Инструкция как сохранять в фигме в PNG на компьютер:

какие форматы файлов поддерживает figma. Смотреть фото какие форматы файлов поддерживает figma. Смотреть картинку какие форматы файлов поддерживает figma. Картинка про какие форматы файлов поддерживает figma. Фото какие форматы файлов поддерживает figma

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

Если нажмем на экспорт и сделаем предпросмотр нажав на надпись «Prewie», то будет видно, что вокруг изображения появился фон в виде шахматной доски. Это означает прозрачность.

Экспорт в формате SVG

SVG — это векторный формат изображений. Векторный формат отличается от растрового, тем, что в нем нет пикселей. Если вы увеличите JPG или PNG, то будет появляться зернистость в виде пикселей. С форматом SVG этого не происходит.

В дальнейшем вы сможете редактировать эти изображения в других графических редакторах, таких как Adobe Illustrator, Inkscape, Affinity Designer, Inscape и других.

Формат SVG подходит, если нужно сохранить:

Как сохранять в фигме в SVG:

какие форматы файлов поддерживает figma. Смотреть фото какие форматы файлов поддерживает figma. Смотреть картинку какие форматы файлов поддерживает figma. Картинка про какие форматы файлов поддерживает figma. Фото какие форматы файлов поддерживает figma

Чтобы сохранить элементы из фигмы в формате SVG, выберите элемент. В правой панели нажмите + напротив «Export» и нажмите на кнопку экспорта. Выберите место для сохранения на рабочем столе или компьютере.

Как сохранить в Фигме в формате PDF

PDF подходит для экспорта различных документов или презентаций.

Чтобы сохранить элементы из фигмы в формате PDF есть 2 варианта — экспортировать каждый элемент отдельно, либо создать 1 файл с множеством страниц. Рассмотрим каждый из этих вариантов по отдельности.

Экспорт из фигмы в PDF с множеством страниц.

Формат PDF подходит если вы хотите создать:

Пошаговая инструкция по созданию PDF файлов:

какие форматы файлов поддерживает figma. Смотреть фото какие форматы файлов поддерживает figma. Смотреть картинку какие форматы файлов поддерживает figma. Картинка про какие форматы файлов поддерживает figma. Фото какие форматы файлов поддерживает figma

Для примера экспортируем несколько моих работ и создадим небольшое портфолио (подойдет для отправки заказчику).

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

какие форматы файлов поддерживает figma. Смотреть фото какие форматы файлов поддерживает figma. Смотреть картинку какие форматы файлов поддерживает figma. Картинка про какие форматы файлов поддерживает figma. Фото какие форматы файлов поддерживает figma

Экспорт в PDF выбранных элементов:

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

какие форматы файлов поддерживает figma. Смотреть фото какие форматы файлов поддерживает figma. Смотреть картинку какие форматы файлов поддерживает figma. Картинка про какие форматы файлов поддерживает figma. Фото какие форматы файлов поддерживает figma

Как сохранить проект в Фигме в формате FIG (внутренний формат)

какие форматы файлов поддерживает figma. Смотреть фото какие форматы файлов поддерживает figma. Смотреть картинку какие форматы файлов поддерживает figma. Картинка про какие форматы файлов поддерживает figma. Фото какие форматы файлов поддерживает figma

Импорт файлов в Figma в формате «.fig»

Файл в формате «.fig» можно загрузить в фигму, если перейти во все ваши проекты раздел «Drafts» и перетащить к остальным проектам. Также есть иконка «Import» сверху, справа.

какие форматы файлов поддерживает figma. Смотреть фото какие форматы файлов поддерживает figma. Смотреть картинку какие форматы файлов поддерживает figma. Картинка про какие форматы файлов поддерживает figma. Фото какие форматы файлов поддерживает figma

Массовый экспорт из Figma

Если у многих элементов уже был нажат плюсик экспорта, то можно массово их экспортировать нажав на сочетание горячих 3 клавиш «Ctrl + Shift + E». Появится специальное окно экспорта.

какие форматы файлов поддерживает figma. Смотреть фото какие форматы файлов поддерживает figma. Смотреть картинку какие форматы файлов поддерживает figma. Картинка про какие форматы файлов поддерживает figma. Фото какие форматы файлов поддерживает figma

Как называть файлы, чтобы сохранить их в разные папки при экспорте

Если вы сохраняете файлы для разработки сайтов, то лучше называть их на английском языке. Например «Woman», «Illustration» и т.д.

какие форматы файлов поддерживает figma. Смотреть фото какие форматы файлов поддерживает figma. Смотреть картинку какие форматы файлов поддерживает figma. Картинка про какие форматы файлов поддерживает figma. Фото какие форматы файлов поддерживает figma

Если хотите сохранить файл в отдельную папку то переименуйте слой следующим образом:

Файлы сохранятся в отдельные папки на вашем компьютере с названиями «1», «2», «3».

какие форматы файлов поддерживает figma. Смотреть фото какие форматы файлов поддерживает figma. Смотреть картинку какие форматы файлов поддерживает figma. Картинка про какие форматы файлов поддерживает figma. Фото какие форматы файлов поддерживает figma

Далее поговорим о форматах и для каких элементов они подходят.

Важное дополнение:

Если вы хотите передать макет вашему заказчику, то нет необходимости сохранять всё на компьютер и отправлять (это прошлый век). Проще поделиться ссылкой на ваш проект. Это можно сделать нажав на кнопку сверху, справа «Share» (1) и скопировав ссылку (2).

какие форматы файлов поддерживает figma. Смотреть фото какие форматы файлов поддерживает figma. Смотреть картинку какие форматы файлов поддерживает figma. Картинка про какие форматы файлов поддерживает figma. Фото какие форматы файлов поддерживает figma

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

какие форматы файлов поддерживает figma. Смотреть фото какие форматы файлов поддерживает figma. Смотреть картинку какие форматы файлов поддерживает figma. Картинка про какие форматы файлов поддерживает figma. Фото какие форматы файлов поддерживает figma

P.S. В этой статье вы узнали о том, как сохранять файлы в Figma в различных форматах.

Хотите получить бонусный урок быстрому созданию дизайн макетов Landing Page в Figma? Жмите на эту ссылку и получите 24 раздела для прототипирования и дизайна Landing Page в Figma.

Источник

Функция экспорта в Figma

Основные вопросы:

Как делать в Figma экспорт элементов или групп? Какие виды объектов можно экспортировать в figma и как сохранить в фигме работу?

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

Экспорт в JPG

Экспорт макет в формат изображения JPG является самым популярным. В настройках экспорт вы можете управлять масштабом экспорта, добавлять суффиксы к имени, он будет вписан после имени файла, а также если вы хотите экспортировать несколько версий макетов (версия для клиента, для портфолио, для behance), то просто нажмите на знак плюса и настройте нужные опции.

какие форматы файлов поддерживает figma. Смотреть фото какие форматы файлов поддерживает figma. Смотреть картинку какие форматы файлов поддерживает figma. Картинка про какие форматы файлов поддерживает figma. Фото какие форматы файлов поддерживает figma

Экспорт в PDF

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

Но у этого формата есть особенности экспорта:

Казалось бы преимущества очевидны, но на практике, лично я еще ни разу не сталкивался с просьбой предоставить макет в формате PDF.

Экспорт в PSD

Очень частый вопрос: как открыть psd в Figma, или как загрузить psd в Figma? К сожалению, в Figma не предусмотрен экспорт в программу Adobe Photoshop. Так как фотошоп более сложная программа, то и интерпретатор для него будет сложно написать. Поэтому разработчики, по моему мнению, просто не хотят тратить время на разработку данного решения. Да оно и не нужно особо, так как все больше людей переходит на специализированный для веб-дизайна софт.

Экспорт в SVG

Экспорт в HTML

Функции экспорта в html в программе Figma нет. Но есть подсказки для верстальщика в виде свойств каждого объекта. Они находятся в левой вкладке «Code». Здесь вы получите полный список CSS свойств для верстки сайта, а также параметры для разработчиков на iOS и Android.

какие форматы файлов поддерживает figma. Смотреть фото какие форматы файлов поддерживает figma. Смотреть картинку какие форматы файлов поддерживает figma. Картинка про какие форматы файлов поддерживает figma. Фото какие форматы файлов поддерживает figma

Один из вопросов, который волнует начинающих пользователей: как сохранить проект в фигма?

Сохранение проекта в Figma происходит с помощью экспорта файла с расширением «.fig». Для этого нужно в главном меню выбрать пункт «Save as».

Этому вопросу я посвятил видео, которое вы можете посмотреть ниже.

Источник

Figma — простое решение для дизайнера, сложное решение для верстальщика

какие форматы файлов поддерживает figma. Смотреть фото какие форматы файлов поддерживает figma. Смотреть картинку какие форматы файлов поддерживает figma. Картинка про какие форматы файлов поддерживает figma. Фото какие форматы файлов поддерживает figma

Если вы работаете в области web-разработки, то рано или поздно, вам суждено будет познакомиться с Figma. Смиритесь с этим фактом и начинайте изучать. Я же попробую описать данный продукт, с точки зрения повседневного пользователя.

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

какие форматы файлов поддерживает figma. Смотреть фото какие форматы файлов поддерживает figma. Смотреть картинку какие форматы файлов поддерживает figma. Картинка про какие форматы файлов поддерживает figma. Фото какие форматы файлов поддерживает figma

Самый неоспоримый плюс – халява

В отличие от повседневных продуктов дизайна, будь то Adobe пакет (Photoshop, Illustrator, Adobe XD … ), или Bohemian Coding (Sketch) эта программа условно бесплатная для пользователей. Разумеется за определенные финансовые вливания Вы получите дополнительные плюшки, но и без оных, продукт выглядит вполне достойно. Будем надеяться, что данная политика не поменяется, и правообладатели не начнут закручивать гайки. Аминь.

Для тех кто не в теме – это способность одновременно работать над одним проектом нескольким людям. И когда я написал одновременно, то это действительно так, я как верстальщик, вижу, как дизайнер(или даже дизайнеры) правят проект realtime прям на своем мониторе. Выглядит этот эффект как teamViewer. Дизайнер больше не хранит свои макеты локально, теперь это всё живет в облаках. Не нужно больше обмениваться скриншотами с менеджером, процесс создания проекта стал публичным, необходим только браузер с нормальной скоростью Интернета.

Задействован принцип кроссплатформенности

Стала не важна операционная система (Windows, MacOS, Linux) верстальщика и дизайнера. Они смогут работать над одним проектом без проблемы несовместимости ОС.

Удобные быстрые клавиши

Если вы уже привыкли работать с графическими редакторами посредством hot key для вас не составит труда быстро освоиться с новым функционалом.

какие форматы файлов поддерживает figma. Смотреть фото какие форматы файлов поддерживает figma. Смотреть картинку какие форматы файлов поддерживает figma. Картинка про какие форматы файлов поддерживает figma. Фото какие форматы файлов поддерживает figma

Программа имеет довольно толковое описание клавиш быстрого вызова, и к тому же они сильно повторяют функционал клавиш Photoshop или Sketch, за что авторам отдельное спасибо. Все ведь ленивые и не хотят опять обучаться, как вызвать элемент Pen.

Возможность работы с векторной графикой

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

Возможность создания компонентов

Да, для верстальщиков поясню, что в дизайне тоже есть компоненты. И им тоже даровано свойство Наследования (привет ООП). К примеру можно создать типовую кнопку, а потом “продублировать ” её по всем артбордам. И потом, когда от заказчика придёт желание перекрасить все кнопки в розовый горошек, это всё решается за пару кликов (разумеется, если дизайнер умеет данным свойством пользоваться)

В Фигме есть функционал настраиваемых плагинов, и их там довольно много.

какие форматы файлов поддерживает figma. Смотреть фото какие форматы файлов поддерживает figma. Смотреть картинку какие форматы файлов поддерживает figma. Картинка про какие форматы файлов поддерживает figma. Фото какие форматы файлов поддерживает figma

Представлены как продукты частных компаний, так и реализации open source сообщества. Пока что, из-за частых обновлений софта можно увидеть забагованость функционала, но я уверен, что это поправят.

какие форматы файлов поддерживает figma. Смотреть фото какие форматы файлов поддерживает figma. Смотреть картинку какие форматы файлов поддерживает figma. Картинка про какие форматы файлов поддерживает figma. Фото какие форматы файлов поддерживает figma

А теперь о негативных моментах, с которыми сталкиваются пользователи Figma в процессе работы, ну или о том, чего так не хватает, а очень надо.

Проблема с определением фактических размеров элементов и расстояния между ними

К сожалению, в процессе верстки постоянно сталкиваюсь с проблемою узнать реальное расстояние между элементами. Особенно плохо обстоят дела, если дизайнер забыл очистить картинки от прозрачного фона (transparent background) или некорректно прописал межстрочный интервал для текста.

какие форматы файлов поддерживает figma. Смотреть фото какие форматы файлов поддерживает figma. Смотреть картинку какие форматы файлов поддерживает figma. Картинка про какие форматы файлов поддерживает figma. Фото какие форматы файлов поддерживает figma

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

Перекрытие и заблокированные слои

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

Проблемы с текстом

а если открыть данный шаблон уже в режиме дизайнера, то уже можно наблюдать, что там Roboto Bold задействовано.

какие форматы файлов поддерживает figma. Смотреть фото какие форматы файлов поддерживает figma. Смотреть картинку какие форматы файлов поддерживает figma. Картинка про какие форматы файлов поддерживает figma. Фото какие форматы файлов поддерживает figma

Семейство шрифта вроде ж одно и то, а только в процессе верстки его всё равно через свойство @font-face отдельно подключать надо, иначе эффекта как на макете не получить. И пока не затяните на свой проект, вы этого не узнаете (и можно долго играться со свойством font-width).

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

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

какие форматы файлов поддерживает figma. Смотреть фото какие форматы файлов поддерживает figma. Смотреть картинку какие форматы файлов поддерживает figma. Картинка про какие форматы файлов поддерживает figma. Фото какие форматы файлов поддерживает figma

Тут в код, предоставляемый Фигмой, можно вообще не смотреть. Как вариант решения проблемы вы можете сохранить данный текст в SVG (иногда это дешевле чем импортировать к странице новый шрифт), ну а если всё-таки будет необходимость заниматься решением данной проблемы на серьезном уровне, то опять забирайте макет на свой личный проект.

какие форматы файлов поддерживает figma. Смотреть фото какие форматы файлов поддерживает figma. Смотреть картинку какие форматы файлов поддерживает figma. Картинка про какие форматы файлов поддерживает figma. Фото какие форматы файлов поддерживает figma

Тут правда у меня возникли вопросы, почему возле ползунков смены значения градиента разработчики поленились вывести хотя бы процент текущего значения, не говоря уже про угол направления градиента, и мне как верстальщику приходиться самому угадывать какое значение надо будет поставить в background: linear-gradient, а потом починить это через background-clip: text; Собственно свойство text-stroke в коде фигмы я пока тоже не встречал, хотя возможно это связано что оно ещё не во всех браузерах зеленое.

*Делитесь своими мнениями в комментариях, почему это может быть так сложно реализовать?

Figma является облачным продуктом

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

Работа в фигме расхолаживает дизайнера

Возможно, конечно, это лично моё субъективное мнение, но макеты, которые отдаются дизайнерами под верстку сайтов, ниже качеством по сравнению с макетами, выполненными в Photoshop или Sketch. (* я прям чувствую, что сейчас у кого-то подгорело)

какие форматы файлов поддерживает figma. Смотреть фото какие форматы файлов поддерживает figma. Смотреть картинку какие форматы файлов поддерживает figma. Картинка про какие форматы файлов поддерживает figma. Фото какие форматы файлов поддерживает figma

И ладно, если с текстом это ещё может нормально прокатить, ленивый верстальщик с шестнадцатеричного представления цвета

скорее всего перейдет к rgba представлению

А вот если дизайнер решит делать такую штуку к блоку элементов (там где про background-color, color, background: linear-gradient ….), при этом, половина элементов будет с прозрачностью, а вторая, нет, то тут можно во вкладку Code и не смотреть.

В общем, Фигму нельзя рекомендовать как начальный инструмент для молодого дизайнера. Порог входа, тут пониже будет, но и нервы вы своими макетами коллегам испортите.

Отсутствие нормальной Темной темы

Это очень печально, но пока в Фигме нет возможности адекватно менять визуальное представление рабочего пространства под свои нужды. Особенно остро это стает когда пользуешься приложением, а не браузерной версией где можно извращается, ставя поверх браузера какие-то дополнения, плагины. Разуметься присутствуют плагины умельцев, но поскольку Фигма очень часто апдейтиться, то плагины за ней не успевают.

Лучше б конечно, чтоб за данный функционал отвечали те, кто пишет продукт

Личные попытки поставить Темную тему. (Windows 10, Chrome 76) были печальны.

какие форматы файлов поддерживает figma. Смотреть фото какие форматы файлов поддерживает figma. Смотреть картинку какие форматы файлов поддерживает figma. Картинка про какие форматы файлов поддерживает figma. Фото какие форматы файлов поддерживает figma

*Возможно, у владельцев Mac-ов дела обстоят лучше. Делитесь в комментариях…

О том почему это важно и полезно можете посмотреть в презентации Тёмная сторона веба, Никиты Дубко Надеюсь что поправят. Всё-таки дизайнеры — тоже люди, и им тоже надо дать возможность комфортно работать 8 часов в сутки 5 дней в неделю.

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

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

Источник

Что такое Figma: возможности и принципы работы

Революционный онлайн-сервис для дизайнеров. Проектируйте, создавайте прототипы и работайте командой прямо в браузере. Рассказываем о Figma.

какие форматы файлов поддерживает figma. Смотреть фото какие форматы файлов поддерживает figma. Смотреть картинку какие форматы файлов поддерживает figma. Картинка про какие форматы файлов поддерживает figma. Фото какие форматы файлов поддерживает figma

какие форматы файлов поддерживает figma. Смотреть фото какие форматы файлов поддерживает figma. Смотреть картинку какие форматы файлов поддерживает figma. Картинка про какие форматы файлов поддерживает figma. Фото какие форматы файлов поддерживает figma

У Figma низкие требования к подготовке пользователя и мощный потенциал при относительной простоте. Чтобы все возможности программы с самого начала работали на вас, обратите внимание на курс Skillbox по Figma. Вам расскажут многие тонкости и неочевидные моменты, которые впоследствии сэкономят кучу времени.

Что такое Figma

Figma — кросс-платформенный онлайн-сервис для дизайнеров интерфейсов и веб-разработчиков. Разработка интерфейсов происходит в онлайн-приложении.

У Figma две ключевые особенности: доступ к макету прямо из окна браузера и возможность совместной работы над документами.

какие форматы файлов поддерживает figma. Смотреть фото какие форматы файлов поддерживает figma. Смотреть картинку какие форматы файлов поддерживает figma. Картинка про какие форматы файлов поддерживает figma. Фото какие форматы файлов поддерживает figma

какие форматы файлов поддерживает figma. Смотреть фото какие форматы файлов поддерживает figma. Смотреть картинку какие форматы файлов поддерживает figma. Картинка про какие форматы файлов поддерживает figma. Фото какие форматы файлов поддерживает figma

Автор статей по дизайну. В веб-дизайн пришел в 2013 году, осознанно начал заниматься с 2015 года. Параллельно освоил верстку. Время от времени публикует переводы на Хабре.

Возможности и особенности Figma

Многопользовательский режим редактирования

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

Команда Figma учла подобные проблемы и создала продукт, который позволяет работать над проектом одновременно нескольким дизайнерам, поддерживает версионость и даёт много других возможностей. Они упрощают жизнь как дизайнеру, так и разработчику.

Чтобы сотрудничать с другими дизайнерами, создайте команду.

какие форматы файлов поддерживает figma. Смотреть фото какие форматы файлов поддерживает figma. Смотреть картинку какие форматы файлов поддерживает figma. Картинка про какие форматы файлов поддерживает figma. Фото какие форматы файлов поддерживает figma

Всё интуитивно понятно: пишете название команды, выбираете нужный тариф, готово.

какие форматы файлов поддерживает figma. Смотреть фото какие форматы файлов поддерживает figma. Смотреть картинку какие форматы файлов поддерживает figma. Картинка про какие форматы файлов поддерживает figma. Фото какие форматы файлов поддерживает figma

Облачный сервер хранения файлов

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

Курс «Графический дизайнер с нуля до PRO»

Попробуйте курс по графическому дизайну бесплатно

какие форматы файлов поддерживает figma. Смотреть фото какие форматы файлов поддерживает figma. Смотреть картинку какие форматы файлов поддерживает figma. Картинка про какие форматы файлов поддерживает figma. Фото какие форматы файлов поддерживает figma

Компоненты

Это элементы пользовательского интерфейса, которым можно задавать общие стили — и затем быстро менять их во всём макете сразу.

Например, вы закончили разработку 50 макетов в Photoshop, заказчик попросил вас поменять пункт меню в шапке и прислать все макеты на утверждение. Раньше приходилось проделывать это вручную. В Figma проблема решена: изменяете что-то одно — меняются стили всех элементов с этим стилем.

какие форматы файлов поддерживает figma. Смотреть фото какие форматы файлов поддерживает figma. Смотреть картинку какие форматы файлов поддерживает figma. Картинка про какие форматы файлов поддерживает figma. Фото какие форматы файлов поддерживает figma

История версий

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

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

Фреймы

Очень похожи на артборды в Photoshop, но имеют большую гибкость в работе: они хорошо масштабируются и их с лёгкостью можно использовать в других фреймах. Для фреймов есть предустановленные размеры устройств: Phones, Tablet, Desktop, Watch, Paper, Social Media. Поэтому нет надобности держать их в голове и путаться в размерах.

какие форматы файлов поддерживает figma. Смотреть фото какие форматы файлов поддерживает figma. Смотреть картинку какие форматы файлов поддерживает figma. Картинка про какие форматы файлов поддерживает figma. Фото какие форматы файлов поддерживает figma

Сетки

Панель Grid Layout позволяет быстро создать любую сетку.

какие форматы файлов поддерживает figma. Смотреть фото какие форматы файлов поддерживает figma. Смотреть картинку какие форматы файлов поддерживает figma. Картинка про какие форматы файлов поддерживает figma. Фото какие форматы файлов поддерживает figma

Десктопная версия

Figma — онлайн-сервис, но есть и десктопная версия. Для работы в ней нужно авторизоваться и иметь постоянное интернет-подключение. Файлы сохраняются локально и при необходимости импортируются в браузерную версию.

Условная бесплатность

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

Если вам станет тесно на бесплатном тарифе, переходите на Professional стоимостью 12 долларов в месяц или Organization — 45 долларов в месяц.

какие форматы файлов поддерживает figma. Смотреть фото какие форматы файлов поддерживает figma. Смотреть картинку какие форматы файлов поддерживает figma. Картинка про какие форматы файлов поддерживает figma. Фото какие форматы файлов поддерживает figma

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

О конкретных приемах, которые упростят работу в Figma, читайте здесь.

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *