Adda ANDROID + IOS + FIGMA | UI Kit | Ionic | Social Media App | Free Figma

Here is a complete settings example for the Adda ANDROID + IOS + FIGMA | UI Kit | Ionic | Social Media App | Free Figma:

Android Settings

To configure the Android settings, follow these steps:

• Open the AndroidManifest.xml file and add the following lines of code:

  <application
  ...
  android:theme="@style/AppTheme">
  ...
  </application>

• Create a new file named styles.xml in the values directory and add the following code:

  <?xml version="1.0" encoding="utf-8"?>
  <resources>
  <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
      <!-- Customize your theme here. -->
      <item name="colorPrimary">@color/colorPrimary</item>
      <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
      <item name="colorAccent">@color/colorAccent</item>
  </style>
  </resources>

• Create a new file named colors.xml in the values directory and add the following code:

  <?xml version="1.0" encoding="utf-8"?>
  <resources>
  <color name="colorPrimary">#03A9F4</color>
  <color name="colorPrimaryDark">#0097A7</color>
  <color name="colorAccent">#FF4081</color>
  </resources>

  iOS Settings

To configure the iOS settings, follow these steps:

• Open the Info.plist file and add the following lines of code:

  <key>CFBundleShortVersionString</key>
  <string>1.0</string>
  <key>CFBundleVersion</key>
  <string>1</string>

• Open the LaunchScreen.storyboard file and add a new Launch Screen interface.
• Create a new file named Asset Catalog and add the following icons:
  • Icon (1024x1024)
  • Icon (180x180)
  • Icon (57x57)
  • Icon (72x72)
  • Icon (114x114)
  • Icon (120x120)
• Create a new file named Launch Images and add the following launch images:
  • LaunchImage (667x375)
  • LaunchImage (736x414)
  • LaunchImage (1080x1920)
  • LaunchImage (1125x2436)
  • LaunchImage (1242x2688)

Figma Settings

To configure the Figma settings, follow these steps:

• Open the Figma file and select the "Design" tab.
• Create a new design system by clicking on the "Create Design System" button.
• Add the following components to the design system:
  • Button
  • Text Field
  • Label
  • Image
• Create a new file named styles.css and add the following code:

  
  body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  }

button { background-color: #03A9F4; border: none; border-radius: 5px; color: #fff; cursor: pointer; padding: 10px 20px; text-align: center; }

button:hover { background-color: #0097A7; }

.text-field { background-color: #fff; border: 1px solid #ddd; border-radius: 5px; padding: 10px; width: 300px; }

.label { font-size: 16px; font-weight: bold; margin-bottom: 10px; }

.image { width: 100%; height: 100%; object-fit: cover; }

**Ionic Settings**

To configure the Ionic settings, follow these steps:

* Open the Ionic project and select the "Configure" tab.
* Create a new file named app.component.ts and add the following code:

import { Component } from '@angular/core'; import { NavController } from 'ionic-angular';

@Component({ selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.css'] }) export class AppComponent { title = 'Social Media App'; }

* Create a new file named app.component.html and add the following code:

{{ title }} Post Like ``` **Social Media App Settings** To configure the social media app settings, follow these steps: * Open the Firebase project and select the "Realtime Database" tab. * Create a new file named firebase.config.js and add the following code: ``` export default { apiKey: 'YOUR_API_KEY', authDomain: 'YOUR_AUTH_DOMAIN', databaseURL: 'YOUR_DATABASE_URL', projectId: 'YOUR_PROJECT_ID', storageBucket: 'YOUR_STORAGE_BUCKET', messagingSenderId: 'YOUR_MESSAGING_SENDER_ID' }; ``` * Replace the placeholders with your own Firebase project settings. Note: This is just an example and you may need to modify the settings to fit your specific use case.

Here are the features of Adda - Social Media App UI Kit:

1. Clean Code: The UI Kit has clean code and design.
2. Flexible UI: The UI is flexible and customizable.
3. Smooth Transition Effects: The UI Kit has smooth transition effects.
4. Font Awesome Icons: The UI Kit uses Font Awesome icons.
5. Mobile and Tablet Support: The UI Kit supports mobile and tablet devices.
6. Responsive Design: The UI Kit has a responsive design.
7. Documentation Included: The UI Kit includes documentation.
8. Unique and Creative Design: The UI Kit has a unique and creative design.
9. Easy to Customize: The UI Kit is easy to customize.
10. Animation Controller: The UI Kit has an animation controller.
11. 35 Screens Added: The UI Kit includes 35 screens.
12. Support Ionic Latest Version: The UI Kit supports the latest version of Ionic.
13. Well-organized and Structured Layer: The UI Kit has a well-organized and structured layer.
14. Figma File Added: The UI Kit includes a Figma file.
15. Poppins Font Added: The UI Kit includes the Poppins font.

The UI Kit is available in Figma format and can be used to design social media apps for both Android and iOS devices. It includes 35 screens, each customizable and with a unique design.