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!"

Head of Product Designer

Petunjuk Memulai UX dari NOL

I wrote a digital mini-book specifically for Indonesian folks who are struggling to break into the industry. It provides a comprehensive roadmap to becoming a UI Designer, UX Designer, and UX Researcher.

Read by 8,500+ students, designers, marketers, teachers, doctors, researchers, and engineers, and it has helped them land their first UI UX job.

I see this book as my first step in building local design communities and helping them achieve their goals in a more scalable way.

The SaaS that I designed as a founding designer was awarded the Product of the Day

IC Recognition

Contributed to a business-critical project, demonstrated passion for the business/results, and represented the essence of HomeAway (later company name changed to Vrbo).

I am proud to be a founding member, designing the SaaS from ideation to launch. I was fortunate enough to work alongside some of the best product and engineering teams in the industry.

Travelstop was named one of the top global travel startups of 2019 by Skift

I made an interactive playground for 4k+ designers to learn Figma by creating a dashboard interface.

Dashboard UI Tutorial

Providing a safe space for local designers to learn and collaborate.

Community Manager

2hrs interactive session about the design process, culture, and guidance for those eager to break into the industry.

Running strong since 2020, 16+ events, 3k+ designers.

Hosting Monthly Community Events

Enjoyed by over 9.4k designers to build a design system from scratch in Figma. 100% practical.

Design System Tutorial

Featured Clients: Home Credit, Lokasi, Loyalbox, classified projects from Billy McFarland (yeap that guy, and yeap I got scammed too).

UI UX Designer

Product Designer

This was me before I discovered my heartfelt passion.

GeoSpatial Engineer

⚡️ I'm a founding designer. 
✨ Design the whole SASS (Web, iOS, Android) from scratch.
✨ Help team reach crucial $XXM GMV milestone.
✨ Help team to scale in terms of people and process.

Wasil

2023