Design Studio: Difference between revisions
(36 intermediate revisions by 4 users not shown) | |||
Line 3: | Line 3: | ||
! colspan="6" | Table of Contents | ! colspan="6" | Table of Contents | ||
|- | |- | ||
| [https://wiki.xamun.com/wiki/Main_Page Getting Started] || [https://wiki.xamun.com/wiki/Ideation_Studio Ideation Studio] || [https://wiki.xamun.com/wiki/Design_Studio Design Studio] || [https://wiki.xamun.com/wiki/ | | [https://wiki.xamun.com/wiki/Main_Page Getting Started] || [https://wiki.xamun.com/wiki/Ideation_Studio Ideation Studio] || [https://wiki.xamun.com/wiki/Design_Studio Design Studio] || [https://wiki.xamun.com/wiki/Build_Studio Build Studio] || [https://wiki.xamun.com/wiki/Frequently_Asked_Questions FAQs] | ||
|} | |} | ||
<div style="border: 2px solid black; padding: 20px; text-align: justify;"> | <div style="border: 2px solid black; padding: 20px; text-align: justify;"> | ||
'''Design Studio''' | '''Design Studio''' | ||
---- | ---- | ||
===Introduction=== | |||
Design Studio enables users to select and configure the modules and pages that best align with their project’s needs. Users can use Figma to develop layouts by exporting the sample pages provided for each module, or import their own customized designs. | |||
Design Studio, which includes Xami, assists users in creating comprehensive user stories with tailored recommendations for different user roles in the project. Once the solution is complete, users can add on features like annual maintenance, VAPT (Vulnerability Assessment and Penetration Testing), and contingency planning to ensure it's secure and comprehensive. For a scalable and reliable infrastructure, an additional option of cloud hosting is available. | |||
Users can make the most of Design Studio’s features to develop a comprehensive, customized solution that satisfies the demands of their project. | |||
<center>{{#ev:youtube|PC0LxwvDf8Y}}</center> | <center>{{#ev:youtube|PC0LxwvDf8Y}}</center> | ||
<br> | |||
''Updated on: 09/16/2024'' | |||
</div> | </div> | ||
<br> | <br> | ||
Line 20: | Line 28: | ||
===Navigate the Project Hub=== | ===Navigate the Project Hub=== | ||
The Project Hub serves as the central place for managing and monitoring your projects and accessing the essential tools and resources required. Follow these steps to navigate it. | |||
1. After signing in, the Project Hub is your landing page. Alternatively, access it from the dropdown next to your registered email. | |||
2. Click '''‘Project Hub’''' to be directed to the page. | |||
[[File:Project hub.png|center|750px|link=https://wiki.xamun.com/wiki/File:Project_hub.png]] <span style="padding-left: 100px;"> | |||
3. Click on the '''‘Get Started’''' button to begin the process of creating your Xamun AI Solution. | |||
4. Choose one of the following options: | |||
:○ '''Walkthrough:''' Get detailed instructions on creating your project. | |||
:○ '''Create First Project Using Xamy:''' Begin creating your project with Xamy's assistance. | |||
[[File:Project hub get started.png|center|750px|link=https://wiki.xamun.com/wiki/File:Project_hub_get_started.png]] <span style="padding-left: 100px;"> | |||
5. In the Project Hub, all projects you are involved in are displayed. | |||
6. Each project is presented as a card with key details such as the project name, estimated cost, platform version, and current state, among others. | |||
[[File:Project hub card.png|center|750px|link=https://wiki.xamun.com/wiki/File:Project_hub_card.png]] <span style="padding-left: 100px;"> | |||
7. Use the navigation bar to search for a specific project. | |||
8. Browse through the sections based on the project's current state such as: Draft, Prepared, Contracting, Build, Unpaid, Shared, Closed, and Archived. | |||
[[File:Project hub navigation.png|center|750px|link=https://wiki.xamun.com/wiki/File:Project_hub_navigation.png]] <span style="padding-left: 100px;"> | |||
'''Reference Material''' | |||
{| style="width: 100%;" class="wikitable mw-collapsible" | |||
! style="border: 2px solid black;" |Feature | |||
! style="border: 2px solid black;" |Description | |||
|- | |||
| style="border: 2px solid black; background-color: #f2f2f2;" | Show All || style="border: 2px solid black; background-color: white;" | • Displays all active projects. | |||
|- | |||
| style="border: 2px solid black; background-color: #f2f2f2;" | Draft || style="border: 2px solid black; background-color: white;" | • If project is incomplete and still in progress. | |||
|- | |||
| style="border: 2px solid black; background-color: #f2f2f2;" | Prepared || style="border: 2px solid black; background-color: white;" | • If project is ready for a proposal request. | |||
|- | |||
| style="border: 2px solid black; background-color: #f2f2f2;" | Contracting || style="border: 2px solid black; background-color: white;" | • If project’s proposal is in negotiation or agreed upon. | |||
|- | |||
| style="border: 2px solid black; background-color: #f2f2f2;" | Build || style="border: 2px solid black; background-color: white;" | • If project is in the development phase. | |||
|- | |||
| style="border: 2px solid black; background-color: #f2f2f2;" | Unpaid || style="border: 2px solid black; background-color: white;" | • If project’s payment is pending. | |||
|- | |||
| style="border: 2px solid black; background-color: #f2f2f2;" | Shared || style="border: 2px solid black; background-color: white;" | • If project is shared for collaboration. | |||
|- | |||
| style="border: 2px solid black; background-color: #f2f2f2;" | Closed || style="border: 2px solid black; background-color: white;" | • If project activities are finalized. | |||
|- | |||
| style="border: 2px solid black; background-color: #f2f2f2;" | Archived || style="border: 2px solid black; background-color: white;" | • If project is inactive and stored for future reference. | |||
|} | |||
''Updated on: 09/16/2024'' | |||
===Managing Projects=== | ===Managing Projects=== | ||
This involves overseeing and managing the project’s progress and utilizing available tools in the Project Hub. Follow these steps to manage your projects. | |||
1. Depending on the project's current state, different buttons will appear at the bottom of the project card. | |||
[[File:Project card button.png|center|750px|link=https://wiki.xamun.com/wiki/File:Project_card_button.png]] <span style="padding-left: 100px;"> | |||
2. For help desk support, click the message icon. | |||
3. Enter your Discord username and click the '''‘Join’''' button to send your request. | |||
''Note: After joining, click the icon again to access the channel related to your project.'' | |||
[[File:Help desk for project.png|center|750px|link=https://wiki.xamun.com/wiki/File:Help_desk_for_project.png]] <span style="padding-left: 100px;"> | |||
4. Click the '''‘%’''' icon to access the Project Backlog. | |||
[[File:Access project backlog.png|center|750px|link=https://wiki.xamun.com/wiki/File:Access_project_backlog.png]] <span style="padding-left: 100px;"> | |||
5. Click the calendar icon to arrange a consultation with the Xamun Team to discuss your app requirements in detail. | |||
[[File:Consult with xamun team.png|center|750px|link=https://wiki.xamun.com/wiki/File:Consult_with_xamun_team.png]] <span style="padding-left: 100px;"> | |||
6. To archive a project, click on the three-dot menu in the top right corner of the project card. | |||
7. Select '''‘Archive’''' to move the project to the Archived section. | |||
[[File:Archive project.png|center|750px|link=https://wiki.xamun.com/wiki/File:Archive_project.png]] <span style="padding-left: 100px;"> | |||
8. To unarchive a project, go to '''‘Archived’''' section. | |||
9. Click '''‘Unarchived Solution’''' to restore the project. | |||
[[File:Unarchive project.png|center|750px|link=https://wiki.xamun.com/wiki/File:Unarchive_project.png]] <span style="padding-left: 100px;"> | |||
10. To start a new project, click the '''‘+ Create Project’''' button. | |||
[[File:Create new project.png|center|750px|link=https://wiki.xamun.com/wiki/File:Create_new_project.png]] <span style="padding-left: 100px;"> | |||
'''Reference Material''' | |||
{| style="width: 100%;" class="wikitable mw-collapsible" | |||
! style="border: 2px solid black;" |Feature | |||
! style="border: 2px solid black;" |Description | |||
|- | |||
| style="border: 2px solid black; background-color: #f2f2f2;" | Join || style="border: 2px solid black; background-color: white;" | • Will direct to the Xamun’s Helpdesk Discord. | |||
|- | |||
| style="border: 2px solid black; background-color: #f2f2f2;" | + Create Project || style="border: 2px solid black; background-color: white;" | • Will direct to Xami. | |||
|} | |||
''Updated on: 09/16/2024'' | |||
===Adding Project versions=== | ===Adding Project versions=== | ||
< | Adding project versions allows you to request and manage edits to a project's prior version in the build state, ensuring any requested changes are reviewed and approved before implementation in the Design Studio. Follow these steps to add project versions. | ||
</ | |||
< | 1. From the Project Hub, select the project you wish to request a new version. | ||
[[File:Choose project.png|center|750px|link=https://wiki.xamun.com/wiki/File:Choose_project.png]] <span style="padding-left: 100px;"> | |||
2. Click on '''‘Devs Tool.’''' | |||
3. Choose '''‘Versioning.’''' | |||
[[File:Adding project version.png|center|750px|link=https://wiki.xamun.com/wiki/File:Adding_project_version.png]] <span style="padding-left: 100px;"> | |||
4. Provide a reason for the version request. | |||
5. Click '''‘Request New Version.’''' | |||
[[File:Request new version.png|center|750px|link=https://wiki.xamun.com/wiki/File:Request_new_version.png]] <span style="padding-left: 100px;"> | |||
6. To check the status of your request, click '''‘Devs Tool.’''' | |||
7. Select '''‘Versioning’''' again. | |||
[[File:Checking version request pending.png|center|750px|link=https://wiki.xamun.com/wiki/File:Checking_version_request_pending.png]] <span style="padding-left: 100px;"> | |||
8. If needed, you can cancel the request to modify the reason. | |||
[[File:Cancel version request.png|center|750px|link=https://wiki.xamun.com/wiki/File:Cancel_version_request.png]] <span style="padding-left: 100px;"> | |||
9. To verify if the version has been approved, click the '''‘Devs Tool.’''' | |||
10. Select '''‘Versioning’''' once more. | |||
[[File:Checking version request approved.png|center|750px|link=https://wiki.xamun.com/wiki/File:Checking_version_request_approved.png]] <span style="padding-left: 100px;"> | |||
11. Once approved, click '''‘Edit New Version’''' to make changes to the project. | |||
[[File:Edit new version.png|center|750px|link=https://wiki.xamun.com/wiki/File:Edit_new_version.png]] <span style="padding-left: 100px;"> | |||
'''Reference Material''' | |||
{| style="width: 100%;" class="wikitable mw-collapsible" | |||
! style="border: 2px solid black;" |Feature | |||
! style="border: 2px solid black;" |Description | |||
|- | |||
| style="border: 2px solid black; background-color: #f2f2f2;" | Reason || style="border: 2px solid black; background-color: white;" | • Input here the reason for your project’s version request. | |||
|- | |||
| style="border: 2px solid black; background-color: #f2f2f2;" | Request New Version || style="border: 2px solid black; background-color: white;" | • Will send the project’s version request to the Xamun Team. | |||
|- | |||
| style="border: 2px solid black; background-color: #f2f2f2;" | Edit New Version || style="border: 2px solid black; background-color: white;" | • If clicked, you can now edit your project in the Design Studio. | |||
|} | |||
''Updated on: 09/16/2024'' | |||
==Build Application== | ==Build Application== | ||
Line 83: | Line 247: | ||
==Module Configuration== | ==Module Configuration== | ||
===Navigate Customize Module Selection=== | ===Navigate Customize Module Selection=== | ||
This is the second step in creating a project. | This is the second step in creating a project. It contains the List of Modules, Page Preview, Module Description, and Solution Information. | ||
In this step, the user can modify or add modules based on the selected Solution to fit the business needs or requirements. | In this step, the user can modify or add modules based on the selected Solution to fit the business needs or requirements. | ||
By starting to enter Project Name, Select its Platform, and Short Description for your Project. | By starting to enter Project Name, Select its Platform, and Short Description for your Project. | ||
[[File: | [[File:Project Details.png|center|750px|link=https://wiki.xamun.com/wiki/File:Project_Details.png]] <span style="padding-left: 100px;"></span> | ||
''' | ===Step-by-Step Guide to Navigating the Xamun Module Page=== | ||
1. '''Select and Configure Modules:''' Review the '''Selected Modules/Pages''' section on the left side. Here, you can: | |||
:○ '''Expand or Collapse Modules''' by clicking the arrow beside each module name. | |||
:○ '''Preview Pages''' by clicking on the page name, which will be displayed on the right. | |||
:○ '''Toggle Pages On/Off''' by using the switch next to the page name. | |||
:○ '''Access Module Settings''' via the gear icon to add new pages from the library or create a blank page. | |||
2. '''Add New Modules:''' | |||
:○ Click the '''Add (+) Button''' to open a popup that allows you to add a new module from the library or a blank module. | |||
3. '''Search for Additional Modules:''' | |||
:○ Use the '''Search Bar''' in the "Available Modules/Pages" section to find specific modules or pages. | |||
4. '''Toggle Between Views:''' | |||
:○ Use the '''Web/Mobile Toggle''' to switch between viewing the design on a web app or mobile app platform. | |||
[[File:Navigation_of_module_page.png|center|750px|link=https://wiki.xamun.com/wiki/File:Navigation_of_module_page.png]] <span style="padding-left: 100px;"></span> | |||
5. '''Navigate Through Pages:''' | |||
:○ If a module contains multiple pages, use the '''Arrow Navigator''' to move between pages. | |||
6. '''Add/Edit Notes:''' | |||
:○ Click '''Write Note''' or '''Edit Note''' to open the Note popup for adding or editing notes associated with your module configuration. | |||
7. '''Utilize the "Working with Figma" Feature:''' In the upper section of the page, click the '''"Working with Figma"''' button. This feature allows you to: | |||
:○ '''Export Solution:''' Export the current design to Figma for further customization and collaboration. | |||
:○ '''Import Solution:''' Import a Figma design back into Xamun to continue development. | |||
:○ '''Access the Media Library:''' Use this to manage assets such as images, icons, and other media used in your project. | |||
[[File:Page_development.png|center|750px|link=https://wiki.xamun.com/wiki/File:Page_development.png]] <span style="padding-left: 100px;"></span> | |||
8. '''Define Business Rules:''' | |||
:○ Click on the '''"Business Rules"''' tab in the top navigation bar. | |||
:○ Here, you can manage and create User Stories by defining user roles and their interactions within the application. | |||
[[File:Business_rules.png|center|750px|link=https://wiki.xamun.com/wiki/File:Business_rules.png]] <span style="padding-left: 100px;"></span> | |||
9. '''Finalize Your Configuration:''' | |||
:○ After making all necessary changes, proceed to the next step by selecting '''“Finalize Solution”''' tab in the top navigation bar | |||
:○ Here, you can see the '''solution summary''' showcasing the modules included, ability to choose optional add ons, and the total cost and its breakdowns. | |||
[[File: | [[File:Finalize_solution_navigation.png|center|750px|link=https://wiki.xamun.com/wiki/File:Finalize_solution_navigation.png]] <span style="padding-left: 100px;"></span> | ||
'''Reference Material''' | '''Reference Material''' | ||
Line 114: | Line 301: | ||
! style="border: 2px solid black;"| Description | ! style="border: 2px solid black;"| Description | ||
|- | |- | ||
| style="border: 2px solid black; background-color: #f2f2f2;" | | | style="border: 2px solid black; background-color: #f2f2f2;" | Solution Project Name || style="border: 2px solid black; background-color: white;" | • Input here the name of your project. <br> • Required Field | ||
|- | |- | ||
| style="border: 2px solid black; background-color: #f2f2f2;" | | | style="border: 2px solid black; background-color: #f2f2f2;" | Short Description || style="border: 2px solid black; background-color: white;" | • Input here a short description of your project. | ||
|- | |- | ||
| style="border: 2px solid black; background-color: #f2f2f2;" | | | style="border: 2px solid black; background-color: #f2f2f2;" | Choose Platforms || style="border: 2px solid black; background-color: white;" | • Choose the best platform/s appropriate for your project. | ||
|- | |||
| style="border: 2px solid black; background-color: #f2f2f2;" | Proceed || style="border: 2px solid black; background-color: white;" | • If clicked, you can now customized your application's module/s. | |||
|- | |- | ||
| style="border: 2px solid black; background-color: #f2f2f2;" | Arrow Up/Down Icon beside the module || style="border: 2px solid black; background-color: white;" | • If arrow up is clicked, it will list down all the pages of the selected module. <br> • If arrow down is clicked, it will hide all the pages of the selected module. | | style="border: 2px solid black; background-color: #f2f2f2;" | Arrow Up/Down Icon beside the module || style="border: 2px solid black; background-color: white;" | • If arrow up is clicked, it will list down all the pages of the selected module. <br> • If arrow down is clicked, it will hide all the pages of the selected module. | ||
Line 132: | Line 321: | ||
| style="border: 2px solid black; background-color: #f2f2f2;" | Available Modules/Pages || style="border: 2px solid black; background-color: white;" | • If clicked, it will display more modules and pages. | | style="border: 2px solid black; background-color: #f2f2f2;" | Available Modules/Pages || style="border: 2px solid black; background-color: white;" | • If clicked, it will display more modules and pages. | ||
|- | |- | ||
| style="border: 2px solid black; background-color: #f2f2f2;" | Web/Mobile Toggle || style="border: 2px solid black; background-color: white;" | • To switch between viewing the design on a web app or mobile app platform. | |||
| style="border: 2px solid black; background-color: #f2f2f2;" | Web/Mobile Toggle || style="border: 2px solid black; background-color: white;" | • | |||
|- | |- | ||
| style="border: 2px solid black; background-color: #f2f2f2;" | Arrow Navigator (left and right) || style="border: 2px solid black; background-color: white;" | • It will be shown if the selected module has multiple pages. <br> • If left arrow is clicked, it will navigate to the next page. <br> • If right arrow is clicked, it will navigate to the previous page. | | style="border: 2px solid black; background-color: #f2f2f2;" | Arrow Navigator (left and right) || style="border: 2px solid black; background-color: white;" | • It will be shown if the selected module has multiple pages. <br> • If left arrow is clicked, it will navigate to the next page. <br> • If right arrow is clicked, it will navigate to the previous page. | ||
|- | |- | ||
| style="border: 2px solid black; background-color: #f2f2f2;" | Write Note || style="border: 2px solid black; background-color: white;" | • If clicked, it will open the Note popup page | | style="border: 2px solid black; background-color: #f2f2f2;" | Write Note (Pencil icon) || style="border: 2px solid black; background-color: white;" | • If clicked, it will open the Note popup page. | ||
|- | |- | ||
| style="border: 2px solid black; background-color: #f2f2f2;" | Add Page from library || style="border: 2px solid black; background-color: white;" | • If clicked, it will redirect to ADD PAGE. <br> • See PERSONALIZE MODULE section > ADD PAGE VIEW for more details. <br> • Inside Gear Icon (Module Settings). | | style="border: 2px solid black; background-color: #f2f2f2;" | Add Page from library || style="border: 2px solid black; background-color: white;" | • If clicked, it will redirect to ADD PAGE. <br> • See PERSONALIZE MODULE section > ADD PAGE VIEW for more details. <br> • Inside Gear Icon (Module Settings). | ||
|- | |- | ||
| style="border: 2px solid black; background-color: #f2f2f2;" | Add blank page || style="border: 2px solid black; background-color: white;" | • If clicked, the screen will show a blank page. <br> • Inside Gear Icon (Module Settings). | | style="border: 2px solid black; background-color: #f2f2f2;" | Add blank page || style="border: 2px solid black; background-color: white;" | • If clicked, the screen will show a blank page. <br> • Inside Gear Icon (Module Settings). | ||
|- | |||
| style="border: 2px solid black; background-color: #f2f2f2;" | Business Rules || style="border: 2px solid black; background-color: white;" | • You can manage and create User Stories by defining user roles and their interactions within the application. | |||
|- | |||
| style="border: 2px solid black; background-color: #f2f2f2;" | Finalize Solution || style="border: 2px solid black; background-color: white;" | • Allows you to review and confirm all add on configurations. | |||
|} | |} | ||
''Updated on: 09/10/2024'' | |||
==Add Module== | ==Add Module== | ||
Line 162: | Line 346: | ||
1. Click the ‘Add’ icon to add a Module to your project. | 1. Click the ‘Add’ icon to add a Module to your project. | ||
[[File: | [[File:UIandPageDev Landing Page.jpg|center|750px|link=https://wiki.xamun.com/wiki/File:UIandPageDev_Landing_Page.jpg]] | ||
2. Select the ‘Add New Module’ to view the lists of modules you can choose from. | 2. Select the ‘Add New Module’ to view the lists of modules you can choose from. | ||
[[File: | [[File:AddNew Module.png|center|750px|link=https://wiki.xamun.com/wiki/File:AddNew_Module.png]] | ||
3. Tap the ‘'''+'''’ button on the module you would like to add. | 3. Tap the ‘'''+'''’ button on the module you would like to add. | ||
Line 172: | Line 356: | ||
4. Click the ‘proceed’ button once you are satisfied with your selection. | 4. Click the ‘proceed’ button once you are satisfied with your selection. | ||
[[File: | [[File:Add Loan Module.png|center|750px|link=https://wiki.xamun.com/wiki/File:Add_Loan_Module.png]] | ||
5. The new modules will be shown alongside your existing module. | 5. The new modules will be shown alongside your existing module. | ||
[[File: | [[File:Selected New Module.png|center|750px|link=https://wiki.xamun.com/wiki/File:Selected_New_Module.png]] | ||
'''Reference Material''' | '''Reference Material''' | ||
Line 195: | Line 379: | ||
|} | |} | ||
Updated on: | ''Updated on: 09/18/2024'' | ||
===Add Blank Module=== | ===Add Blank Module=== | ||
Line 375: | Line 559: | ||
</div><br> | </div><br> | ||
<div style="border: 2px solid black; padding: 20px; text-align: justify;"> | |||
==Uploading Pages== | |||
===Uploading Pages=== | |||
Uploading Pages enables you to submit an image, which the Xamun Platform will analyze to provide you with the total cost. | |||
1. In the '''Xamun Project Hub''', select a project you want to upload a page. | |||
[[File:Select Project.png|center|750px|link=https://wiki.xamun.com/wiki/File:Select_Project.png]] | |||
2. Click on the '''dropdown''' button beside the Module Name to reveal its pages. | |||
3. Beside the Page Name, click on the '''arrow''' button to display the page in an expanded view on the platform. | |||
4. To upload an image of your page, click on the '''‘Upload Image’''' button to open the form. | |||
[[File:Click Upload Image.png|center|750px|link=https://wiki.xamun.com/wiki/File:Click_Upload_Image.png]] | |||
5. In the ''Upload Image form'', click '''‘Browse’''' to open your file explorer and choose an image to upload. | |||
[[File:Browse Image.png|center|750px|link=https://wiki.xamun.com/wiki/File:Browse_Image.png]] | |||
6. After uploading an image, click the '''‘Analyze’''' button to assign a user story and calculate the total cost for the page. | |||
[[File:Analyze Image.png|center|750px|link=https://wiki.xamun.com/wiki/File:Analyze_Image.png]] | |||
7. After the platform completes its analysis, it will assign a user story and provide the total cost. To proceed, simply click the '''‘Confirm’''' button to successfully upload it to the platform. | |||
[[File:Confirm Upload Image.png|center|750px|link=https://wiki.xamun.com/wiki/File:Confirm_Upload_Image.png]] | |||
'''Reference Material''' | |||
{| class="wikitable mw-collapsible" style="width:100%;" | |||
! style="border: 2px solid black;" | Feature | |||
! style="border: 2px solid black;" | Description | |||
|- | |||
| style="border: 2px solid black; background-color: #f2f2f2;" | Upload Image button || style="border: 2px solid black; background-color: #white;" | • Displays a form for users to upload an image of a page. | |||
|- | |||
| style="border: 2px solid black; background-color: #f2f2f2;" | Browse || style="border: 2px solid black; background-color: #white;" | • Opens the file explorer, allowing users to select and upload an image. | |||
|- | |||
| style="border: 2px solid black; background-color: #f2f2f2;" | Analyze Button || style="border: 2px solid black; background-color: white;" | • Assigns a user story and calculates the total cost. | |||
|- | |||
| style="border: 2px solid black; background-color: #f2f2f2;" | Confirm Button || style="border: 2px solid black; background-color: #white;" | • Finalizes the process by uploading the image to the platform. | |||
|} | |||
<br> | |||
''Updated on: 09/20/2024'' | |||
</div> | |||
<br> | |||
<div style="border: 2px solid black; padding: 20px; text-align: justify;"> | <div style="border: 2px solid black; padding: 20px; text-align: justify;"> | ||
Line 454: | Line 690: | ||
To easily bring your Figma designs into your project, just follow these steps. You'll start by accessing the Figma options and finish by connecting your Figma document to your project. Here's how: | To easily bring your Figma designs into your project, just follow these steps. You'll start by accessing the Figma options and finish by connecting your Figma document to your project. Here's how: | ||
1. Click the ‘Working with Figma’ | 1. Click the '''‘Working with Figma’''' button to see the available Figma options. | ||
2. Select '''‘Import | [[File:Working With Figma Import.png|center|750px|link=https://wiki.xamun.com/wiki/File:Working_With_Figma_Import.png]] <span style="padding-left: 100px;"></span> | ||
[[File: | |||
2. Select '''‘Import Solutions from Figma’''' and the '''‘Import from Figma’''' form will appear on your screen. | |||
[[File:Import Figma.png|center|750px|link=https://wiki.xamun.com/wiki/File:Import_Figma.png]] <span style="padding-left: 100px;"></span> | |||
3. Enter the access token. | 3. Enter the access token. | ||
Line 465: | Line 704: | ||
5. Click the '''‘Connect’''' button to link the Figma document to your project. | 5. Click the '''‘Connect’''' button to link the Figma document to your project. | ||
[[File:Import | [[File:Import Figma AccessToken.jpg|center|750px|link=https://wiki.xamun.com/wiki/File:Import_Figma_AccessToken.jpg]] <span style="padding-left: 100px;"></span> | ||
'''Reference Material''' | '''Reference Material''' | ||
Line 483: | Line 722: | ||
|} | |} | ||
''Updated on: 09/ | ''Updated on: 09/18/2024'' | ||
</div><br> | |||
<div style="border: 2px solid black; padding: 20px; text-align: justify;"> | |||
=== | ==Page Functions== | ||
===Add Functional Details=== | |||
<br> | |||
</div><br> | </div><br> | ||
Line 508: | Line 744: | ||
To add a note to your page, follow these steps to ensure you’re in the correct section and ready to make edits. This process involves selecting the appropriate module, accessing the desired page, and entering your note into the provided form. | To add a note to your page, follow these steps to ensure you’re in the correct section and ready to make edits. This process involves selecting the appropriate module, accessing the desired page, and entering your note into the provided form. | ||
1. Make sure you are in the '''‘UI & Page Development’''' section. <br> | 1. Make sure you are in the '''‘UI & Page Development’''' section. <br> | ||
Line 516: | Line 751: | ||
3. Press the arrow button next to the page you wish to access. | 3. Press the arrow button next to the page you wish to access. | ||
[[File:Add | [[File:Add note part 1.png|center|750px|link=https://wiki.xamun.com/wiki/File:Add_note_part_1.png]] | ||
4. The page will appear on your screen. | 4. The page will appear on your screen. | ||
Line 522: | Line 758: | ||
5. Select the edit button next to your page's name. | 5. Select the edit button next to your page's name. | ||
[[File: | [[File:Tap edit.png|center|750px|link=https://wiki.xamun.com/wiki/File:Tap_edit.png]] | ||
6. The ''''Page Detail'''' form will appear on the right side of your screen. | 6. The ''''Page Detail'''' form will appear on the right side of your screen. | ||
Line 530: | Line 767: | ||
8. Click 'save' to store your input. | 8. Click 'save' to store your input. | ||
[[File: | [[File:Type your note.png|center|750px|link=https://wiki.xamun.com/wiki/File:Type_your_note.png]] | ||
Line 541: | Line 778: | ||
| style="border: 2px solid black; background-color: #f2f2f2;" | Save || style="border: 2px solid black; background-color: #white;" | • Will save the changes made on the page detail. | | style="border: 2px solid black; background-color: #f2f2f2;" | Save || style="border: 2px solid black; background-color: #white;" | • Will save the changes made on the page detail. | ||
|} | |} | ||
<br> | <br> | ||
Line 550: | Line 786: | ||
<div style="border: 2px solid black; padding: 20px; text-align: justify;"> | <div style="border: 2px solid black; padding: 20px; text-align: justify;"> | ||
== | ==Finalize== | ||
=== | ===Solution Summary=== | ||
To complete your project solution with Xamun, follow this guide to review the details of your solution, including cost and platform information. | |||
1. Click the '''‘Finalize Solution’''' tab to ensure you are in the correct section. | |||
2. Tap the checkbox for the options you want to apply to your project. | |||
3. Click the toggle buttons for the cloud hosting services you wish to use. | |||
4. Click the dropdown button for your chosen cloud hosting; your options are ''Small'', ''Medium'', and ''Large''. | |||
5. Select your preferred platform. | |||
6. Your grand total cost will update each time you change your selections. | |||
7. Click the '''‘Request for Proposal’''' button to finalize. | |||
[[File:Finalize solution.png|center|750px|link=https://wiki.xamun.com/wiki/File:Finalize_solution.png]] | |||
: ''Note: If you want to edit another solution, click the ‘Edit Solution’ button.'' | |||
8. A message will display on your screen. | |||
9. Click the '''‘Submit’''' button. | |||
[[File: | [[File:Submit proposal.png|center|750px|link=https://wiki.xamun.com/wiki/File:Submit_proposal.png]] | ||
'''Reference Material''' | '''Reference Material''' | ||
Line 583: | Line 821: | ||
! style="border: 2px solid black;" | Description | ! style="border: 2px solid black;" | Description | ||
|- | |- | ||
| style="border: 2px solid black; background-color: #f2f2f2;" | | | style="border: 2px solid black; background-color: #f2f2f2;" | Checkbox || style="border: 2px solid black; background-color: white;" | • If clicked, the service will be selected. | ||
|- | |- | ||
| style="border: 2px solid black; background-color: #f2f2f2;" | | | style="border: 2px solid black; background-color: #f2f2f2;" | Toggle button || style="border: 2px solid black; background-color: white;" | • If clicked, the cloud hosting will be selected. | ||
|- | |- | ||
| style="border: 2px solid black; background-color: #f2f2f2;" | | | style="border: 2px solid black; background-color: #f2f2f2;" | Request for Proposal || style="border: 2px solid black; background-color: white;" | • Will display the confirmation message. | ||
|- | |- | ||
| style="border: 2px solid black; background-color: #f2f2f2;" | | | style="border: 2px solid black; background-color: #f2f2f2;" | Submit || style="border: 2px solid black; background-color: white;" | • Will send the project to the Xamun Team. | ||
|} | |} | ||
''Updated on: 09/06/2024'' |
Latest revision as of 13:10, 20 September 2024
Table of Contents | |||||
---|---|---|---|---|---|
Getting Started | Ideation Studio | Design Studio | Build Studio | FAQs |
Design Studio
Introduction
Design Studio enables users to select and configure the modules and pages that best align with their project’s needs. Users can use Figma to develop layouts by exporting the sample pages provided for each module, or import their own customized designs.
Design Studio, which includes Xami, assists users in creating comprehensive user stories with tailored recommendations for different user roles in the project. Once the solution is complete, users can add on features like annual maintenance, VAPT (Vulnerability Assessment and Penetration Testing), and contingency planning to ensure it's secure and comprehensive. For a scalable and reliable infrastructure, an additional option of cloud hosting is available.
Users can make the most of Design Studio’s features to develop a comprehensive, customized solution that satisfies the demands of their project.
Updated on: 09/16/2024
Project Hub
The Project Hub serves as the central place for managing and monitoring your projects and accessing the essential tools and resources required. Follow these steps to navigate it.
1. After signing in, the Project Hub is your landing page. Alternatively, access it from the dropdown next to your registered email.
2. Click ‘Project Hub’ to be directed to the page.
![](/images/thumb/9/92/Project_hub.png/750px-Project_hub.png)
3. Click on the ‘Get Started’ button to begin the process of creating your Xamun AI Solution.
4. Choose one of the following options:
- ○ Walkthrough: Get detailed instructions on creating your project.
- ○ Create First Project Using Xamy: Begin creating your project with Xamy's assistance.
![](/images/thumb/3/33/Project_hub_get_started.png/750px-Project_hub_get_started.png)
5. In the Project Hub, all projects you are involved in are displayed.
6. Each project is presented as a card with key details such as the project name, estimated cost, platform version, and current state, among others.
![](/images/thumb/a/af/Project_hub_card.png/750px-Project_hub_card.png)
7. Use the navigation bar to search for a specific project.
8. Browse through the sections based on the project's current state such as: Draft, Prepared, Contracting, Build, Unpaid, Shared, Closed, and Archived.
![](/images/thumb/a/a8/Project_hub_navigation.png/750px-Project_hub_navigation.png)
Reference Material
Feature | Description |
---|---|
Show All | • Displays all active projects. |
Draft | • If project is incomplete and still in progress. |
Prepared | • If project is ready for a proposal request. |
Contracting | • If project’s proposal is in negotiation or agreed upon. |
Build | • If project is in the development phase. |
Unpaid | • If project’s payment is pending. |
Shared | • If project is shared for collaboration. |
Closed | • If project activities are finalized. |
Archived | • If project is inactive and stored for future reference. |
Updated on: 09/16/2024
Managing Projects
This involves overseeing and managing the project’s progress and utilizing available tools in the Project Hub. Follow these steps to manage your projects.
1. Depending on the project's current state, different buttons will appear at the bottom of the project card.
![](/images/thumb/1/16/Project_card_button.png/750px-Project_card_button.png)
2. For help desk support, click the message icon.
3. Enter your Discord username and click the ‘Join’ button to send your request.
Note: After joining, click the icon again to access the channel related to your project.
![](/images/thumb/0/02/Help_desk_for_project.png/750px-Help_desk_for_project.png)
4. Click the ‘%’ icon to access the Project Backlog.
![](/images/thumb/9/9c/Access_project_backlog.png/750px-Access_project_backlog.png)
5. Click the calendar icon to arrange a consultation with the Xamun Team to discuss your app requirements in detail.
![](/images/thumb/2/21/Consult_with_xamun_team.png/750px-Consult_with_xamun_team.png)
6. To archive a project, click on the three-dot menu in the top right corner of the project card.
7. Select ‘Archive’ to move the project to the Archived section.
![](/images/thumb/2/29/Archive_project.png/750px-Archive_project.png)
8. To unarchive a project, go to ‘Archived’ section.
9. Click ‘Unarchived Solution’ to restore the project.
![](/images/thumb/9/92/Unarchive_project.png/750px-Unarchive_project.png)
10. To start a new project, click the ‘+ Create Project’ button.
![](/images/thumb/1/1a/Create_new_project.png/750px-Create_new_project.png)
Reference Material
Feature | Description |
---|---|
Join | • Will direct to the Xamun’s Helpdesk Discord. |
+ Create Project | • Will direct to Xami. |
Updated on: 09/16/2024
Adding Project versions
Adding project versions allows you to request and manage edits to a project's prior version in the build state, ensuring any requested changes are reviewed and approved before implementation in the Design Studio. Follow these steps to add project versions.
1. From the Project Hub, select the project you wish to request a new version.
![](/images/thumb/a/ac/Choose_project.png/750px-Choose_project.png)
2. Click on ‘Devs Tool.’
3. Choose ‘Versioning.’
![](/images/thumb/1/1e/Adding_project_version.png/750px-Adding_project_version.png)
4. Provide a reason for the version request.
5. Click ‘Request New Version.’
![](/images/thumb/c/c1/Request_new_version.png/750px-Request_new_version.png)
6. To check the status of your request, click ‘Devs Tool.’
7. Select ‘Versioning’ again.
![](/images/thumb/5/5f/Checking_version_request_pending.png/750px-Checking_version_request_pending.png)
8. If needed, you can cancel the request to modify the reason.
![](/images/thumb/d/d0/Cancel_version_request.png/750px-Cancel_version_request.png)
9. To verify if the version has been approved, click the ‘Devs Tool.’
10. Select ‘Versioning’ once more.
![](/images/thumb/b/bf/Checking_version_request_approved.png/750px-Checking_version_request_approved.png)
11. Once approved, click ‘Edit New Version’ to make changes to the project.
![](/images/thumb/f/f6/Edit_new_version.png/750px-Edit_new_version.png)
Reference Material
Feature | Description |
---|---|
Reason | • Input here the reason for your project’s version request. |
Request New Version | • Will send the project’s version request to the Xamun Team. |
Edit New Version | • If clicked, you can now edit your project in the Design Studio. |
Updated on: 09/16/2024
Build Application
Customize Module
Before starting to build your application, it's important to navigate through the Project Hub to access the necessary tools and resources. This guide will help you find your project, choose the right platform, and start the design process. Follow these steps to set up your application and customize its features.
1. From the Project Hub, click the dropdown button on the top right corner to view the list of Xamun modules.
2. Click ‘Solution Library’ to be directed to the page.
![link=https://wiki.xamun.com/File:Build application.png](/images/thumb/7/73/Build_application.png/750px-Build_application.png)
3. Click the ‘View Detail’ button on your chosen project to view its design preview.
![link=https://wiki.xamun.com/File:Build application view details.png](/images/thumb/9/98/Build_application_view_details.png/750px-Build_application_view_details.png)
Note: To view your projects by category, click the dropdown button next to the search bar.
4. Click on your preferred platform.
5. To start building your application, click the '‘Start Design Process’ button.
![link=https://wiki.xamun.com/File:Start design process.png](/images/thumb/7/7f/Start_design_process.png/750px-Start_design_process.png)
6. The 'Build Application' form will appear on your screen.
7. Enter your solution project name and write a short description of your project.
8. Select your platform by clicking the checkbox.
9. Click the ‘Proceed’ button.
![link=https://wiki.xamun.com/File:Build application form.png](/images/thumb/d/d1/Build_application_form.png/750px-Build_application_form.png)
Reference Material
Feature | Description |
---|---|
Solution Project Name | • Input here the name of your project. • Required Field |
Short Description | • Input here a short description of your project. |
Choose Platforms | • Choose the best platform/s appropriate for your project. |
Proceed | • If clicked, you can now customized your application's module/s. |
Updated on: 08/21/2024
Module Configuration
This is the second step in creating a project. It contains the List of Modules, Page Preview, Module Description, and Solution Information.
In this step, the user can modify or add modules based on the selected Solution to fit the business needs or requirements.
By starting to enter Project Name, Select its Platform, and Short Description for your Project.
![](/images/f/f1/Project_Details.png)
1. Select and Configure Modules: Review the Selected Modules/Pages section on the left side. Here, you can:
- ○ Expand or Collapse Modules by clicking the arrow beside each module name.
- ○ Preview Pages by clicking on the page name, which will be displayed on the right.
- ○ Toggle Pages On/Off by using the switch next to the page name.
- ○ Access Module Settings via the gear icon to add new pages from the library or create a blank page.
2. Add New Modules:
- ○ Click the Add (+) Button to open a popup that allows you to add a new module from the library or a blank module.
3. Search for Additional Modules:
- ○ Use the Search Bar in the "Available Modules/Pages" section to find specific modules or pages.
4. Toggle Between Views:
- ○ Use the Web/Mobile Toggle to switch between viewing the design on a web app or mobile app platform.
![](/images/3/30/Navigation_of_module_page.png)
5. Navigate Through Pages:
- ○ If a module contains multiple pages, use the Arrow Navigator to move between pages.
6. Add/Edit Notes:
- ○ Click Write Note or Edit Note to open the Note popup for adding or editing notes associated with your module configuration.
7. Utilize the "Working with Figma" Feature: In the upper section of the page, click the "Working with Figma" button. This feature allows you to:
- ○ Export Solution: Export the current design to Figma for further customization and collaboration.
- ○ Import Solution: Import a Figma design back into Xamun to continue development.
- ○ Access the Media Library: Use this to manage assets such as images, icons, and other media used in your project.
![](/images/a/a1/Page_development.png)
8. Define Business Rules:
- ○ Click on the "Business Rules" tab in the top navigation bar.
- ○ Here, you can manage and create User Stories by defining user roles and their interactions within the application.
![](/images/0/03/Business_rules.png)
9. Finalize Your Configuration:
- ○ After making all necessary changes, proceed to the next step by selecting “Finalize Solution” tab in the top navigation bar
- ○ Here, you can see the solution summary showcasing the modules included, ability to choose optional add ons, and the total cost and its breakdowns.
![](/images/8/88/Finalize_solution_navigation.png)
Reference Material
Feature | Description |
---|---|
Solution Project Name | • Input here the name of your project. • Required Field |
Short Description | • Input here a short description of your project. |
Choose Platforms | • Choose the best platform/s appropriate for your project. |
Proceed | • If clicked, you can now customized your application's module/s. |
Arrow Up/Down Icon beside the module | • If arrow up is clicked, it will list down all the pages of the selected module. • If arrow down is clicked, it will hide all the pages of the selected module. |
Module Setting (Gear Icon) | • If clicked, it will show the two kinds of adding the page, namely: Add page from library, Add blank page. |
Clickable Page Name | • If clicked, it will display the page preview. |
Switch / Toggle Button | • Found on the left side of the page name. • If clicked, it will Toggle button to remove or add page. |
Right Arrow beside the page name | • If clicked, it will show DESIGN PREVIEW page. |
Available Modules/Pages | • If clicked, it will display more modules and pages. |
Web/Mobile Toggle | • To switch between viewing the design on a web app or mobile app platform. |
Arrow Navigator (left and right) | • It will be shown if the selected module has multiple pages. • If left arrow is clicked, it will navigate to the next page. • If right arrow is clicked, it will navigate to the previous page. |
Write Note (Pencil icon) | • If clicked, it will open the Note popup page. |
Add Page from library | • If clicked, it will redirect to ADD PAGE. • See PERSONALIZE MODULE section > ADD PAGE VIEW for more details. • Inside Gear Icon (Module Settings). |
Add blank page | • If clicked, the screen will show a blank page. • Inside Gear Icon (Module Settings). |
Business Rules | • You can manage and create User Stories by defining user roles and their interactions within the application. |
Finalize Solution | • Allows you to review and confirm all add on configurations. |
Updated on: 09/10/2024
Add Module
Add Module from Library
To enhance your project with additional features, you can easily add modules from the library. Follow these steps to easily add new modules to your project:
1. Click the ‘Add’ icon to add a Module to your project.
![](/images/thumb/9/94/UIandPageDev_Landing_Page.jpg/750px-UIandPageDev_Landing_Page.jpg)
2. Select the ‘Add New Module’ to view the lists of modules you can choose from.
![](/images/thumb/9/9c/AddNew_Module.png/750px-AddNew_Module.png)
3. Tap the ‘+’ button on the module you would like to add.
4. Click the ‘proceed’ button once you are satisfied with your selection.
![](/images/thumb/6/6c/Add_Loan_Module.png/750px-Add_Loan_Module.png)
5. The new modules will be shown alongside your existing module.
![](/images/thumb/3/36/Selected_New_Module.png/750px-Selected_New_Module.png)
Reference Material
Feature | Description |
---|---|
Add Module | • Will display the choices to add a module.. |
Add New Module | • Will direct to the page with the list of modules. |
Add Blank Module | • A blank module will automatically be added on your project. |
Add [+] | • The module will be selected. |
Proceed | • The selected modules will be added on your project. |
Updated on: 09/18/2024
Add Blank Module
To start organizing your project, add a new blank module. This will give you a fresh space for design. Follow these steps to create and name your module:
1. Click the ‘Add’ icon to add a Module to your project.
![](/images/thumb/2/24/Add_module_from_library.png/750px-Add_module_from_library.png)
2. Choose ‘Add Blank Module’ to create a blank module available for design.
![](/images/thumb/0/0d/Choose_add_blank_module.png/750px-Choose_add_blank_module.png)
3. The blank module you add will appear below your existing modules, under the label ‘To Be Designed’.
![](/images/thumb/7/7a/Added_blank_module.png/750px-Added_blank_module.png)
4. Click the ‘settings’ button to access options for your blank module.
5. Choose ‘Rename’ to modify the module name.
![](/images/thumb/3/3c/Blank_module_settings.png/750px-Blank_module_settings.png)
6. The ‘Module Detail’ form will appear on the right side of the page.
7. Enter the new name for your module and add a description.
8. Click ‘save’ to apply the changes.
![](/images/thumb/b/bc/Save_added_blank_module.png/750px-Save_added_blank_module.png)
Reference Material
Feature | Description |
---|---|
Add Module | • Will display the choices to add a module. |
Add New Module | • Will direct to the page with the list of modules. |
Add Blank Module | • A blank module will automatically be added on your project. |
Updated on: 08/29/2024
Add User Story
Add User Story enables you to create and document user stories, providing a clear description of features or functionalities from the end user's perspective. This helps teams understand user needs and plan development tasks accordingly. This guide will walk you through the steps to add a user story.
1. In the Xamun Project Hub, click on one of the projects you want to add a user story.
![](/images/thumb/6/67/Xamun_Project_Hub3.png/750px-Xamun_Project_Hub3.png)
2. To ask Xami to generate a user story, click on the Business Rules, then Generate Now.
![](/images/thumb/c/c1/Generate_Now.png/750px-Generate_Now.png)
3. Click on the Suggest User Stories button so Xami will produce User Roles and User Stories.
![](/images/thumb/7/75/Suggest_User_Stories.png/750px-Suggest_User_Stories.png)
4. These are the user stories generated by Xami. You can see if they are functional or non-functional, the associated roles, and use the filter button to narrow down your options.
Note: By clicking on a user story, you can view additional details such as logic & calculation and integration. You can make edits and then click Save.
![](/images/thumb/6/6a/User_Stories.png/750px-User_Stories.png)
5. To add more user roles, click the + button at the upper left corner, then Add User Role.
![](/images/thumb/d/d9/Manage_User_Roles.png/750px-Manage_User_Roles.png)
6. Complete all necessary information by filling in the following fields, then click on Save.
- a. User Role
b. Description
c. Figma Flow Link
- a. User Role
![](/images/thumb/6/67/Add_User_Role.png/750px-Add_User_Role.png)
Reference Material
Feature | Description |
---|---|
User Role | • Specify the role of the user within the project or application (e.g., Administrator, Developer, Designer). • Required Field |
Description | • Provide a detailed description of the user role, including responsibilities, permissions, and any relevant information about their function. • Required Field |
Figma Flow Link | • Include a link to a Figma flow or design that visually represents the user's journey or the design process related to this role. |
Save | • Click this button to save the entered details and link. |
Updated on: 09/05/2024
Add Test Case
Add Test Case is a feature that allows users to create and document specific test scenarios for software applications. This ensures that each functionality is tested thoroughly to meet quality standards and requirements. This guide will walk you through the steps to add a test case.
1. In the Xamun Project Hub, click on one of the projects you want to add a test case.
![](/images/thumb/4/47/Xamun_Project_Hub4.png/750px-Xamun_Project_Hub4.png)
2. Go to the Business Rules tab, then click Test Cases. To add an additional test case, click the (+) Add button.
Note: Each user story has its own test case. You can add test cases to each of the user stories.
![](/images/thumb/f/fb/Test_Cases.png/750px-Test_Cases.png)
3. Provide the information details needed, then click on Save.
a. Test Case Name
b. Steps
c. Expected Result
![](/images/thumb/e/ee/Add_Test_Case.png/750px-Add_Test_Case.png)
Reference Material
Feature | Description |
---|---|
Test Case Name | • Provide a name for the test case. • Required Field |
Steps | • List the steps required to execute the test case. • Required Field |
Expected Result | • Describe the expected outcome of the test case. • Required Field |
Save | • Click this button to save the test case details. |
Updated on: 09/05/2024
Editing Modules
Editing Modules
Add Page
Add Page From Library
Add Page from Library enables you to quickly add pre-designed pages from a library of templates. This saves time and ensures consistency in your project. This guide will walk you through the steps to add a page from the library.
1. Once you click on the project you are working on, select the settings button and choose Add Page from Library to access multiple options.
![](/images/thumb/f/f3/Add_Page_from_Library.png/750px-Add_Page_from_Library.png)
2. If you want to add more pages to your project, click the + button, and the page will be automatically added to your project.
![](/images/thumb/5/5e/Adding_Page.png/750px-Adding_Page.png)
Updated on: 09/05/2024
Add Blank Page
Add Blank Page enables you to create a new page from scratch, offering complete flexibility in design and content. This option is ideal for custom layouts and unique content needs. This guide will walk you through the steps to add a blank page.
1. Once you click on the project you are working on, select the settings button and choose Add Blank Page to create a new page.
![](/images/thumb/0/09/Add_Blank_Page.png/750px-Add_Blank_Page.png)
2. By clicking the dropdown button, you can access the newly added blank page.
![](/images/thumb/0/04/New_Blank_Page.png/750px-New_Blank_Page.png)
Updated on: 09/05/2024
Uploading Pages
Uploading Pages
Uploading Pages enables you to submit an image, which the Xamun Platform will analyze to provide you with the total cost.
1. In the Xamun Project Hub, select a project you want to upload a page.
![](/images/thumb/8/8b/Select_Project.png/750px-Select_Project.png)
2. Click on the dropdown button beside the Module Name to reveal its pages.
3. Beside the Page Name, click on the arrow button to display the page in an expanded view on the platform.
4. To upload an image of your page, click on the ‘Upload Image’ button to open the form.
![](/images/thumb/4/4d/Click_Upload_Image.png/750px-Click_Upload_Image.png)
5. In the Upload Image form, click ‘Browse’ to open your file explorer and choose an image to upload.
![](/images/thumb/7/76/Browse_Image.png/750px-Browse_Image.png)
6. After uploading an image, click the ‘Analyze’ button to assign a user story and calculate the total cost for the page.
![](/images/thumb/2/25/Analyze_Image.png/750px-Analyze_Image.png)
7. After the platform completes its analysis, it will assign a user story and provide the total cost. To proceed, simply click the ‘Confirm’ button to successfully upload it to the platform.
![](/images/thumb/1/15/Confirm_Upload_Image.png/750px-Confirm_Upload_Image.png)
Reference Material
Feature | Description |
---|---|
Upload Image button | • Displays a form for users to upload an image of a page. |
Browse | • Opens the file explorer, allowing users to select and upload an image. |
Analyze Button | • Assigns a user story and calculates the total cost. |
Confirm Button | • Finalizes the process by uploading the image to the platform. |
Updated on: 09/20/2024
Editing Pages
Editing Pages
Editing Pages allows you to modify the content and layout of existing pages. This feature helps you update information, adjust formatting, and make other changes to ensure your pages meet current needs and standards. This guide will walk you through the steps to edit a page effectively.
1. Once you click on the project you are working on, click the dropdown button to view the page listing and choose the one you want to edit.
2. To edit, open the page by clicking the arrow next to Winning Tickets Page, then click the Edit button.
![](/images/thumb/3/35/Editing_Pages.png/750px-Editing_Pages.png)
3. Provide the necessary details by filling in the fields, then click Save.
- a. Page Name
b. Description
c. Note
- a. Page Name
![](/images/thumb/5/50/Page_Detail.png/750px-Page_Detail.png)
Reference Material
Feature | Description |
---|---|
Page Name | • Enter the name of the page being described. |
Description | • Provide a detailed description of the page, including its purpose and content. |
Note | • Add any additional notes or comments related to the page that may be useful. |
Save | • Click this button to save the details of the page. |
Updated on: 09/05/2024
Removing Pages
Removing Pages
Removing Pages allows you to delete unwanted or unnecessary pages from your project. This helps maintain a clean and organized structure. This guide will walk you through the steps to remove pages efficiently.
1. Once you click on the project you are working on, select one of the modules/pages.
2. Click the toggle switch button beside the page name to disable or delete the page.
![](/images/thumb/3/34/Removing_pages.png/750px-Removing_pages.png)
Updated on: 09/05/2024
Working with Figma
Export Solution
Export Solution enables you to export your project or solution into a shareable file format, making it accessible outside the platform. This helps in distributing the project or collaborating with others. This guide will walk you through the steps to export your solution.
1. Once you select the project you are working on, click Working With Figma in the upper right corner.
2. From the dropdown list, select Export Solutions to Figma.
![](/images/thumb/b/b8/Export_Solution1.png/750px-Export_Solution1.png)
3. Click Download to export the solution structure and Figma files for design.
![](/images/thumb/b/be/Export_to_Figma1.png/750px-Export_to_Figma1.png)
Updated on: 09/05/2024
Import Solution
To easily bring your Figma designs into your project, just follow these steps. You'll start by accessing the Figma options and finish by connecting your Figma document to your project. Here's how:
1. Click the ‘Working with Figma’ button to see the available Figma options.
![](/images/thumb/f/fb/Working_With_Figma_Import.png/750px-Working_With_Figma_Import.png)
2. Select ‘Import Solutions from Figma’ and the ‘Import from Figma’ form will appear on your screen.
![](/images/thumb/e/e6/Import_Figma.png/750px-Import_Figma.png)
3. Enter the access token.
4. Provide the link to the Figma document you wish to import.
5. Click the ‘Connect’ button to link the Figma document to your project.
![](/images/thumb/b/b8/Import_Figma_AccessToken.jpg/750px-Import_Figma_AccessToken.jpg)
Reference Material
Feature | Description |
---|---|
Working with Figma | • Shows the options on working with Figma. |
Access Token | • Can be found on your Figma account, just generate and copy your personal access token. |
Figma Document URL | • The url of your solution. • Copy it into your solution in Figma. |
Select Canvas Page | • Choose the page of your solution in the dropdown menu. |
Updated on: 09/18/2024
Page Functions
Add Functional Details
Write Note
Add a Note
To add a note to your page, follow these steps to ensure you’re in the correct section and ready to make edits. This process involves selecting the appropriate module, accessing the desired page, and entering your note into the provided form.
1. Make sure you are in the ‘UI & Page Development’ section.
2. Select your module.
3. Press the arrow button next to the page you wish to access.
![](/images/thumb/2/29/Add_note_part_1.png/750px-Add_note_part_1.png)
4. The page will appear on your screen.
5. Select the edit button next to your page's name.
![](/images/thumb/0/0c/Tap_edit.png/750px-Tap_edit.png)
6. The 'Page Detail' form will appear on the right side of your screen.
7. Enter your note in the 'Note' section of the form.
8. Click 'save' to store your input.
![](/images/thumb/f/fe/Type_your_note.png/750px-Type_your_note.png)
Feature | Description |
---|---|
Edit button | • Will display the ‘Page Detail’ form on the right side of the screen. |
Save | • Will save the changes made on the page detail. |
Updated on: 09/06/2024
Finalize
Solution Summary
To complete your project solution with Xamun, follow this guide to review the details of your solution, including cost and platform information.
1. Click the ‘Finalize Solution’ tab to ensure you are in the correct section.
2. Tap the checkbox for the options you want to apply to your project.
3. Click the toggle buttons for the cloud hosting services you wish to use.
4. Click the dropdown button for your chosen cloud hosting; your options are Small, Medium, and Large.
5. Select your preferred platform.
6. Your grand total cost will update each time you change your selections.
7. Click the ‘Request for Proposal’ button to finalize.
![](/images/thumb/3/3e/Finalize_solution.png/750px-Finalize_solution.png)
- Note: If you want to edit another solution, click the ‘Edit Solution’ button.
8. A message will display on your screen.
9. Click the ‘Submit’ button.
![](/images/thumb/a/a7/Submit_proposal.png/750px-Submit_proposal.png)
Reference Material
Feature | Description |
---|---|
Checkbox | • If clicked, the service will be selected. |
Toggle button | • If clicked, the cloud hosting will be selected. |
Request for Proposal | • Will display the confirmation message. |
Submit | • Will send the project to the Xamun Team. |
Updated on: 09/06/2024