Как сделать мокап в фигме пошаговая инструкция

Введение в Figma и основные функции

Figma — это мощный инструмент для создания макетов и мокапов, который позволяет дизайнерам работать совместно в реальном времени. Он обладает интуитивно понятным интерфейсом и множеством функций, которые делают процесс проектирования более эффективным. В этой статье мы рассмотрим основные функции Figma и научимся создавать макеты и мокапы с нуля.

Картинка с сайта: sky.pro

Основные функции Figma

Figma предоставляет множество инструментов для создания и редактирования дизайнов. Вот некоторые из них:

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

Создание первого макета: шаг за шагом

Шаг 1: Создание нового проекта

1. Откройте Figma и нажмите на кнопку «New File» для создания нового проекта. Это действие откроет новый холст, на котором вы сможете начать работу над своим дизайном.
2. Назовите проект и выберите размер холста, который соответствует вашему дизайну. Вы можете выбрать стандартные размеры для веб-страниц, мобильных приложений или создать кастомный размер.

Шаг 2: Добавление фреймов

1. Выберите инструмент «Frame» (F) и создайте основной фрейм для вашего макета. Фреймы помогут вам организовать структуру вашего дизайна и упростят работу с различными элементами.
2. Добавьте дополнительные фреймы для различных экранов или секций вашего проекта. Это позволит вам легко переключаться между разными частями дизайна и работать над ними параллельно.

Шаг 3: Добавление элементов

1. Используйте инструмент «Rectangle» (R) для создания прямоугольников, которые будут служить контейнерами для текста и изображений. Прямоугольники можно легко настраивать по размеру, цвету и другим параметрам.
2. Добавьте текстовые поля с помощью инструмента «Text» (T) и настройте шрифты, размеры и цвета. Текстовые поля позволяют добавить заголовки, описания и другие текстовые элементы в ваш дизайн.

Шаг 4: Настройка стилей

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

Работа с компонентами и стилями

Создание компонентов

1. Выберите элемент или группу элементов, которые вы хотите превратить в компонент. Компоненты позволяют повторно использовать элементы дизайна и вносить изменения в одном месте.
2. Нажмите правой кнопкой мыши и выберите «Create Component» или используйте сочетание клавиш Ctrl+Alt+K (Windows) / Cmd+Option+K (Mac). Это создаст компонент, который вы сможете использовать в других частях вашего проекта.

Использование компонентов

1. Перетащите созданный компонент из панели «Assets» на холст. Компоненты можно легко дублировать и изменять, не нарушая их основную структуру.
2. Измените свойства компонента, такие как текст или изображения, не нарушая его основную структуру. Это позволяет вам адаптировать компоненты под разные части вашего дизайна.

Создание стилей

1. Выберите элемент, для которого вы хотите создать стиль. Стили помогают поддерживать единый визуальный язык в проекте и облегчают редактирование.
2. В панели «Properties» нажмите на значок «+» рядом с нужным параметром (цвет, текст и т.д.) и сохраните стиль. Вы сможете применять этот стиль к другим элементам вашего дизайна.

Создание и использование мокапов

Что такое мокапы?

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

Создание мокапов

1. Найдите или создайте изображение устройства, на котором будет отображаться ваш дизайн. Вы можете использовать готовые мокапы из интернета или создать свои собственные.
2. Импортируйте изображение в Figma и поместите его на холст. Это изображение будет служить фоном для вашего мокапа.
3. Перетащите ваш макет на изображение устройства и настройте его размеры и положение. Убедитесь, что ваш дизайн правильно отображается на устройстве и выглядит реалистично.

Использование мокапов

1. Используйте мокапы для презентаций и демонстраций вашего дизайна клиентам или команде. Мокапы помогают лучше понять, как будет выглядеть конечный продукт и позволяют получить обратную связь на ранних стадиях.
2. Экспортируйте мокапы в формате PNG или JPG для использования в документации или на веб-сайтах. Это позволяет легко делиться вашими дизайнами с другими и использовать их в различных материалах.

Советы и лучшие практики для начинающих

Советы по работе в Figma

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

Лучшие практики

• Следите за трендами: Изучайте современные тренды в дизайне и применяйте их в своих проектах. Это поможет вам создавать актуальные и привлекательные дизайны.
• Постоянно учитесь: Читайте статьи, смотрите видеоуроки и участвуйте в вебинарах, чтобы улучшать свои навыки. Обучение помогает вам оставаться в курсе новых технологий и методов.
• Практикуйтесь: Чем больше вы практикуетесь, тем лучше вы станете в создании макетов и мокапов. Практика помогает вам лучше понимать инструменты и методы, а также развивать свои навыки.

Создание макетов и мокапов в Figma — это увлекательный и полезный процесс, который позволяет воплотить ваши идеи в жизнь. Следуя этому руководству, вы сможете быстро освоить основные функции Figma и начать создавать профессиональные дизайны. 🚀

Читайте также

Сегодня вы узнаете как делать мокапы для фигма с помощью плагина «Artboard studio». У плагина есть множество бесплатных мокапов: телефонов (айфонов и телефонов на андроид), планшетов, компьютеров (ноутбуков, макбуков), бутылок, книг, визиток, упаковок и т.д.

Смотрите видео, либо воспользуйтесь текстовой версией инструкции ниже.

Мокапы для фигма. Как установить плагин с мокапами?

Картинка с сайта: web-design.center

Чтобы установить плагин с мокапами в фигма перейдите по ссылке и нажмите на кнопку сверху «Install».

Активация плагина «Artboard Studio Mockups» в Figma

Картинка с сайта: web-design.center

Чтобы активировать плагин в Figma нажмите на меню слева и наведите на надпись «Plagins» далтее выберите «Artboard Studio Mockups» «Add Mockup Item».

В появившемся всплывающем окне нажмите на ссылку, как показано на скриншоте выше.

Картинка с сайта: web-design.center

Вас перенаправит на сайт сервиса artboard.studio, где вам необходимо будет зарегистрироваться. На первом шаге нужно ввести email и пароль, либо войти с помощью Facebook или Google.

Картинка с сайта: web-design.center

На втором шаге регистрации вам предложат заполнить небольшую анкету. Здесь можно указывать любые данные из списка. Это не на что не влияет.

После регистрации снова нажмите на ссылку, которая есть в плагине «Artboard Studio» в Figma.

Картинка с сайта: web-design.center

Вас перенаправит на страницу, где вы сможете сгенерировать Api Key. Для этого нажмите на синею кнопку справой стороны. Затем скопируйте появившийся ключ.

Картинка с сайта: web-design.center

Вставьте Api key в окно плагина в фигме и нажмите на кнопку «Save and continue».

Мокапы для Figma. Как пользоваться плагином.

Картинка с сайта: web-design.center

Пользоваться мокапами в фигме очень просто. Для этого запустите плагин Artboard Studio и выберите понравившийся вам мокап из представленного списка.

Картинка с сайта: web-design.center

Вы можете производить поиск мокапов с помощью верхней строки поиска. Если хотите вставить мокап телефона, то введите «Iphone» или другую марку. Введите в окно поиска «laptop», если хотите найти мокап ноутбука. Аналогично можно искать мокапы книги, визитки, макбука, упаковки и т.д.

Картинка с сайта: web-design.center

Если нажмёте на выпадающий список с надписью «All items», то появится возможность выбрать бесплатные мокапы «Free items» или платные «Premium items».

Картинка с сайта: web-design.center

Можно сортировать мокапы если развернуть список, который есть по центру.

Картинка с сайта: web-design.center

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

Как вставить мокап в фигме с помощью плагина

Картинка с сайта: web-design.center

Чтобы вставить мокап в фигме с помощью плагина Artboard Studio Mockups, выберите нужный мокап из списка. Для примера выберу ноутбук.

Картинка с сайта: web-design.center

При вставке мокапа в ваш проект в Figma, у вас появится 2 элемента: ноутбук и фрейм куда необходимо вставить ваш дизйан.

Картинка с сайта: web-design.center

Если ваш дизайн больше фрейма, который появился, то уменьшите размер дизайна с помощью клавиши «K».

Картинка с сайта: web-design.center

Вставьте ваш дизайн в фрейм, как показано на скриншоте выше. Выберите фрейм и нажмите на кнопку «Render selected frame» в плагине.

Картинка с сайта: web-design.center

Ву-а-ля! Вы ставили свой дизайн макет в мокап ноутбука.

Картинка с сайта: web-design.center

Аналогичную операцию можно проделать для айфона и вставить ваш дизайн в мокап телефона.

Заключение

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

P.S. Получите бонусные материалы по быстрому созданию дизайна Landing Page в Figma, то по этой ссылке.

Автор статьи: Владимир Чернышов

P.P.S. Проект и автор не связан с компанией Figma (Not affiliated with Figma).

Last Updated :
31 May, 2024

Creating your first Mockup in Figma can be a tedious, yet entertaining task that would comprise a whole lot of creativity, ingenuity & excitement. Mockups in Figma are a basic layout or a skeletal of the project which is designed to be submitted as a high-fidelity prototype to the client. In this article we will learn how to design the UI of a project in Figma and then add prototypes to it, thus creating a good Mockup for it.

Introduction to Figma

Figma is a collaborative online designing tool that is used frequently to design websites, for UI(user interactive) & UX (user experience) designs, graphics posts, etc. It is the most widely used tool for converting design into development. It helps in setting up a functional UI structure of a project that can be submitted to the client for website purposes, and those designs can be converted to development codes of React.js or HTML, etc, using plugins on Figma.

How to create Mockups in Figma (Steps)?

In this article, we will be considering the Mockup of a recipe application and learn how to enhance its UI and add basic prototypes to its components.

1. Starting with a Mid-Fidelity Wireframe

A mid-fidelity wireframe provides a skeletal layout of the entire design, the placement of text, several images & the type of font that would be used. Here we have created a mid-fidelity wireframe design, specifying rectangular boxes that require the placement of an icon, or image and the buttons too.

Here’s the wireframe design:

Картинка с сайта: www.geeksforgeeks.org

2. Creating UI Design Mockup

Step 1: Select a frame of mobile size.

Step 2: Add a navigation bar, a logo in the left side and a few icons of search & like in the right side. Plus for a desktop view to elongate the content for the screen size accordingly, add a side bar section of daily special foods and specify it’s pricings and discounts.

Картинка с сайта: www.geeksforgeeks.org

Step 3: Create a main section with a picture of any food item with it’s name, other details & time till which it is available. Copy this for a section of another food too.

Картинка с сайта: www.geeksforgeeks.org

Step 4: Add a heading Categories and under that add multiple pictures each of food items and their names.

Картинка с сайта: www.geeksforgeeks.org

Step 5: Finally add a section of Popular Recipes & within that add few details about another food item. Here’s the final design:

Картинка с сайта: www.geeksforgeeks.org

2. Creating Mockup Screens

A mockup is when you view on a laptop or desktop, or a tablet for the required design & view as how the design looks on devices of different screen sizes. For eg. If the desktop view for our wireframe here used is looking good, then on tablet it might look oversized. Hence according to the need of the specific mockup, we would eliminate a few elements or change them.

Note: Use the plugin «Mockuuups Studio» on Figma to create mockups for different devices. Choose the option of view plugins and click on this plugin & generate multiple images for mockups as follows:

Step 1: Click on the plugins on the tab above the design & search for Mockuuup Studio.

Step 2: Choose one of the above options and select a Mockup of choice.

Here’s the mockup for laptop:

And here’s the mockup for tablets:

Importance of using Mockups in Figma

• Mockups in Figma are essential since it provides a visual representation of the site before the actual submission to the client.
• Mockups are essentially high fidelity wireframes with a complete set of possible prototypes wanted in a web design template.
• Mockups help in making responsive websites, since it caters to all different screen sizes.

Conclusion

