Having an excellent UX is critical in today's applications. So, WorkWithPlus provides a wide set of default design systems that can be used to generate applications with amazing UX. These designs can be selected and customized from our Design System Wizard.
However, sometimes you need to create your own design system according to your business requirements. WorkWithPlus has 100% flexibility, so you will be able to create the exact design that you need, or you can import a design created with a designer tool (e.g. Sketch design toolkit or Figma design toolkit).
WorkWithPlus for Native Mobile 15 provides the possibility of integrating with a GeneXus's powerful feature: the Import Design option. In this way, you will be able to use GeneXus feature to import your designs from Sketch or Figma and create the layouts, and WorkWithPlus will automatically generate the WorkWithPlus instance for those layouts.
This new functionality enables the WorkWithPlus community to use the Import Design option from GeneXus, and also take advantage of using WorkWithPlus hierarchical declaration and real-time preview to customize and maintain your layouts. Learn more about WorkWithPlus for Native Mobile IDE here.
Let's explain this feature by following a step-by-step example.
Firstly, we need to import your Sketch or Figma design. So, from the GeneXus toolbar, go to: Tools > Application Integration > Design Import and follow the steps explained here. For this example, we'll use a sample design system that is published by GeneXus here.
Once the importing process is finished, in your KB you will have all the panels and resources automatically created by GeneXus:
If you open one of the generated panels, you'll see that GeneXus has generated the layout based on the imported design. This is a huge advantage as you now have your screens ready to run, but you'll have to use the GeneXus´s abstract layout if you want to customize it. In this layout, it's difficult to imagine how the design will look like at runtime:
In the following steps, we'll use WorkWithPlus feature to automatically create the WorkWithPlus instances, so we can use WorkWithPlus IDE.
To use WorkWithPlus for Native Mobile we must initialize it first. So, from the WorkWithPlus menu, go to WorkWithPlus> for Native Mobile > Design System Wizard. As we want to use our current design (not one of the defaults design systems provided by WorkWithPlus), we'll select the "Skip Design" option.
By selecting this option, WorkWithPlus for Native Mobile will be initialized, but no design system nor template will be imported.
Once WorkWithPlus is initialized, we're ready to create the instances from our current panels. So, for each panel, you should open it, go to the Pattern tab, and you will see the "Create from the current Panel layout" option:
By selecting this option, WorkWithPlus will automatically create the WorkWithPlus instance as follows:
As you can visualize, the WorkWithPlus instance was created, and now you can work with this panel by using the hierarchical declaration and real-time preview.
If you need to modify your instance, you can easily do it from the hierarchical declaration and preview, and taking advantage of the wide set of ready-to-use features that WorkWithPlus provides. Let's see two examples:
We can easily add a confirmation message to the "Add to cart" action just by using the "Confirm" property as follows:
At runtime, the following confirmation message will be triggered:
In this example, we added extra behaviour to our layout just by turning on a WorkWithPlus property.
You can easily modify your layout from the hierarchical declaration and see the results automatically in the real-time preview.
For example, we can add another button next to the "Add to cart" action, as follows:
As you learned though this article, WorkWithPlus for Native Mobile 15 includes a powerful way to integrate with a design system created in Sketch or Figma.
This new functionality can also be applied to convert any panel to WorkWithPlus (even if that panel was not created by using the Import Design option). In this way, you can easily adopt WorkWithPlus in existing KBs where your panels already exists.
|