• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
  • Home
  • Create a VM ($25 Credit)
  • Buy a Domain
  • 1 Month free Back Blaze Backup
  • Other Deals
    • Domain Email
    • Nixstats Server Monitoring
    • ewww.io Auto WordPress Image Resizing and Acceleration
  • About
  • Links

IoT, Code, Security, Server Stuff etc

Views are my own and not my employer's.

Personal Development Blog...

Coding for fun since 1996, Learn by doing and sharing.

Buy a domain name, then create your own server (get $25 free credit)

View all of my posts.

  • Cloud
    • I moved my domain to UpCloud (on the other side of the world) from Vultr (Sydney) and could not be happier with the performance.
    • How to buy a new domain and SSL cert from NameCheap, a Server from Digital Ocean and configure it.
    • Setting up a Vultr VM and configuring it
    • All Cloud Articles
  • Dev
    • I moved my domain to UpCloud (on the other side of the world) from Vultr (Sydney) and could not be happier with the performance.
    • How to setup pooled MySQL connections in Node JS that don’t disconnect
    • NodeJS code to handle App logins via API (using MySQL connection pools (1000 connections) and query parameters)
    • Infographic: So you have an idea for an app
    • All Development Articles
  • MySQL
    • Using the free Adminer GUI for MySQL on your website
    • All MySQL Articles
  • Perf
    • PHP 7 code to send object oriented sanitised input data via bound parameters to a MYSQL database
    • I moved my domain to UpCloud (on the other side of the world) from Vultr (Sydney) and could not be happier with the performance.
    • Measuring VM performance (CPU, Disk, Latency, Concurrent Users etc) on Ubuntu and comparing Vultr, Digital Ocean and UpCloud – Part 1 of 4
    • Speeding up WordPress with the ewww.io ExactDN CDN and Image Compression Plugin
    • Setting up a website to use Cloudflare on a VM hosted on Vultr and Namecheap
    • All Performance Articles
  • Sec
    • Using the Qualys FreeScan Scanner to test your website for online vulnerabilities
    • Using OWASP ZAP GUI to scan your Applications for security issues
    • Setting up the Debian Kali Linux distro to perform penetration testing of your systems
    • Enabling TLS 1.3 SSL on a NGINX Website (Ubuntu 16.04 server) that is using Cloudflare
    • PHP implementation to check a password exposure level with Troy Hunt’s pwnedpasswords API
    • Setting strong SSL cryptographic protocols and ciphers on Ubuntu and NGINX
    • Securing Google G Suite email by setting up SPF, DKIM and DMARC with Cloudflare
    • All Security Articles
  • Server
    • I moved my domain to UpCloud (on the other side of the world) from Vultr (Sydney) and could not be happier with the performance.
    • All Server Articles
  • Ubuntu
    • I moved my domain to UpCloud (on the other side of the world) from Vultr (Sydney) and could not be happier with the performance.
    • Useful Linux Terminal Commands
    • All Ubuntu Articles
  • VM
    • I moved my domain to UpCloud (on the other side of the world) from Vultr (Sydney) and could not be happier with the performance.
    • All VM Articles
  • WordPress
    • Speeding up WordPress with the ewww.io ExactDN CDN and Image Compression Plugin
    • Installing and managing WordPress with WP-CLI from the command line on Ubuntu
    • How to backup WordPress on a host that has CPanel
    • Moving WordPress to a new self managed server away from CPanel
    • Moving a CPanel domain with email to a self managed VPS and Gmail
    • All WordPress Articles
  • All

Quick guide to using Adobe XD CC to design a prototype iOS app.

October 25, 2017 by Simon

Adobe has introduced (v1.0.x) Adobe XD CC, Adobe claims you can turn your best ideas into beautiful experiences — fast. Let’s give it a try.

Adobe Experience Design (Beta) is now Adobe XD CC. You can now design, prototype, and share amazing user experiences for websites, mobile apps, and more — all in the same app. Adobe XD CC is similar to Balsamic Mockup software.

Adobe XD Intro

Here is a great video demoing Adobe XD.

Install Adobe XD

If you don’t already have Adobe CC installed you can download a trial here. If you are wanting to install on Windows you will need Windows 10 (Anniversary Edition). Adobe has minimum system requirements listed here.

Install XD

Start a Project

Create a Project

After you start an iOS project you will be looking for controls to add to your prototype. Adobe XD CC offers where you can download UI Kits direct from vendors (a shame when you are used to XCode or Visual Studio having controls preloaded).

Installing the Apple UI Design Resources

You will need to download the Apple UI Design Resources for Design XD from the Apple site (use the menu in the screenshot below or click here), they do not come with Adobe XD CC.

Apple UI Design Resources

Here is more information on using Adobe XD CC UI Kits.

Download the iOS 11 UI resources for Adobe XD CC from the Apple site.

Download resources from Apple site

You can now extract the iOS resource files from Apple for use in Adobe XD projects.  When iOS 12 and Android 9 comes out you can download new UI Kits.

Extract Files

Once you extract the files from the zip file, run the ./iOS-11-AdobeXD/Fonts/San Francisco Pro.pkg file to install iOS 11 font on yoir system.

I could not find a way to install the UI Kits permanently into Adobe XD CC (Searching revealed you need to open templates (as a separate process or open file in Adobe XD (double-click on the file)) and paste elements into your project). This seems clunky.

Install UI Kits

Why use Adobe XD

You can use Adobe XD to prototype interfaces around the common activities, a person may perform while using the apps you are prototyping. You can design an app’s onboarding, intro or user screens before actually developing the app.

http://bundle.greatsimple.io/

http://bundle.greatsimple.io/

http://bundle.greatsimple.io/

https://platforma.ws/ also has an extension for Adobe XD to allow you to get a  prototype fast with ready to go layout elements. I will write a new blog post using https://platforma.ws/ in Adobe XD.

iOS Prototype Project

Let’s create an iOS project. Start a new iPhone 6/7 Project AND open up a UI template file in a second Adobe XD program (e.g ./iOS-11-AdobeXD/UI Elements + Design Templates + Guides/UIElements+DesignTemplates+Guides.xd).

Now you can drag and drop elements from the UI template (from Apple) into an XD CC app prototype project

Prototype Project

TIP: Apple has a great site explaining how you can design and deliver apps (open the Apple Human Interfaces – iOS Design Themes page here). Apple also has assets and guidelines available for marketing your apps here.

To make buttons interactive you will need to click the Prototype tab and then drag the blue tabs to the right of interactive elements to the target screens.

Make Interactive

You can learn more on making interactive prototypes here.

Tip: Don’t forget to add interactive links back to the home screen.

You can then press the play button to preview the app prototype simulated in software.

Simulate

Export

You can now save and export your prototype app project to PNG, PDF, Web or other formats to others to send for review.

Export

Adobe XD is big on saving to the Adobe Cloud allowing others to see changes in real-time.  If you have linked assets in your prototype project (say Photoshop files) anyone viewing an XD prototype on the Adobe Cloud can automatically see changes in real-time (see then Adobe XD intro video above).

Running Prototypes on Real Devices

I was able to install Adobe XD app onto iOS, log in with my Adobe ID and the prototype popped up when I connected my iOS device to my Mac. More info here.

I was able to install the Android Adobe XD app and also sync a prototype app (Android was a bit slower to find the project but still the same process as iOS).

Android

More Help

Adobe XD CC Official User Guide

https://helpx.adobe.com/xd/user-guide.html

30 Adobe XD CC/Adobe Comp tablet app tips

Conclusion

Pros

  • Adobe XD comes with Adobe CC.
  • Ope to feature enhancements.
  • Loads or 3rd party tools and user forums.
  • Automatic detection of duplicate actions (copy and paste grid items) and suggestion of repeating grids by pressing Command+R.

Cons

  • Unable to import UI Kits permanently into Adobe XD (I have to run multiple XD apps and paste UI elements between). Why would I no just stick with Adobe Photoshop?
  • Placement of UI elements like fonts feels clunky when compared to XCode and Visual Studio.
  • Duplicating prototype forms was not an option in the right-click (copy and Paste worked and so did ALT+Drag).

