Arwa Al Zahrani
Country: Saudi Arabia
17 July, 2024
معسكر أنظمة التصميم (Design Systems & Design Tokens)
In this camp, you will receive more than 30 hours of high-quality live interactive educational content online, and you will learn and apply building design systems using the atomic design methodology (Atomic Design), managing design codes (Design Tokens), documenting the system and linking it to the code.
duration
4 weeks
price
4995R.S
About this camp
You'll go from building disparate components to designing an integrated system that ensures consistency across every screen, and from difficult-to-interpret design decisions to documented Design Tokens that speak the same language as developers. This camp not only teaches you how to use Figma, but it teaches you how to think about design as a living, scalable, and maintainable system, and brings you out with a real design system ready for delivery.
What will you learn in this scholarship?
- Understand the difference between Design System, Style Guide, and UI Kit and choose what works for your project.
- Build systematic components using Atomic Design from the simplest elements to the most complex.
- Create dynamic components using Auto Layout, Variants, and States.
- Build documented Design Tokens and connect them to your components within Figma.
- Systematically create Dark Mode and Light Mode.
- Document the design system and deliver it to developers professionally.
- Export Figma variables to JSON and convert them to CSS ready for development.
Whose camp is this?
- An experienced interface designer who wants to take your business from designing screens to building systems.
- A designer who works within a team and suffers from inconsistency between components and displays.
- A designer who wants to speak the same language as developers and deliver his work professionally.
- A design manager or team leader who wants to build a unified design system for his product.
- For anyone who sees in themselves the ability to commit and persevere to learn new skills.
Tools you will need during camp:
- Provides a computer or laptop with a stable Internet connection.
- Free Figma account (and we'll walk you through the steps to set it up when needed).
- Install the Zoom application and create an account on it to attend live and interactive sessions
Your comprehensive guide to entering the world of user experience design
Your educational path during the camp
Your educational journey - step by step towards mastery
Effective learning requires a clear and thoughtful plan. So we designed a gradual educational journey that starts with you from the basics and moves you towards mastery and professionalism.
Each stage is carefully designed to build your skills with confidence and give you a practical understanding applicable to real-life projects from day one.
Atomic design methodology (Atomic Design) and its levels.
How to plan and analyze component levels.
Understanding Component States (States & Variants)
Interactive hands-on activity: Use Figma Auto Layout and Properties to create dynamic components.
Interactive hands-on activity: Create a Button using Variables and Auto Layout.
Interactive practical activity: building complex components (Molecules & Organisms).
What are design codes (Design Tokens) and why are they important?
The difference between design codes (Design Tokens) and Figma variables (Figma Variables).
Types of design symbols (Design Tokens) and naming strategies.
Design code planning and building strategies (Design Tokens).
Organize and connect components to Design Tokens within Figma
create(Dark Mode & Light Mode)
Why is documentation important? And how to create it in practical ways.
Best Tools for Delivery Phase for Developers (Handoff).
Design System Maintenance (Design System): Its Areas and Importance
Governance (Governance): Models and best practices for managing change.
Export Figma variables to JSON and preview the code
Export and Conversion Tools (Style Dictionary)
Convert JSON to CSS and link it to the project
Setting up a Variable Library (Variables) in Figma for export
The Complete Workflow: From Figma to Development
Your experts on this educational journey
Muhammad Al-Arif
User Experience Manager and Design Systems Expert
I have over 20 years of experience designing practical and impactful digital experiences, spanning: design strategy, user research, information structuring, content strategy, user interface design, and usability testing. I work with clients and design teams to build a clear vision that balances user needs, business goals, and technical requirements.
Graduates' opinions
Omaima Chaouch
Country: Libya
15 July, 2024
Marwa Abdullah Al-Zouri
Country: Saudi Arabia
29 December, 2025
Graduates
+100 stories of employment and professional success that started from our camps
Major companies in the region trust our graduates
The best companies in the region that employ our graduates
We are proud that our graduates join the ranks of the best companies in the region, where their skills and creative thinking are valued. Through hands-on training and job market-friendly curricula, we prepare our students for professional success from day one.
FAQ
Got questions? Here are her answers.
Do I need prior experience?
No, this is a foundation camp designed specifically for beginners! We start from the basics and work our way up with you step by step.
How long is the camp and what is the schedule?
The camp lasts for 4 weeks with more than 32 hours of live educational content and interactive workshops. Sessions are held remotely allowing you to participate from anywhere in the world, with recordings available for review.
Will I get a job after completing camp?
We provide an integrated practical experience under the supervision of experts with more than 20 years of experience. You will work on real projects and gain practical experience that can be added to your CV. Focus on important basics and laws with extensive practical application.
What distinguishes this camp from other courses?
In this camp, you will receive more than 30 hours of high-quality live interactive educational content online, and you will learn and apply building design systems using the atomic design methodology (Atomic Design), managing design codes (Design Tokens), documenting the system and linking it to the code.
Can I get an accredited certificate?
Yes, you will receive a Cradis-accredited certificate after completing all camp requirements, as well as practical projects to add to your professional portfolio.
How much time is required to study per week?
Being a foundation camp, you will need about 12-15 hours per week including live sessions, practical assignments, and applied projects. This investment of time is essential to building a strong foundation in user interface design.
How much does the camp cost and what payment options are available?
The current cost of the Design Systems Camp (Design Systems & Design Tokens) is 4,995 Saudi riyals and we provide flexible payment options that include full payment in advance or installments in installments. For more details, contact the sales team directly.
