I am beginner level user for adobe xd. I have to do prototype using adobe xd. can i use adobe xd for these type of requirement. I have basic idea bout layout design and navigation. please check the attached image
in this screen user can add row to grid. after user can enter product name and amount and save. Total amount should update.
You can make the design of it, in XD. And maybe animate it.
But you can't make it function that way
Adobe XD is a prototyping tool, it has been designed for producing the designs of websites and app before passing it to a developer that will "manually" build the HTML/CSS/JS out of it.
Update: But, You can try "animaapp" for getting your design code (HTML, CSS).
Related
My clients have their home grown style sheets for buttons, labels, alerts etc for consistent look across their applications.
Now if I want to create high fidelity mockups for client review, is there a way to generate mockups using the styles sheet they have?
Any tools like Adobe / Sketch can do the same?
Appreciate your feedback.
Figma is a great tool which helps us to build a master template of certain UI component and use it across the prototype wherever it's needed. Similarly, you can use Adobe XD and Sketch which also have similar kind of features also.
Currently I am trying to build such customization of product in Bigcommerce Storefront that allows to display image with dynamic text, which was entered in Textbox. That means product image preview should be shown INSTANTLY with new image with written text.
so that the end user will know how the final product will looks like and also same image should go in shopping cart as well.
I know that there is an app on Shopify named as Product Builder.
Is this possible to do it on Bigcommerce?
Thanks in Advance
It's definitely possible with some fairly advanced client-side code. Unfortunately I don't know of any plug and play systems or apps for Bigcommerce that will achieve what you're looking for, but there are a couple ways to get a live updating product preview if you're willing to get your hands dirty.
Here's an example from my site. Click the button under "personalize this item", and you'll see a live preview image like you describe in the modal. Enter some text and change the monogram style and color, the preview image should update pretty quickly every time you change an option. A solution exactly like mine may not be feasible for you, since that site is using a pretty complex React/Redux implementation built on an extensively customized Stencil theme... it's far from a turnkey solution. That said, you could implement something similar without needing a totally custom app.
The image preview itself in the example above is powered by IMGIX.com. They offer a great service at a fantastic price. Basically my system translates the user-selected Bigcommerce option into a URL string per IMGIX's URL-based API. Displaying the live preview is then as simple as changing the image's src attribute to the corresponding IMGIX URL on every input change. I do this in a React component that consumes a Redux store, but something similar could definitely be done in the framework of your choice, or plain old vanilla JavaScript. Cloudinary offers a similar (maybe even a little bigger) feature set to IMGIX, but I found IMGIX to be a bit faster, and the pricing was considerably less for my usage.
You could also write something that uses the HTML5 canvas to overlay text and effects on an image, and thereby avoid using a third-party service. I found such a solution to be way more work and way more taxing on the client-side device, but it'd definitely be another way to skin the proverbial cat.
There may be other viable solutions out there, but the above has been my experience in implementing something similar to what you're looking for on Bigcommerce. I hope this is helpful!
I creating my first appcelerator app and looking for some info on whether something is possible, and if so is it easy to implement.
I'm using Titanium SDK 2.0.1.
I'm trying to create a layout similar to the Stream window in the Google+ app for Android:
1: A large header (Can the navbar property of Ti.UI.createWindow be adjusted?)
2: Two tabs under the header (Would like to be able to adjust height of them if possible? Are there alternatives to Ti.UI.createTabGroup if this is not possible?)
The main content I can figure out easily enough I reckon.
Any examples or links on how to achieve this layout would be great.
Thanks
There is no way to do that type of NavBar in Android using the native Ti.UI.Window properties, but you can just create your own NavBar using a view and stick to the top of the window. For the tabs, I'd look at http://www.tomaspersson.com/2012/03/20/titanium-viewpager-module-now-available/ - I'm not sure it will have all the options you need, but it is a good starting point. Good luck!
I am trying to create a view which shows similar the way of Safari's "Show Top Sites" option. I have bunch of images to be displayed in that gallery view. Any idea or suggestion to create this in my cocoa application. Thanks in advance.
You'll want to look into Quartz Composer. Here's the programming guide. A composition would do most of the heavy lifting, getting the images from your application. It's a broad topic, so a specific answer would be more like a longish tutorial. It might be best to break this question down into smaller ones once you're familiar with Quartz Composer.
There are a few communities out there that focus on the topic as well.
I want to create an simple UI-editor that can be used within the browser. It basically should have a UI-control palette and a canvas to layout and modify the controls. The resulting user-created UI model should be stored in some kind of backend and comply to an (abstract) UI description language (e.g. XForms). The UI-model should be downloadable as file (e.g. XForms document). A visual in-browser XForms-designer is probably a good example of what I want to achieve. The UI-editor should be usable cross browser.
Please keep in mind that i mentioned XForms only as an example. I don't want to rely on the browsers capabilities wrt. my target model. The target model (e.g. XForms) should only be used as storage format. The cross browser rendering of the desgin-time UIs in the editor should be ensured by the toolkit/framework.
Possible canditates are probably:
GWT
Adobe Flex 3
Eclipse RAP
The UI-editor will not be used in production. My focus lies on a rapid development of the editor.
The extjs JavaScript library is good for implementing GUIs in JavaScript. It can also be used with Adobe AIR or Google Gears for creating offline applications, and works well with different browsers.
Here is an example of a GUI editor for extjs: http://tof2k.com/ext/formbuilder/