On the positive side, Adobe is openly allowing people to suggest and vote on features here https://adobexd.uservoice.com

But with Adobe XD you have the flexibility of having a design and prototyping product in one package with new monthly features.

More to come.

Donate and make this blog better

Ask a question or recommend an article

[contact-form-7 id=”30″ title=”Ask a Question”]

Revision History

v1.2 added https://platforma.ws/ information.

etc

Short: https://fearby.com/go2/prototype/

Filed Under: Advice, Android, App, Design, Development, Feedback, Marketing, mobile app, Planning, Software, UI, UX Tagged With: Adobe X CC, Android, design, iOS, prototype app

Advertisement:

Copyright © Fearby.com - Do not copy or duplicate (that means you laptrinhx.com)

Primary Sidebar

Poll

What would you like to see more posts about?
Results

Support this Blog

Create your own server today (support me by using these links

Create your own server on UpCloud here ($25 free credit).

Create your own server on Vultr here.

Create your own server on Digital Ocean here ($10 free credit).

Remember you can install the Runcloud server management dashboard here if you need DevOps help.

Advertisement:

Tags

2FA (9) Advice (17) Analytics (9) App (9) Apple (10) AWS (9) Backup (21) Business (8) CDN (8) Cloud (49) Cloudflare (8) Code (8) Development (26) Digital Ocean (13) DNS (11) Domain (27) Firewall (12) Git (7) Hosting (18) HTTPS (6) IoT (9) LetsEncrypt (7) Linux (20) Marketing (11) MySQL (24) NGINX (11) NodeJS (11) OS (10) PHP (13) Scalability (12) Scalable (14) Security (44) SEO (7) Server (26) Software (7) SSH (7) ssl (17) Tech Advice (9) Ubuntu (39) Uncategorized (23) UpCloud (12) VM (44) Vultr (24) Website (14) Wordpress (25)

Disclaimer

Terms And Conditions Of Use All content provided on this "www.fearby.com" blog is for informational purposes only. Views are his own and not his employers. The owner of this blog makes no representations as to the accuracy or completeness of any information on this site or found by following any link on this site. Never make changes to a live site without backing it up first.

Advertisement:

Footer

Popular

  • Backing up your computer automatically with BackBlaze software (no data limit)
  • How to back up an iPhone (including photos and videos) multiple ways
  • Add two factor auth login protection to WordPress with YubiCo hardware YubiKeys and or 2FA Authenticator App
  • Setup two factor authenticator protection at login on Ubuntu or Debian
  • Using the Yubico YubiKey NEO hardware-based two-factor authentication device to improve authentication and logins to OSX and software
  • I moved my domain to UpCloud (on the other side of the world) from Vultr (Sydney) and could not be happier with the performance.
  • Monitor server performance with NixStats and receive alerts by SMS, Push, Email, Telegram etc
  • Speeding up WordPress with the ewww.io ExactDN CDN and Image Compression Plugin
  • Add Google AdWords to your WordPress blog

Security

  • Check the compatibility of your WordPress theme and plugin code with PHP Compatibility Checker
  • Add two factor auth login protection to WordPress with YubiCo hardware YubiKeys and or 2FA Authenticator App
  • Setup two factor authenticator protection at login on Ubuntu or Debian
  • Using the Yubico YubiKey NEO hardware-based two-factor authentication device to improve authentication and logins to OSX and software
  • Setting up DNSSEC on a Namecheap domain hosted on UpCloud using CloudFlare
  • Set up Feature-Policy, Referrer-Policy and Content Security Policy headers in Nginx
  • Securing Google G Suite email by setting up SPF, DKIM and DMARC with Cloudflare
  • Enabling TLS 1.3 SSL on a NGINX Website (Ubuntu 16.04 server) that is using Cloudflare
  • Using the Qualys FreeScan Scanner to test your website for online vulnerabilities
  • Beyond SSL with Content Security Policy, Public Key Pinning etc
  • Upgraded to Wordfence Premium to get real-time login defence, malware scanner and two-factor authentication for WordPress logins
  • Run an Ubuntu VM system audit with Lynis
  • Securing Ubuntu in the cloud
  • No matter what server-provider you are using I strongly recommend you have a hot spare ready on a different provider

Code

  • How to code PHP on your localhost and deploy to the cloud via SFTP with PHPStorm by Jet Brains
  • Useful Java FX Code I use in a project using IntelliJ IDEA and jdk1.8.0_161.jdk
  • No matter what server-provider you are using I strongly recommend you have a hot spare ready on a different provider
  • How to setup PHP FPM on demand child workers in PHP 7.x to increase website traffic
  • Installing Android Studio 3 and creating your first Kotlin Android App
  • PHP 7 code to send object oriented sanitised input data via bound parameters to a MYSQL database
  • How to use Sublime Text editor locally to edit code files on a remote server via SSH
  • Creating your first Java FX app and using the Gluon Scene Builder in the IntelliJ IDEA IDE
  • Deploying nodejs apps in the background and monitoring them with PM2 from keymetrics.io

Tech

  • Backing up your computer automatically with BackBlaze software (no data limit)
  • How to back up an iPhone (including photos and videos) multiple ways
  • US v Huawei: The battle for 5G
  • Check the compatibility of your WordPress theme and plugin code with PHP Compatibility Checker
  • Is OSX Mojave on a 2014 MacBook Pro slower or faster than High Sierra
  • Telstra promised Fibre to the house (FTTP) when I had FTTN and this is what happened..
  • The case of the overheating Mac Book Pro and Occam’s Razor
  • Useful Linux Terminal Commands
  • Useful OSX Terminal Commands
  • Useful Linux Terminal Commands
  • What is the difference between 2D, 3D, 360 Video, AR, AR2D, AR3D, MR, VR and HR?
  • Application scalability on a budget (my journey)
  • Monitor server performance with NixStats and receive alerts by SMS, Push, Email, Telegram etc
  • Why I will never buy a new Apple Laptop until they fix the hardware cooling issues.

Wordpress

  • Replacing Google Analytics with Piwik/Matomo for a locally hosted privacy focused open source analytics solution
  • Setting web push notifications in WordPress with OneSignal
  • Telstra promised Fibre to the house (FTTP) when I had FTTN and this is what happened..
  • Check the compatibility of your WordPress theme and plugin code with PHP Compatibility Checker
  • Add two factor auth login protection to WordPress with YubiCo hardware YubiKeys and or 2FA Authenticator App
  • Monitor server performance with NixStats and receive alerts by SMS, Push, Email, Telegram etc
  • Upgraded to Wordfence Premium to get real-time login defence, malware scanner and two-factor authentication for WordPress logins
  • Wordfence Security Plugin for WordPress
  • Speeding up WordPress with the ewww.io ExactDN CDN and Image Compression Plugin
  • Installing and managing WordPress with WP-CLI from the command line on Ubuntu
  • Moving WordPress to a new self managed server away from CPanel
  • Moving WordPress to a new self managed server away from CPanel

General

  • Backing up your computer automatically with BackBlaze software (no data limit)
  • How to back up an iPhone (including photos and videos) multiple ways
  • US v Huawei: The battle for 5G
  • Using the WinSCP Client on Windows to transfer files to and from a Linux server over SFTP
  • Connecting to a server via SSH with Putty
  • Setting web push notifications in WordPress with OneSignal
  • Infographic: So you have an idea for an app
  • Restoring lost files on a Windows FAT, FAT32, NTFS or Linux EXT, Linux XFS volume with iRecover from diydatarecovery.nl
  • Building faster web apps with google tools and exceed user expectations
  • Why I will never buy a new Apple Laptop until they fix the hardware cooling issues.
  • Telstra promised Fibre to the house (FTTP) when I had FTTN and this is what happened..

Copyright © 2023 · News Pro on Genesis Framework · WordPress · Log in

Some ads on this site use cookies. You can opt-out if of local analytics tracking by scrolling to the bottom of the front page or any article and clicking "You are not opted out. Click here to opt out.". Accept Reject Read More
GDPR, Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SAVE & ACCEPT