The first-ever tutorial teaching Figma in an interactive way written in Bahasa, right within Figma itself! Students will learn how to create a Dashboard Interface from scratch while building a simple Design System using the principles of the Atomic Design Approach. It's all hands-on and 100% practical.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FWY8vmY2s7AZnEVt2uWyQn0FlUNy1%2F90h49DfSJoHM4LNAj5dK%2F036ce444-54b9-4613-b451-e8b9abb67b29.jpg?alt=media&token=29c2adc7-5a64-4206-864c-50f13d7dec52","id":"036ce444-54b9-4613-b451-e8b9abb67b29","width":1170,"height":2080,"filename":"E8494FDB-65EC-4AE8-BC2F-B9354689DC29.jpg","type":"image/jpeg","caption":"","border":false}]}
```

It covers fundamental topics such as creating Typography, Color, Spacing, and Shadows, and also covers more advanced topics like building complex components, using Autolayout 4.0,  Grid Systems, Variants, Component Properties, and syncing data into a static mockup.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FWY8vmY2s7AZnEVt2uWyQn0FlUNy1%2F90h49DfSJoHM4LNAj5dK%2F9dfefbd7-6ecb-4b60-975d-1613a285dcaa.png?alt=media&token=79c864e4-33e9-4aad-b905-2f87160d5f72","id":"9dfefbd7-6ecb-4b60-975d-1613a285dcaa","width":2160,"height":3840,"filename":"halofigma template - link 8@2x.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FWY8vmY2s7AZnEVt2uWyQn0FlUNy1%2F90h49DfSJoHM4LNAj5dK%2Fb4c5c78f-cadc-4e44-b32c-0c731942598a.png?alt=media&token=b09cce03-8648-46ee-9e34-a01155e5ffba","id":"b4c5c78f-cadc-4e44-b32c-0c731942598a","width":2160,"height":3840,"filename":"webflow cover success - desktop@2x.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FWY8vmY2s7AZnEVt2uWyQn0FlUNy1%2F90h49DfSJoHM4LNAj5dK%2Fba7c924b-214c-4b80-8c34-be201d1195f4.png?alt=media&token=29e0ed1a-6358-478d-8f87-5ad61b84e20d","id":"ba7c924b-214c-4b80-8c34-be201d1195f4","width":2160,"height":3840,"filename":"halofigma template - link 18@2x.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FWY8vmY2s7AZnEVt2uWyQn0FlUNy1%2F90h49DfSJoHM4LNAj5dK%2F9c0ddab6-1ad4-496b-a793-1ae4ad806265.png?alt=media&token=9e7988d6-433c-4922-a45f-c579103e9fe9","id":"9c0ddab6-1ad4-496b-a793-1ae4ad806265","width":2160,"height":3840,"filename":"halofigma template - link 7@2x.png","type":"image/png","caption":"","border":false}]}
```

Download free demo at  [TutorialUIUX.com](http://tutorialuiux.com/)

Learn Figma in Figma

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FWY8vmY2s7AZnEVt2uWyQn0FlUNy1%2FurSBHIgK8LiUgofinCZU%2Ff6f7b256-37e2-42f8-b322-9e241ba1882c.png?alt=media&token=0dc740c3-54d8-44bc-b962-021d901a8c17","id":"f6f7b256-37e2-42f8-b322-9e241ba1882c","width":1344,"height":1120,"filename":"SCR-20230320-jqj.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FWY8vmY2s7AZnEVt2uWyQn0FlUNy1%2FurSBHIgK8LiUgofinCZU%2F7bc03bad-e415-4fa7-8c75-1866cdfae3a5.png?alt=media&token=c7f7347f-a774-4930-9e2b-bf2cee58b2e8","id":"7bc03bad-e415-4fa7-8c75-1866cdfae3a5","width":1908,"height":1152,"filename":"SCR-20230320-jqf.png","type":"image/png","caption":"","border":false}]}
```

An interactive tutorial for creating a Design System from scratch, designed for those who are new to UI and UX design or early in their career.

Students will play directly in Figma and learn step-by-step how to create a Style Guide and Component Library using advanced techniques such as Auto Layout 4.0 and Variants that produce adaptive and responsive components.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FWY8vmY2s7AZnEVt2uWyQn0FlUNy1%2FurSBHIgK8LiUgofinCZU%2F4db063d3-29ff-4e86-9c4f-2577ea35bb2a.png?alt=media&token=6096a6f6-ad9c-4540-9823-8822f24eff74","id":"4db063d3-29ff-4e86-9c4f-2577ea35bb2a","width":2160,"height":2700,"filename":"hf 01@2x.png","type":"image/png","caption":"","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FWY8vmY2s7AZnEVt2uWyQn0FlUNy1%2FurSBHIgK8LiUgofinCZU%2F1c065667-9b66-41c3-b375-5cdb6af1b00e.png?alt=media&token=9917eee8-056b-4066-b629-b52a0ed5b64f","id":"1c065667-9b66-41c3-b375-5cdb6af1b00e","width":2160,"height":2700,"filename":"hf 02@2x.png","type":"image/png","caption":"","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FWY8vmY2s7AZnEVt2uWyQn0FlUNy1%2FurSBHIgK8LiUgofinCZU%2F1dc0c2c1-cb71-433e-8238-176b1d17ed6d.png?alt=media&token=5e6ef109-599f-483d-8641-670b49d9648a","id":"1dc0c2c1-cb71-433e-8238-176b1d17ed6d","width":2160,"height":2700,"filename":"hf 03@2x.png","type":"image/png","caption":"","border":true}]}
```

I also share how I approach UI design based on projects I've worked on in the past 12+ years. Included Best Practices, Pro tips, and make sure all design elements complied with Accessibility standards.

Students will also learn to create good Documentation from setting up Naming Conventions to managing Layer Styles, Text Styles and designing their own web Documentation. Guided from low to high difficulty and ended with a quiz.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FWY8vmY2s7AZnEVt2uWyQn0FlUNy1%2FurSBHIgK8LiUgofinCZU%2Fe0d9f090-f342-444a-a183-a2a3a07f4575.png?alt=media&token=63e69395-4c0a-4443-a508-324554b1c34b","id":"e0d9f090-f342-444a-a183-a2a3a07f4575","width":1081,"height":1350,"filename":"highlights 01@2x.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FWY8vmY2s7AZnEVt2uWyQn0FlUNy1%2FurSBHIgK8LiUgofinCZU%2F1a1ff92d-eea2-4b5c-982c-229d5c3e6dc0.png?alt=media&token=5714c4ef-2138-4550-8cd4-a1221a251750","id":"1a1ff92d-eea2-4b5c-982c-229d5c3e6dc0","width":1081,"height":1350,"filename":"highlights 02@2x.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FWY8vmY2s7AZnEVt2uWyQn0FlUNy1%2FurSBHIgK8LiUgofinCZU%2F7edc52aa-911b-437b-a782-7d4c0994e150.png?alt=media&token=956573c3-06bb-44e6-85b8-2111c5ef1ebc","id":"7edc52aa-911b-437b-a782-7d4c0994e150","width":1081,"height":1350,"filename":"highlights 03@2x.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FWY8vmY2s7AZnEVt2uWyQn0FlUNy1%2FurSBHIgK8LiUgofinCZU%2F40616a9b-b49b-4873-9679-73d97bcc488e.png?alt=media&token=d22f73fb-3ddb-4602-8611-38b66b452637","id":"40616a9b-b49b-4873-9679-73d97bcc488e","width":1081,"height":1350,"filename":"highlights 04@2x.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FWY8vmY2s7AZnEVt2uWyQn0FlUNy1%2FurSBHIgK8LiUgofinCZU%2F2a2a78f3-9e8b-46cf-8608-2ebff3810952.png?alt=media&token=929eabce-24ff-465a-8e6a-e44f887ce262","id":"2a2a78f3-9e8b-46cf-8608-2ebff3810952","width":1081,"height":1350,"filename":"highlights 05@2x.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FWY8vmY2s7AZnEVt2uWyQn0FlUNy1%2FurSBHIgK8LiUgofinCZU%2F2d4c42d7-c3fb-4263-adf2-f77559aa76df.png?alt=media&token=9e957a4d-cb0b-4b2b-ae45-c7cbb87ea8f5","id":"2d4c42d7-c3fb-4263-adf2-f77559aa76df","width":1081,"height":1350,"filename":"highlights 06@2x.png","type":"image/png","caption":"","border":false}]}
```

This is a new learning format, not a webinar, not a video, but interactive steps in Figma that can be played without distraction from other media.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FWY8vmY2s7AZnEVt2uWyQn0FlUNy1%2FurSBHIgK8LiUgofinCZU%2F8a6970d4-5fc3-4bbe-99bf-4726abfe2b0d.png?alt=media&token=b5a98fe6-6e43-4ebf-8b3b-c939ecd7785a","id":"8a6970d4-5fc3-4bbe-99bf-4726abfe2b0d","width":1081,"height":1350,"filename":"highlights 07@2x.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FWY8vmY2s7AZnEVt2uWyQn0FlUNy1%2FurSBHIgK8LiUgofinCZU%2Fbad667ca-be58-45d8-9566-2ee0b9d423e9.png?alt=media&token=cf337b4c-8424-4301-9659-1337289940b6","id":"bad667ca-be58-45d8-9566-2ee0b9d423e9","width":1081,"height":1350,"filename":"highlights 08@2x.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FWY8vmY2s7AZnEVt2uWyQn0FlUNy1%2FurSBHIgK8LiUgofinCZU%2Ff35cacb6-ddb2-4bd7-a813-34e14e850f00.png?alt=media&token=5a900dd1-5b8e-41a9-a07c-cacb460cdf2c","id":"f35cacb6-ddb2-4bd7-a813-34e14e850f00","width":1081,"height":1350,"filename":"highlights 09@2x.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FWY8vmY2s7AZnEVt2uWyQn0FlUNy1%2FurSBHIgK8LiUgofinCZU%2F14b3eaf7-4ca4-4164-b61d-4f9069fcd850.png?alt=media&token=710be613-af24-4422-8292-232bc7ae2e8f","id":"14b3eaf7-4ca4-4164-b61d-4f9069fcd850","width":1081,"height":1350,"filename":"highlights 10@2x.png","type":"image/png","caption":"","border":false}]}
```

Download free demo at [HaloFigma.com](https://www.halodesigners.com/halofigma)

HaloFigma

What did the UI say to the FE at the party? "I know we have our differences, but together, we click!"