Table of Contents

• Title and Copyright Information
• Preface
  • Purpose
  • Before you Begin
  • Pre-requisites
  • Audience
  • Documentation Accessibility
  • Critical Patches
  • Diversity and Inclusion
  • Related Resources
  • Conventions
  • Screenshot Disclaimer
  • Acronyms and Abbreviations
  • Post-requisites
• 1 The UX Plugin
• 2 Plugin Setup
• 3 List of Components
• 4 Creating Business Components
  • 4.1 When to Create a Business Component
  • 4.2 How to Create Business Components
  • 4.3 Handling Device - Specific Variants
  • 4.4 Handling Other Variants
  • 4.5 Exporting Business Components
• 5 Supported Variables in Figma
• 6 List of Templates
  • 6.1 Transaction Template
  • 6.2 Widgets
  • 6.3 Overview
• 7 Auto Layout to Flexbox Mapping
  • 7.1 Direction (flex-direction)
  • 7.2 Wrap (flex-wrap)
  • 7.3 Align Items (align-items)
  • 7.4 Justify Content (justify-content)
  • 7.5 Gap (gap, row-gap, column-gap)
  • 7.6 Padding (padding)
  • 7.7 Flex Sizing (Child Behavior)
• 8 Create New Design
• 9 Modify Component
  • 9.1 Add Grid
  • 9.2 Add Conditions
    • 9.2.1 Add Logic
• 10 Export to Toolkit
  • 10.1 Steps to Export Design to Toolkit
• 11 FAQ