Mockups are important in Figma since they allow changes in UI designing & UX designing too before actual submission to the client. They allow refactoring & final changes in the web design & are used to submit a high valued prototype to the customer. It helps in understanding the placement of basic elements in the design file & their properties. Mockups thus, form an integral part of the web design field.

What’s Figma?

Figma has become the UX/UI design tool of choice for forward-thinking designers to create digital interfaces. According to The Hustle, in June 2021 they raised $200MM in a round that valued the company at $10B.

[Update: Sep 2022] Adobe’s recent acquisition of Figma is a huge coup for the software giant, and will no doubt help them to further cement their place as the go-to choice for creative professionals. Figma is a cloud-based vector graphics editor and prototyping tool, which will complement Adobe’s existing Creative Cloud suite of tools perfectly. It is also used by many top design firms and has a very loyal following among designers. With this acquisition, Adobe is clearly signalling its intention to be the one-stop-shop for all things design.

Since then, they’ve released their FigmaJam collaboration tool. And plan to become an end-to-end solution from initial designs to finished products.
With its rate of growth, vast plugins, and generous free plan — It’s taking the industry by storm. Light years ahead of traditional tools like Photoshop which can cost anywhere from $252/year.

The trouble is… Figma doesn’t let you create beautiful device mockups from your designs.

In this post, I’ll walk you through how to access Figma’s plugin library. How to make a mockup on Figma. And how to use Figma mockups.

Let’s jump in.

What are Figma plugins?

If you’re new to Figma, you might be new to plugins. In a moment, I’ll show you how to install them. But you can think of them as adding extra functionality to your design tool by adding other apps inside the program.

For example, Mockuuups Studio is a desktop app to create over 1600 drag and drop mockups in a few clicks.

With the rise of Figma in 2019, we turned it into a Figma mockup plugin to give users access to over 1600+ device mockups inside Figma.

Since then, the Mockuuups Studio plugin has over 135K Figma installs by designers like you. There are tons of Plugins to enhance your workflow. We go into detail about these here.

But to give you an idea of how much functionality the plugin can bring, here’s a round-up from our friend Nattu at LottieFlies (another great plugin):

Картинка с сайта: mockuuups.studio

Side note: If you’re wondering how to build a mockup plugin yourself so you can contribute to this space too, keep reading to the end of the article.

How to create mockups in Figma (4 simple steps)

1. Install the Figma mockup plugin

To create mockups in Figma, I’ll assume you’ve already got Figma installed, but if not you can go ahead and sign up for the generous free plan here.

Картинка с сайта: mockuuups.studio

Then, from inside Figma, click Plugins from the left menu, click browse all plugins, search for Mockuuups Studio in the search bar, and click install to get the Figma mockup plugin.

Or, you can install it from the Figma community page here.

2. Select your Figma frame

In Figma, we call designs “frames.” These are what you can inject into over 1600 mockups.

Картинка с сайта: mockuuups.studio

Inside your project, select a frame and open the Mockuuups Studio plugin from the plugin menu. A new window will pop up with your select frame formatted to the entire mockup collection.

3. Choose a Figma mockup

From the Mockuuups window, you can preview your frame in all mockups at once.

Up top, navigate through device types running from phones, tablets, smartwatches, and computers. Then, filter by hand type, orientation, and transparency.

Картинка с сайта: mockuuups.studio

With the vast mockup library from up-close standalone devices to lifestyle scenes… you’ll finally be able to bring your designs to life and see the back of clunky templates.

4. Export your Figma mockup

Once you’ve selected a mockup you can either export your scene or paste it back into your Figma file to customize.

Картинка с сайта: mockuuups.studio

Click on a mockup to enlarge it, click Export from the top right and choose from either Export as file or Place into document.

Yay. You successfully created a mockup inside Figma. Now let’s dive into how you can edit a mockup in Figma.

How to edit mockup in Figma?

Sometimes, you might want more than a mockup template, and create your own mockup from scratch.

Thankfully, Mockuuups Studio lets you customize device colors, hands, backgrounds, and effects to create custom mockups from over 788+ million combinations in seconds.

