how to create interactive realtime graphics dashboards in apps?

Enthusiast ,
Jan 23, 2021 Jan 23, 2021

Copy link to clipboard

Copied

Hi!

Just wanted some advice, because I dont know if XD is the software for this,

i`m learning coding in C# and want to create interactive real time updating dashboards with graphs like circular graphics and bar charts that update with real time data.

Are these kinds of graphics created in code or in software like XD, adobe Animate (SVG, html5) ??

I know the design phase is done in photoshop or illustrator, can be done in XD or adobe animate, but what about when the actual inteface is being constructed, how are the graphics implemented?

Anyone with experience please advise. Thankyou! 

Kindly,

Screenshot_20210123230947.png

TOPICS
Design, How to

Views

220

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Adobe Community Professional , Jan 23, 2021 Jan 23, 2021
Hi Bluefire. These programs are only design tools, and the products are static images,  not dynamic, working apps. You can't type text in fields, have conditional logic etc. You can showcase animations, transitions, micro-interactions such as hover states, overlays. Any graphics created in Xd, Illustrator or Photoshop need to be exported or recreated with code (if possible) later on, within the chosen environment. Language used depends on the environment, in your case it's C#, for web apps it's ...

Likes

translate

Translate

Translate
Adobe Community Professional ,
Jan 23, 2021 Jan 23, 2021

Copy link to clipboard

Copied

Hi Bluefire.


These programs are only design tools, and the products are static images,  not dynamic, working apps. You can't type text in fields, have conditional logic etc. You can showcase animations, transitions, micro-interactions such as hover states, overlays. 

Any graphics created in Xd, Illustrator or Photoshop need to be exported or recreated with code (if possible) later on, within the chosen environment. Language used depends on the environment, in your case it's C#, for web apps it's html/css/javascript, and so on. 

 

If it's for a web app, most boxes, primitive shapes and typography can be recreated with CSS, and animated with javascript. Complicated graphics such as vector icons or images have to be exported in the appropriate format, and then referenced/imported in the code for the application.

 

There are some plugins / tools that try to bridge the gap and make code from your design, but results are rarely good. For the best results you will have to code it manually. Most software, including Xd, shows each layers specs, so it's easier for developers to copy the numbers / variables / colors and quickly recreate the elements for the app.

 

TL; DR: You can draw the interface and test out user flows in Xd, but you will have to recreate everything with code to have a working app, with real-time data and so on.

 

Hope this clears things up. 

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Jan 23, 2021 Jan 23, 2021

Copy link to clipboard

Copied

Thanks Spas that was great feedback, got it.

cheers.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines