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

Для создания макетов в Figma нужно в первую очередь определиться с целями дизайна. Необходимо понимать, что именно мы хотим показать и какие элементы должны быть на этих макетах. Затем следует определиться с форматами изображений, которые будут использоваться в работе, и с размерами макетов. Это упростит работу и поможет сохранить единый стиль дизайна.

В Figma есть несколько способов реализовать создание макетов. Один из них – это использовать уже созданные элементы и готовые блоки для создания своих макетов. Также можно использовать инструменты для создания макетов с нуля. Например, возможность создания векторных объектов или рисование кистью.

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

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

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

Изометрический мокап с помощью плагина в фигме

МОКАПЫ ДЛЯ FIGMA: ARTBOARD STUDIO. Обзор плагина — Уроки фигма на русском

Создаем мокап в фигме — 4 минуты урок

КАК СДЕЛАТЬ АНИМАЦИЮ В ФИГМЕ ЗА 10 МИНУТ — АНИМАЦИЯ В ФИГМЕ — #ПИЖАМАTV

Как сделать дизайн карточки товара на Wildberries. Урок в Figma

Мокапы для фигмы и новые плагины для фигмы! figma.community

Лучшие плагины Figma для создания Mokup

Дизайн мобильного приложения для заказа еды в Figma (2022)

МОКАПЫ БЕЗ СКАЧИВАНИЯ ФОТОШОПА — КАК РАБОТАТЬ С МОКАПАМИ — MOCKUPS — КАК ДЕЛАТЬ И ЧТО ТАКОЕ МОКАПЫ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

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

Feb 10, 2023 ⋅ 8 min read

Recent posts:

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

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

Знание основных принципов создания мокапов в Figma поможет вам сэкономить время и устранить возможные ошибки. Вы сможете более точно передать свои идеи заказчику или команде разработки, что значительно упростит весь процесс работы. Готовы начать? Давайте приступим!

Что такое мокап и зачем он нужен?

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

Зачем нужны мокапы? Они помогают:

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

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

Определение мокапа и описание его функций

Функции мокапа:

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

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

Выбор инструмента для создания мокапов

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

Преимущества использования Figma для создания мокапов:

1. Быстрота и удобство: Figma имеет интуитивно понятный интерфейс и инструменты, что позволяет быстро и легко создавать мокапы.
2. Коллаборация: Figma предоставляет возможность работать над мокапом с другими участниками команды одновременно. Это значительно упрощает процесс совместной разработки.
3. Автоматизация: Figma обладает мощными функциями автоматизации, такими как генерация спецификаций и экспорт в различные форматы.

Однако, Figma не единственный инструмент для создания мокапов. Есть и другие популярные программы, такие как Sketch, Adobe XD, InVision Studio и др. Каждый из них имеет свои особенности и преимущества.

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

Figma: особенности и преимущества

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

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

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

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

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

Шаги по созданию мокапа в Figma

1. Импортирование архитектуры дизайна: Прежде чем начать создавать мокап, импортируйте архитектуру дизайна, такую как сетка или проводники. Это поможет вам установить правильные пропорции и выровнять элементы на макете.
2. Создание основных элементов интерфейса: Следующим шагом является создание основных элементов интерфейса, таких как заголовки, кнопки, текстовые поля и т. д. Используйте инструменты и функции Figma для рисования, изменения размеров и выравнивания элементов.
3. Добавление контента: На этом этапе добавьте контент на ваш мокап. Это может быть текст, изображения или демонстрационные данные. Убедитесь, что контент соответствует целям и требованиям вашего проекта.
4. Создание переходов и анимаций: Если ваш проект включает в себя переходы и анимации, создайте их на этом этапе. Figma предлагает набор инструментов для создания простых и сложных анимаций.
5. Проверка и прототипирование: Перед завершением создания мокапа убедитесь, что все элементы интерфейса выглядят и функционируют должным образом. Создайте прототип в Figma, чтобы протестировать пользовательский опыт и потенциальные интерактивные функции.
6. Совместная работа и обратная связь: Если вы работаете в команде, используйте функции совместной работы Figma, чтобы делиться мокапом и получать обратную связь от коллег. Это поможет вам улучшить дизайн и достичь лучших результатов.
7. Экспорт и доставка: Когда ваш мокап готов, экспортируйте его в нужных форматах, чтобы передать его клиенту или разработчику. Figma предлагает различные варианты экспорта, такие как PNG, SVG или код CSS для элементов интерфейса.

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

Установка и настройка Figma

Следующие инструкции помогут вам установить и настроить Figma:

После установки и настройки Figma вы сможете воспользоваться всеми возможностями этого отличного инструмента для создания мокапов.

Создание рабочего пространства

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

Для создания нового рабочего пространства в Figma вы можете выполнить следующие шаги:

1. Войдите в ваш аккаунт Figma и перейдите на главную страницу.

2. Нажмите на кнопку «Создать новый файл».

3. Выберите тип документа, который соответствует вашим целям.

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

4. Назовите свой файл и нажмите на кнопку «Создать».

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

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

