I am new to both Mobile App Development and Sketch and I am having a hard time understanding how Sketch can be used in developing a mobile application.
I am looking into React-Native to develop an application, but from my understanding, the only way you can style elements in React is through a css file and I don't see how I can use Sketch to design my app.
Am I totally missing something or is it possible to develop an application in React-Native and use Sketch to design the elements in the app?
Thanks!
There're several tools that focus on the conversion from the design file into the mobile app.
Supernova - sketch to react native & native app
BuilderX - sketch to react/react native
XD to flutter - you can import sketch into XD and convert into flutter App
pxCode - the solution we have developed, turn the sketch into react/react native
This area is relatively new because the design file is not well-structured in terms of the code. So that's why the mapping is so hard and the code quality is not easy to keep.
That's why after quite a few iterations and analsysi, we find the key structure should leave for the frontend engineers' experience and professional to solve instead of automating the task
Sketch is a design tool just like Photoshop or illustrator. But its is far better then both the tools for multiple reason
It creates design which only code possible. Where Photoshop is originally created for photo editing, many of the effects which you could create there can't be created by codes.
It is very simple have tools which are only required for UI design. No brush tool, Smudge tool etc.
Vector based tool you can export any asset as svg or copy the codes.
You can also copy the styling as CSS and use. No style document required.
You can prototype a interactive model ad test it before you code. This is the biggest advantage, you can actually test the application before you invest time on coding it.
Open file format. Many third party tool can read the sketch file and you can extend you design to the next level. For example you can upload the prototype in InVision and share the design as a cloud link
These are some of the reason why you should chose sketch. But otherwise it is just another design tool. It can't create the functional app for you.
Related
I have a hybrid mobile app.
The framework is vanilla Javascript (i.e. no React, Angular, Vue, etc..).
The GUI work as expected (i.e. the buttons trigger the correct functionality) but the UI is lucking.
I have a UX / UI design in place, in form of an idea and example sketches, but not in any framework (e.g. no Figma files).
I use Bootstrap inconsistently in the app, for some of the buttons and found about Material Design Bootstrap.
I see many blogs about UI design and design tools, such as Figma, Sketch, Adobe XD, etc.
In my case, I already have the UX/UI design results. (although just conceptually - not in any files).
So I'm looking for UI implementation (not design) tools / packages / approaches.
What is the best way to implement the UI?
Could I just start implementing bits and pieces of the UI?
Or should I use a specific framework/platform/mockup ?
Thanks
i would advice you implement the ui in bits as you would have better understanding about the code running your ui and how to easily connect the gui to functionality. tools like figma have features that can convert designs to html/css code buut that would require having to work on design files.
I'm planning to code a smart home application for touch sensitive windows 10 tab (already I have) which can hang in wall.
I need:
Weather API data viewer, Alarm manager, Scheduled music player for morning and evening, Google calendar synced event viewer, Arduino sensor reading (home temp and humidity) .
I tried and designed a interface using C# and WPF. But my goal couldn't reached due to sorted issues below. [See attached image.]
C# - Not enough support for UI. No transparent/ no curve buttons /etc.
WPF - Less supportive for some extension and discontinued product.
ASP.Net - Less knowledge and I believe mp3 player and other extra sensor readings will not success through this.
So I need to know is there any specific softwares for designing Windows os smart home applications. Please help on this.
Try Flutter or Electron.
Flutter was designed by google it is opensource and runs on all operating systems.
I think it uses dart as a main language.
Electron on the other hand uses mostly HTML, CSS and Javascript. But it should be easier to design the user interfaces. For example Discord and VS Code were built using Electron.
I want to print the current UI of a Xamarin.Forms cross-platform application. Are there any plugins or libraries available which support both android ios and uwp projects to do this? I'd really appreciate being pointed in the right direction to get started on implementing this kind of feature in my application.
I would approach this in two steps. Firstly you need to convert the current visuals into a printable file type. So assuming we are working with primarily mobile devices then we should make use of the 'screenshot' mechanisms.
There is a very good answer to another stack overflow account HERE that guides you through setting up screenshots in xamarin forms using dependancy injection. The chaps answer is straight forward and easy to follow.
Once you have that screenshot as a png or jpeg etc. It's time to print it. There are a lot of threads on xamarins developer forums dedicated to the issues around printing from xamarin, a collection of these can be found HERE.
So to start with it's worth mentioning that every platform xamarin forms (XF)supports has it's own mechanism for printing. XF does not provide any abstractions for printing in a cross-platform manner. You will need to write printing logic for each layer and expose it to XF using DependencyServices.
Android Printing - this is a link to printing in android.
iOS Printing - this is a link to printing in iOS (Heres a sample app to help you as well.)
As I previously mentioned, because xamarin hasn't created a simple cross-platform mechanism for this in Forms, it's not quite as simple as you'd think and does require some work to implement. But none of the work is overly complicated, it uses standard dependancy patterns, it's really just the bulk of code required that can seem a bit daunting.
We're looking at creating an interactive prototype for an app with the following specs:
1) embedded videos
2) very good analytics
3) multiple screens
We're looking to optimize for time and I've been considering the following options with the following cons:
1) Framerjs - Con: no good or easy analytics
2) Invision - Con: no way to embed videos (there's the option of embedding a link to a hosted video, but that would take away from the user experience that's critical for our interactive model
2) Xcode Storyboard - Con: first, we haven't settled on building this as a native app, and concerned with complexity (time consumption) particulary with the test flight deployment process.
I'm interested to hear you alls thoughts on this.
I advise you to try the new Facebook Origami Studio (Quartz Composer). Video embedding works fine. Quickly put together a prototype, run it on your iPhone or iPad, iterate on it, and export code snippets your engineers can use.
https://facebook.github.io/origami/
Excuse a non-developer being forced to develop applications instead of administrating networks like I'm used to. This is a horrible post in many ways.
I'm developing an application which has reached the point of needing a GUI. However, I haven't done any GUI development ever before, so I feel the need to ask for help on this.
The application is your standard data collecting/management app, with all common widgets and stuff that every application is using. The problem is that I need the application to be able to display websites using an external browser of some sort, to pass a captcha on the site the application works against. The website guys haven't given me permission to circumvent the captcha in any way.
I know of GTK, QT, Tcl/Tk etc. None of these frameworks have struck me as easy to use. To be honest, I'd like to design the interface using drag-and-drop like I used to do in VB6 when I was a kid, although I get chills thinking about writing this thing in Basic.
I was thinking about Adobe Air, and to design the application in Flash/ActionScript. From what I've learned about Air, I should be able to do everything I want to do. And I do believe it has built in sqlite, right? Would it be considered more "simple" to develop the actual GUI using Flash than using one of the traditional frameworks? What pitfalls am I facing?
A few guidelines:
It only needs to run on Windows
I need to be able to work against a database. Currently using SQLite3.
Some sort of browser integration is crucial. A browser window of some sort needs to open up inside my interface, be directed by the application, and the application needs to be able to read some data from the site that is being used.
Any help with this would be great. This is a clear case where I have to rely on the experience of others to complete the project at all. I'm happy to provide more information if you need that to make a suggestion.
You can always try Titanium Framework, it was aquired by Appcelerator nor so much ago. http://www.appcelerator.com/
It actually puts a webkit browser in a window, so if you can design HTML and CSS you can use this framework.