Learn how to use Figma integration to upload your own design projects onto mockups from Smartmockups using a simple URL link. It is super easy and fast!
There is a large number of design tools that you can use these days. I am sure we all remember the days when we bought our first license for Adobe Photoshop. Now the design trends have totally transformed the design softwares designers use on daily basis. One of them that totally broke the silence in 2016 was Figma. The overwhelming response by many influential designers online really compelled many other to give Figma a go and eventually switch from Sketch. Figma is expected to receive even more love from designers this year and therefore we decided to add Figma integration into Smartmockups to help you all to upload your own design projects onto mockups to create wonderful prototypes of any kind.
If you have ever heard about Sketch as a web designer, then you have probably heard about Figma as well. One could think that both of these tools are very similar. However, there is a one huge difference that makes the wow effect for many. Figma runs fast and smooth in your browser and enables you to share the project across teams so that you can collaborate with your colleagues in real time (very similarly to Google Documents). Ever since its launch, Figma has received large number of positive reactions from not only individual designers but also teams across corporations such as Twitter, Slack, Dropbox, Microsoft and many more!
Figma integration represents a unique connection with Smartmockups which lets you upload your design from Figma onto a mockup to create final prototype of your design project using a simple URL link. Thanks to the URL link, Smartmockups is going to easily copy the design work in Figma and project it onto a mockup scene of your own choice.
*Note: The upload takes about 5 seconds to finish!
Web designers would usually spend hours designing the perfect landing pages or mobile apps and then another set of hours to create the perfect presentation of it. Imagine that all this additional set of hours can be easily saved for different projects! All you have to do is copy the URL link of the Figma design and place it into Smartmockups upload window. The Smartmockups app will get through the link and project the design into the crop tool where you can even adjust the size and position if you want. The whole process is super fast and takes only a few seconds until you get a stunning mockup with your own design from Figma.
Let's say that you are leading a team of designers who are creating a new branding for client's website. It is crucial for you to have the final presentation of the website ready so that the client can really get an overview of what the landing page can look like across different devices. For that, you can easily copy the URL link of your design project in Figma, paste it into Smartmockups, and create a whole variety of mockups that fit your purpose the best (e. g. smartphone, laptop, desktop mockup). It is that simple!
There is no other suitable way of showing you how the integration works than doing it all in practise. So let's create a mockup to see the performance of Figma integration together with Smartmockups. With the following step-by-step guide, you will be able to learn how to create your first mockup using Smartmockups' Figma integration.
We are going to create a mockup, particularly a mobile app using an iPhone 8 smartphone mockup. On our website, go to the "digital mockups" section and look for smartphone mockups. Choose the perfect one that suits your project.
Head over to Figma's website to start with the creation. In this step, you have a lot of options. You can naturally share the project with your colleagues to collaborate in real-time very similarly to sharing Google Documents or leave each other comments to know who is responsible to adjust different aspects of the design work.
Now that you have your design in Figma ready, forget downloading the image to your computer and searching for it to upload. All you have to do is copy the URL link of the web page with your finished design, go to the mockup detail on Smartmockups and click the Upload from Figma button. Once you paste the URL into the field and upload the image, you will see the crop tool where you can even ajdust the size and position of the uploaded image along with live preview of the final mockup.
The last step is to customize the mockup according to your own needs. Depending on what kind of mockup you have chosen in the beginning (photo mockups or isolated mockup), you can naturally change the colour of the item, colour of the background and much more. In our case we're going to change the poster frame style and add a background image from Unslpash with a little blury effect on to top.
Once you are done with the customization, you can hit the "download" button and choose from different export qualities. Please note that the higher resolution you choose, the better quality you get. As we said at the beginning: Easy, right? 👌
Figma is our most recent integration added! Now that you know how to get a hang of it, go ahead to create your first mockups using Figma integration in practise!
We are actively reposting your creations on Instagram, Twitter and Facebook. Tag us in using #madewithsmartmockups for your chance to get featured! Also don't forget to follow us to stay up to date with new mockups and features.