Want to make your Figma designs look more realistic? Add a mockup. You can do it right in Figma with the help of plugins.

If you’re a designer who likes to showcase your designs by using mockups, it can be easy to create them in Figma.

Instead of saving your Figma designs and moving to another program to create a mockup, you can easily download mockup plugins in Figma. There are many plugin options in various styles, but they’re all simple to use and integrate into larger designs.

How to Find and Download Figma Plugins

Downloading and installing a plugin in Figma is the same whether you’re using the app or the browser version. From Figma’s browser homepage, click Community > Plugins and Widgets, and search through the list or use the search bar.

From Figma’s app, the homepage will offer the same option as the browser to get to the community page. But if you’re on a design page, you can click the Figma logo, then Plugins. If you’ve already got plugins installed, you’ll see them listed here.

To find more, choose Browse Plugins in Community. This will take you to the community page within the app where you can search for other plugins.

On the community page, you’ll find a small blurb for each plugin, date of the last update, and how often each plugin has been downloaded. For more information about each plugin—such as comments from users and usage guides—clicking its name will take you to that plugin’s information page.

Once you’ve found a plugin you’d like to download, click the blue Install button.

If you’re not sure what to look for, here are our top five favorite mockup plugins. There are many more, but it’s good to start somewhere.

• Clay Mockups 3D
• Angle Mockups
• MockRocket — 3D Mockups
• Mockup
• Vectary 3D Elements

How to Use Mockup Plugins in Figma

The process of installing plugins is the same regardless of the type of plugin you’re using, but there may be some differences in how they are used. That’s why it’s always best to read the individual plugin’s community page for extra details.

In Figma, you can choose ready-made frame sizes for specific screens, like the iPhone 13 or a large or small Android. You should create your design for its intended device size rather than trying to resize the designs later to fit your mockup, but some mockups will allow for slightly different sizes with no distortion.

You could even use a screenshot from your device, which will be perfectly sized for a mockup of the same device.

Mockups are usually for static screen designs, although you can make a video mockup in Photoshop. We’re going to focus on Figma mockups for handheld devices, but you can create a mockup from scratch in Photoshop for other devices. With your screen design finalized, you can move on to creating the product mockup.

We’re going to show you how to use three of our suggested plugins: Clay Mockups 3D, Angle Mockups, and Vectory 3D Elements. Let’s jump right in.

Clay Mockups 3D

With your design open, select the frame and then go to Plugins and choose Clay Mockups 3D. This opens a window where you can choose the device for the mockup. Your design should show on the screen of the mockup in this window.

You can change the angle of the mockup as well as the color in this window. Once you’re happy with how it looks, click Save as Image.

You can go back and change the color or other aspects at any time by clicking Edit Mockup under Plugin in the right-hand menu. Now you can add your plugin to larger designs like presentations or your portfolio.

Angle Mockups

To use Angle Mockups, you need to create an Angle account to download the mockup library from their website. On Angle’s website, click Sign In, which will bring up a popup where you can click Sign Up and add your details to make a free account.

Once signed in, to download the mockups, click Mockups > Download Sample. For a more comprehensive set of mockups, you can pay for premium access, but the sample offered with the free account is good enough.

Once downloaded, unzip the file. This contains samples you can use in Figma, Sketch, and Adobe XD, as well as some free wallpapers. Open Angle Figma. You’ll find two videos to help with using the mockups, as well as four sets of Figma files with various mockups.

To import the files to your Figma account, go to the Figma browser and click on your profile. You can access this from the app by going to File > Open File Browser. Drag and drop each Angle file into Figma. Then open the Angle file by double-clicking on it from the Figma browser page.

Find the device angle you want to use for your mockup and copy it (Cmd + C for Mac or Ctrl + C for Windows). Paste it (Cmd + V for Mac or Ctrl + V for Windows) into the same artboard as your main design.

In the layer palette, expand the layers of the mockup screen until you see the layer with a picture icon titled Place Artboard Here. Select that layer. Then go to Plugins > Angle Mockups and select your original design in the popup window.

This should show in the preview window in the angle of your mockup, but it will not show the device of the mockup. Click Apply and your screen should now be on the device mockup at the correct angle.

Vectary 3D Elements

Vectary 3D works similarly to Clay Mockups 3D, although it has fewer options for device mockups as it also offers a variety of 3D assets. Open your design, select the frame, and go to Plugins > Vectary 3D Elements.

Find the mockup you’d like to use in the popup library, then click Load Frame. Once your design has appeared on the device’s screen, click Export Image.

Now you have a 3D mockup of your design on the device you choose. You can add it to another design easily.

Once your mockup is complete, you can save it as a PNG file to easily use in another design. Click File > Export. Select your chosen image to export, then click Export for your final PNG.

Add Realism to Your Designs With Figma Mockups

There are countless uses for creating mockups for your designs. With various Figma plugins, you can find a large variety of styles to work with that you can add to your presentations, portfolio, or create just for fun to show off your design work.

With a few differences in application, Figma mockup plugins are easy to access and use, so why not try it?

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):

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.

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.

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.

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.

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.

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:

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.

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.

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 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