Картинка с сайта: mockuuups.studio

All you need to do is open up the Mockuuups Studio plugin and click “Open Studio” from the top left of the mockups grid.

Here you can choose from dozens of smartphone, tablet, and computer mockups. Customize colors, hand interactions, effects, backgrounds, and more to make any mockup imaginable.

Here’s a quick Figma mockup tutorial we put together to run you through it:

Best Figma Mockups

I could go on about all the mockup possibilities within the Mockuuups Studio. And talk about how you can impress clients, stand out from competitors, and speed up your workflow.

But instead, let’s show you some of the favorite mockups you can create in as little as 3 minutes with Mockuuups Studio:

Картинка с сайта: mockuuups.studio

Картинка с сайта: mockuuups.studio

Картинка с сайта: mockuuups.studio

Liked what you saw here? Check out this round-up of the best iPhone mockups for Figma designs.

Why use mockups in Figma?

You might think creating mockups in Figma is all well and good. But why would you want to do this in the first place? For starters, creating mockups inside your design tool will save you a ton of time, but it also gets you amazing results.

Картинка с сайта: mockuuups.studio

Presenting your prototypes to team members

During the design process, you’ll be collaborating with your team. Whether that’s getting feedback from stakeholders or collaborating with fellow creatives. Figma mockups let you create mockups for feedback without breaking up your workflow or spending time doing low-impact activities.

Stunning ads and marketing content in a click

With apps and digital products, creating content to attract users it’s hard to generate from plain app screens. Startup founders and marketers like Fabrizio Rinaldi at Mailbrew use Figma mockups to create endless mockups to market app features:

Your startup’s pitch deck

If you’re a cash-strapped startup seeking initial investment after some validation. You might not have the capital to yet develop a full-blown app. Mockups create the perfect bridge to show what you plan to create with stunning visuals to investors.

Stunning displays for your portfolio projects

If you’re a designer using Figma, you might be looking for a way to show your projects in beautiful scenes. Figma mockups give you an easy way to export professional views of your designs.

If you want to see how to craft a killer UX portfolio check this post where we dive into detail from industry experts: How to make an attention-grabbing UX portfolio to land your next client.

How to create Figma Plugins yourself

If you’ve read this far, chances are you curious about making Figma Plugins. There is official plugin documentation that goes into detail about getting started.

Under the hood, Figma plugins use simple web technologies like HTML, CSS, and Javascript for making their user interface functional.

For the Mockuuups Studio plugin, to match Figma’s look and feel, we used a UI library Figma Plugin DS by Tom Lowry.

Using a UI library, allows you to prototype functionality rapidly and keep our focus on even more important things like the speed and ensuring the quality of rendered mockups.

Our Figma plugin UI is developed in React and is connected to the same set of mockups we provide in our desktop app and our rendering technology.

This lets us bring you the full desktop app experience in a small package of the plugin.

Want to know more about our Figma story?

Mockuuups has been 8 years in the making and looking back, what’s clear in hindsight is that building the Figma plugin functionality has been instrumental to our growth.

Картинка с сайта: mockuuups.studio

Jakob Greenfeld shared a post on Indie Hackers recently called “strapping yourself to the back of a rocket which really resonated with us.

He explains the concept of finding a fast-growing platform like Shopify, Discord, or Figma and building on top of it. Then (hopefully) as a result, you strap yourself to the back of someone else’s rocket.

For us, offering a Figma plugin has allowed us to do exactly that! And this concept goes beyond plugins…

You could build on emerging technologies like GPT-3 or offer productized services to solve a «popular platform problem.»

If you’re an aspiring designer, maker, or startup founder… ask yourself, what could you strap yourself to? You could make your life a whole lot easier.

You can read even more about our indie app journey here.

What you should do now

Try our Figma mockups plugin for free and join over 135K designers like you using it to impress clients and speed up their workflow.

And if you’re already with us, here are more Figma tips to give you the edge:

• 9 Figma Tips and Tricks that makes you faster
• 10 Time Saving Figma Plugins