Как открыть шаблон в фигме
Figma – советы верстальщику
Figma – это графический онлайн-редактор для совместной работы дизайнеров и веб-разработчиков. В этой статье рассмотрим некоторые возможности Фигмы для удобства верстальщиков.
Как открыть файл *.fig
В разделе «Recent» жмём на «Import»:
После обработки файла, макет появится в списке.
Как получить CSS-стили элемента
К примеру, нужно узнать какие стили применены к заголовку:
Для этого, кликаем по нему, сразу видим его размеры в пикселях.
Далее, во вкладке «Inspect», в самом низу будут CSS-стили:
В данном методе удобно то, что можно скопировать только нужные свойства.
Способ №2
Через меню «Copy/Paste» → «Copy as CSS», в буфер помещаются все стили выделенного элемента.
Как сохранить изображения
Выделяем нужное изображение, открываем вкладку «Design», далее панель «Export».
Тут можно выбрать размер, формат файла (PNG, JPG, SVG, PDF) и сохранить файл или несколько файлов в разных форматах, что удобно для вёрстки под ретину.
Если выбрать несколько объектов, то они все сохранятся по отдельности, в одном архиве.
Как сохранить целый макет в PNG
Чтобы сохранить целый макет в картинку, достаточно выделить общий контейнер в меню слоёв и экспортировать в изображение:
Как измерить расстояние между объектами
Чтобы узнать отступы от ближайших элементов нужно выделить элемент и зажать Alt, дале навести курсор на соседний элемент.
Урок веб-дизайна. Быстрый способ делать дизайн макеты в Figma.
В этой инструкции вы узнаете быстрый способ создания дизайн макетов в Figma, это урок веб-дизайна №4 из серии про быстрый дизайн. Смотрите видео ниже или воспользуйтесь текстовой версией урока.
Что можно научиться делать в Figma за 10-15 минут?
В результате просмотра урока и применении на всех рекомендаций на практике по шагам, у вас получится такой дизайн макет первого экрана Landing Page. В дальнейшем вы сможете использовать эти знания и наработки в других своих проектах.
Скачивание и установка шаблонов для веб-дизайна в Figma
Чтобы скачать комплект заготовок и шаблонов для фигмы «Sirius 1.1» перейдя по этой ссылке. Внизу страницы укажите ваше имя и email. На почту придёт вся информация о скачивании шаблонов.
Для установки шаблонов в фигму перенесите файл «Комплект Sirius 1.1.fig» в разделе «Drafts» к другим элементам, либо нажмите на кнопку «Import» в верхнем правом углу.
После загрузки у вас будет отображаться новый файл, который вам нужно будет открыть.
Где брать фото для веб-дизайна с прозрачным фоном?
Если вам нужны крутые фото людей или предметов с прозрачным фоном, перейдите по адресу icons8.com/photos.
Среди фотографий я выбрал эту женщину, чтобы использовать её в своём дизайн макете Landing Page. Ссылка на изображение.
Чтобы скачать фото, нажмите на кнопку «Download» справа. В появившемся окне нажмите кнопку под надписью «Free trial».
Практика создания дизай макета в Figma за 8 минут.
Переместите фото в комплект Sirius, который скачали и установили в фигму.
Скопируйте 2 элемента из комплекта — шапку сайта и раздел с текстом.
Удалите лишние элементы из раздела с текстом, затем увеличьте фрейм, зажав клавишу Ctrl и потяните верх фрейма с зажатой клавишей мыши вверх.
Затем выберите шапку сайта и нажмите правую клавишу мыши. Выберите пункт «Ungroup», чтобы разгруппировать фрейм.
Переместите элементы из шапки во фрейм с текстом, чтобы получить первый экран сайта.
Переместите фотографию с женщиной справа от текста, чтобы было примерно как на скриншоте выше.
Скопируйте дополнительные элементы из шаблонов с иконками, как показано выше. Для этого нажмите клавиши «Ctrl» «С».
Удалите кнопку из шаблона.
Выделите текст и вставьте скопированные иконки нажав на «Ctrl» «V».
В результате вставки у вас получиться следующий промежуточный результат.
Скопируйте из готовых шаблонов для фигмы контактную форму, как показано выше.
Вставьте форму в дизайн макет ниже женщины.
Замена цвета во всём дизайн макете Figma с помощью «Selection colors»
Чтобы заменить цвет во всем макете в Figma, выберите фрейм. Слева под надписью «Selection colors» выберите «Синий», затем измените его на «Оранжевый».
Аналогичным образом измените темный цвет на кнопках на белый.
В результате у вас получиться такой промежуточный результат. Теперь добавим декоративные элементы.
Добавляем декоративные элементы в дизайн сайта
Чтобы «оживить» наш дизайн макет и сделать его более интересным добавим элементы на фон. Это будут круги.
Для начала создадим прямоугольник с помощью инструмента «Rectangle». Размеры 1325 x 1325 px.
Затем задайте скругление 1000, чтобы создать круг. Можно сразу создать эллипс с помощью этого инструмента.
Удаляем у круга заливку нажав внизу надписи «Fill» на минус. Затем добавляем обводку внизу надписи «Stroke» нажав на плюс.
Ставим размеры обводки 400 px.
Изменяем цвет круга на оранжевый, чтобы он вписывался в наш дизайн макет.
Перемещаем круг в левый верхний угол, чтобы он располагался за женщиной.
Перемещаем круг на задний план, чтобы все выглядело как на скриншоте выше. Для этого можно нажать на комбинацию клавиш «Alt» «Ctrl» «[».
Результат, который получиться после перемещения круга на задний план. Можно подвигать элементы шапки, чтобы они не заезжали на круг (электронная почта и адрес). Телефон оставим в круге.
Копируем круг и перемещаем его в сторону (Ctrl C) (Ctrl V).
Выбираем инструмент «Scale», чтобы изменить размеры круга.
Делаем круг примерно как на скриншоте выше и перемещаем его чуть выше формы слева.
Копируем круг и уменьшаем его в размерах. Помещаем его рядом с логотипом сверху.
Добавляем эффект размытия нажав на плюс внизу надписи «Effects» и изменяем значение на «Layer blur»
Нажимаем на иконку солнца и ставим значение на 24, чтобы размытие было больше.
Добавление новых иконок в дизайн макет фигмы
Выделяем фрейм и вырезаем его нажав на «Ctrl» «X».
Переходим на страницу «Иконки» и вставляем наш дизайн макет нажав на «Ctrl» «V».
Скопируем понравившиеся иконки. Лучше выбирать иконки, которые подходят по смыслу текста, но поскольку мы не изменяли тут текст, то просто выберем случайные.
Переместим иконки рядом с дизайн макетом.
Выделим все иконки и изменим цвет на оранжевый, как показано на скриншоте выше.
Переместим иконки между старой иконкой и текстом.
Аналогичную операцию сделаем с другими иконками. Старые иконки удалим.
В завершении сделаем финальный штрих. Изменим прозрачность круга с женщиной на 50%.
Урок веб-дизайна. Заключение.
Итак, вы этом видео вы узнали как быстро делать дизайн Landing Page в Figma. Урок веб-дизайна подошел к концу. В результате получили классный дизайн макет, который можно добавить к вашему потфолио.
Конечно если добавлять его, то стоит изменить текст, чтобы это была не просто картинка, а картинка со смыслом. Смысловой слой не может жить, без визуального слоя, поэтому при работе с реальными проектами стоит продумывать текст заранее, поскольку именно от него зависит эффективность.
P.S. Ознакомьтесь с расширенным комплектом для создания прототипов и дизайна Landing Page «Дизайн генератор» по этой ссылке.
Это был урок веб-дизайна в Figma №4. Смотрите другие уроки тут.
Старт в Figma для верстальщика
Figma — это графический онлайн-редактор для дизайнеров интерфейсов и веб-разработчиков. Сейчас это удобная, бесплатная альтернатива Photoshop. Большое преимущество платформы — возможность работать прямо в браузере. При этом есть и десктопная версия. Расскажем, что надо знать верстальщику при работе с макетом в Figma.
Регистрация и добавление нового макета
Чтобы начать пользоваться редактором, нужно зайти на сайт и зарегистрироваться. Можно войти через Google или просто создать аккаунт на сайте.
Форма регистрации
После добавления макет появится в общем списке, и можно будет приступить к работе с ним.
Импорт нового макета
Структура макета и рабочие инструменты
Интерфейс в разделе работы с макетом состоит из нескольких блоков.
Работа с параметрами элементов
Основная задача верстальщика при работе с макетом — получить параметры элементов. Давайте разберём по пунктам, как это сделать в Figma.
Текст
Чтобы узнать все текстовые параметры, нужно выделить элемент и открыть вкладку Code в правой боковой панели. Там в списке свойств отобразятся все используемые параметры — название, размер, насыщенность и цвет шрифта, высота строки и остальные.
Работа с текстовыми элементами
Изображение
Свойства width и height во вкладке Code расскажут о размере изображения.
Работа с изображениями
Также можно скачать любое изображение из макета. Для этого нужно кликнуть по вкладке Design и там найти последний пункт Export. Далее в выпадающем меню выбрать формат, в котором вы хотите экспортировать изображение — PNG, JPG, SVG или PDF. Подробно о форматах изображений можно почитать в этой статье.
Экспорт изображений
Цвет элемента
Определение фонового цвета блока
Размеры элементов и расстояние между ними
Определение размеров элементов и расстояния между ними
Figma — это удобный и простой инструмент для верстальщика, и мы предлагаем вам попробовать его в деле. Приобрести макет в нужном формате можно в нашем магазине макетов.
Фигма — только один из навыков фронтендера
Научитесь работать с макетами в Фигме, и верстальщики скажут вам спасибо.
Как сохранять в Фигме: форматы JPG, PNG, PDF, SVG, FIG
В этой инструкции вы узнаете, как сохранять проекты или отдельные части вашей работы в фигме на компьютер в следующих форматах:
Примечание: делать действия, чтобы постоянно сохранять работу в фигме нет необходимости. Все ваши работы автоматически сохраняются на серверах фигмы. Эта инструкция нужна если вы хотите к примеру сохранить дизайн макет для портфолио или экспортировать какой-либо элемент для других целей.
Быстрая инструкция по экспорту файлов в Фигме
Любое изображение, картинку, фото, фрейм, макет, файл или проект целиком можно экспортировать с помощью функции экспорта. Выберите нужный элемент и нажмите напротив надписи «Export» иконку «+». После этого вы сможете выбрать нужный формат.
Нажав на надпись «Prewie» вы можете сделать предварительный просмотр экспортируемого элемента. Чтобы сохранить элемент на компьютер нажмите на кнопку «Export НАЗВАНИЕ ВЫБРАННОГО ЭЛЕМЕНТА».
Изменение масштаба экспортируемых файлов
Если хотите сохранить проект размерами в 2 раза меньше, то стоит выбрать другой масштаб. Изначально стоит 1X — это значит, что ваш проект будет сохранятся один к одному.
Если для макета размерами 1920 x 1000 px, поставить значение 0.5X, то масштаб сохраненного файла будет в два раза меньше (960 x 500 px). Аналогично объект увеличится в 2 раза, если поставить 2X.
Сохранить проект или картинку в Figma в формате JPG
Формат JPG — это растровый формат. Элементы сохраняются с расширением «.jpg».
Формат JPG подходит для сохранения:
Инструкция по экспорту из Figma в JPG на компьютер:
Чтобы сохранить любой объект, проект или дизайн макет в Figma выделите его. К примеру возьмем первый экран Landing Page. В правой панели нажмите на иконку плюсика напротив надписи «Export». Выберите из списка формат JPG. После этого нажмите на кнопку экспорта и выберите место для сохранения на компьютере.
Сохранение из фигмы файлов в формате PNG
PNG — это растровый формат изображений. Отличие PNG от JPG состоит в том, что этот формат подходит для сохранения изображений с прозрачным фоном.
Инструкция как сохранять в фигме в PNG на компьютер:
Выберите изображение или картинку для экспорта. Для наглядности возьмем изображение женщины, которая расположена в круге. Нажмите плюс рядом с надписью «Export» в правой панели и выберите формат PNG из списка.
Если нажмем на экспорт и сделаем предпросмотр нажав на надпись «Prewie», то будет видно, что вокруг изображения появился фон в виде шахматной доски. Это означает прозрачность.
Экспорт в формате SVG
SVG — это векторный формат изображений. Векторный формат отличается от растрового, тем, что в нем нет пикселей. Если вы увеличите JPG или PNG, то будет появляться зернистость в виде пикселей. С форматом SVG этого не происходит.
В дальнейшем вы сможете редактировать эти изображения в других графических редакторах, таких как Adobe Illustrator, Inkscape, Affinity Designer, Inscape и других.
Формат SVG подходит, если нужно сохранить:
Как сохранять в фигме в SVG:
Чтобы сохранить элементы из фигмы в формате SVG, выберите элемент. В правой панели нажмите + напротив «Export» и нажмите на кнопку экспорта. Выберите место для сохранения на рабочем столе или компьютере.
Как сохранить в Фигме в формате PDF
PDF подходит для экспорта различных документов или презентаций.
Чтобы сохранить элементы из фигмы в формате PDF есть 2 варианта — экспортировать каждый элемент отдельно, либо создать 1 файл с множеством страниц. Рассмотрим каждый из этих вариантов по отдельности.
Экспорт из фигмы в PDF с множеством страниц.
Формат PDF подходит если вы хотите создать:
Пошаговая инструкция по созданию PDF файлов:
Для примера экспортируем несколько моих работ и создадим небольшое портфолио (подойдет для отправки заказчику).
Важное примечание: в этом случае ничего не нужно выделять. Экспортируются все созданные вами ранее фреймы в вашем из вашего проекта.
Экспорт в PDF выбранных элементов:
Если вы выберите какие-либо элементы и нажмете справа на иконку плюсика, то можете сохранить несколько файлов в PDF по отдельности. В этом случае не будет создан единый файл в виде книги или брошюры.
Как сохранить проект в Фигме в формате FIG (внутренний формат)
Импорт файлов в Figma в формате «.fig»
Файл в формате «.fig» можно загрузить в фигму, если перейти во все ваши проекты раздел «Drafts» и перетащить к остальным проектам. Также есть иконка «Import» сверху, справа.
Массовый экспорт из Figma
Если у многих элементов уже был нажат плюсик экспорта, то можно массово их экспортировать нажав на сочетание горячих 3 клавиш «Ctrl + Shift + E». Появится специальное окно экспорта.
Как называть файлы, чтобы сохранить их в разные папки при экспорте
Если вы сохраняете файлы для разработки сайтов, то лучше называть их на английском языке. Например «Woman», «Illustration» и т.д.
Если хотите сохранить файл в отдельную папку то переименуйте слой следующим образом:
Файлы сохранятся в отдельные папки на вашем компьютере с названиями «1», «2», «3».
Далее поговорим о форматах и для каких элементов они подходят.
Важное дополнение:
Если вы хотите передать макет вашему заказчику, то нет необходимости сохранять всё на компьютер и отправлять (это прошлый век). Проще поделиться ссылкой на ваш проект. Это можно сделать нажав на кнопку сверху, справа «Share» (1) и скопировав ссылку (2).
Также можно поделиться вашим проектом в режиме презентации. Для этого нажмите на иконку «Play», сверху, справа. Затем нажмите на кнопку «Share prototype» и скопируйте ссылку нажав на «Copy link»
P.S. В этой статье вы узнали о том, как сохранять файлы в Figma в различных форматах.
Хотите получить бонусный урок быстрому созданию дизайн макетов Landing Page в Figma? Жмите на эту ссылку и получите 24 раздела для прототипирования и дизайна Landing Page в Figma.