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.
- 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”.
- 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.
- 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”.
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.
- 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.
- 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
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="email@example.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.
- Rename the splash HTML file to index.html. You need to have at least one 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”.
- PhoneGap is a mobile development framework created by Nitobi, now owned by Adobe Inc. An open-source version of the software is also available called Apache Cordova. Open https://build.phonegap.com/ and sign in with your account.
- Click “Upload a .zip file” and select the “final” file to upload.
- After uploading now click the “Ready to Build” button and the PhoneGap will create necessary package files.
- 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.