How to Create an app in 10 minutes or less using Adobe XD & PhoneGap.

Photo by cottonbro on Pexels.com

I will show you how to create an iOS, Android, or Windows App in 10 minutes or less using PhoneGap and Adobe XD. This is a very basic designed app for beginners, just to give you easy steps on how you can convert your design to code and compile them into an app. For this article, you don’t need any coding skills, as codes will be created automatically using Adobe XD plugins. If you have a good basic knowledge of HTML, CSS, or Javascript coding or basic design skills in Adobe XD, there are many possibilities for the app to look best.

Let’s Design

In this tutorial, we are using Adobe XD for design. Adobe XD is a free for starters vector-based user experience design tool to create web & mobile applications by Adobe Inc. You can download it using a Adobe’s Creative Cloud. Adobe XD is In this tutorial, we are using Adobe XD for design. Adobe XD is free for starters vector-based user experience design tool to create web & mobile applications by Adobe Inc. You can download it using Adobe’s Creative Cloud. Adobe XD is very easy to use especially for beginners and has hundreds of plugins to improve your workflow. We will add more Adobe XD tips & tutorials in our blog or YouTube Channel, so do follow for updates. So now let’s begin –

  • Open Adobe Xd and select a screen size of your choice for a mobile app, here we taken “iPhone 6/7/8 (375*667)”. Rename the screen as Splash, as we are building a splash screen for and an app.
Create Splash Screen
  • Select “Rectangle Shape” and draw a rectangle in the middle of the screen of 300×310 and center align using guides or using the “Align Center (Horizontally)” button or using the keyboard shortcut “Shift+C”.
Add Rectangle Shape
  • Just drag & drop your logo or an image into the rectangle shape, so that the rectangle is replaced by your logo. Drag the corners by holding shift to increase logo size. Make sure your logo is aligned center horizontally.
  • Write some sample text like “Buy Everything Organic!” Change Font to “Roboto” and set Font weight to “Medium” and size to “18”. Center align the text.
Add Text
  • Let’s create a button, select the rectangle shape again, and draw a rectangle on the canvas with dimensions 300×50. Click on circular points on the edges of the rectangle to set a rounded rectangle radius to 20. Select the EyeDropper tool by pressing “i” on your keyboard and select a color from your logo to match the theme.
  • Add text to the button with Font “Roboto” and set Font weight to “Medium” and size to “20”. Click “Align Middle (Vertically)” or Press “Shift+M” and “Align Center (Horizontally)” or Press “Shift+C”.
Add Call to Action

Convert Design to Code

  • Install and open Adobe XD plugin called “Fireblade“. This plugin converts your design into ready HTML/CSS templates with proper dimensions.
Install and run Fireblade
  • Click on the Splash screen and click “Setup” in the Fireblade panel. Select the folder in “Folder to export content” in Export options, where you want to export all your template files like HTML, CSS, etc.
Fireblade Setup
  • You can check other options by Fireblade to customize it according to your needs like constraining screen from all sides or just leave it with default options. Also, you can attach the required font files.
  • Now click the “Export” button to export all required files
Export

Compiling files and using PhoneGap

  • Now use any editor of your choice to create a config.xml, I use Atom for my codes. Create a new file and just copy the code below and paste it in your editor.
<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns   = "http://www.w3.org/ns/widgets"
    xmlns:gap   = "http://phonegap.com/ns/1.0"
    id          = "com.phonegap.example"
    versionCode = "10"
    version     = "1.0.0" >

<!-- versionCode is optional and Android only -->

  <name>PhoneGap Test</name>

  <description>
      An example for phonegap build docs.
  </description>

  <author href="https://build.phonegap.com" email="support@phonegap.com">
      Anurag World
  </author>

</widget>

You can change the name of the app in the <name> tag and author name in <author> tag. Save the file as config.xml in the folder with other files.

Create config file
  • Rename the splash HTML file to index.html. You need to have at least one Index file.
Rename Index File
  • Select all files and right-click, select “send to compressed (zipped) folder”, or create a zip folder with required files. Rename it as “Final”.
Create Zip File
  • Click “Upload a .zip file” and select the “final” file to upload.
Upload zip file
  • After uploading now click the “Ready to Build” button and the PhoneGap will create necessary package files.
Ready to Build
  • Now PhoneGap will build and compile all the files and present you with a QR code to open the link and download directly to your phone or you can click iOS, Android or Windows icons to download the files. Install the package file on your phone and test your new app.
Final App

These steps are just to give an idea of how you can easily build an app using HTML files. If you have basic knowledge of HTML, CSS, or Javascript you can customize it and add more features to your HTML files like adding links, buttons, etc. We will explore more methods and also learn advanced methods to build different types of apps. Make sure you subscribe to our newsletter or Follow for more. Also, click here for free video tutorials on YouTube.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s