Convert a Figma design to ReactJS components using Storybook
В этом курсе вы узнаете, как сложные и крупномасштабные системы проектирования можно преобразовать в полноценные компоненты ReactJS. На протяжении всего курса вы узнаете, как профессиональные технологические компании внедряют свои системы проектирования и как вы можете сделать то же самое. Следуя рекомендациям, система дизайна будет преобразована из Figma в изолированные компоненты с помощью Storybook.
В конце курса вы создадите полностью адаптивное приложение ReactJS с собственной библиотекой компонентов. Вы сможете преобразовать любую дизайн-систему в доступные и функциональные компоненты, строго соблюдая принципы дизайн-системы.
Подход обучения на практике в этом курсе ставит вас на место настоящего инженера-программиста. Начиная с относительно простых заданий, вы постепенно переходите к более сложным и полезным компонентам. При этом вы автоматически станете более комфортно преодолевать препятствия, как если бы вы работали в отрасли
В нашей дизайн-системе доступны следующие компоненты, которые будут реализованы в ходе видеоуроков:
Каждый компонент имеет вариант темного режима и может иметь несколько состояний, таких как наведение курсора, фокус и отключение. TailwindCSS будет использоваться для быстрого создания компонентов пользовательского интерфейса без необходимости покидать наши компоненты ReactJS. В системе дизайна доступен дополнительный набор бонусных компонентов, таких как Checkbox, Toggle, Radio и Tooltip. Все компоненты создаются с учетом таких характеристик качества, как возможность повторного использования, надежность и расширяемость.
TypeScript: Полностью типизированные компоненты
Все компоненты будут полностью типизированы, чтобы пользователи библиотеки не нарушали руководящие принципы дизайн-системы. Будут изучены наиболее важные функции TypeScript, такие как базовые типы, пользовательские типы, интерфейсы, дженерики и рекорд.
Сборка и потребление: Переход к производству
Библиотека компонентов будет оптимизирована для производства. Все компоненты будут сведены к минимуму до 360 КБ общего размера, поэтому при использовании компонентов в примере проекта страница будет загружаться невероятно быстро.
На этом курсе мы научимся ориентироваться в Figma. Мы также расскажем, как создавать прототипы интерфейсов, использовать Figma с адаптивными макетами и совместно работать над идеями. Этот курс ориентирован на разработчиков. Мы рассмотрим советы и рекомендации по реализации дизайна, созданного в Figma.
Узнайте, как стать fullstack дизайнером UI UX. Разработайте 3000 вариантов интерактивных компонентов Figma и теорий UX FigJam. Превратите компоненты Figma в живые компоненты HTML CSS. Беспрепятственно проверяйте и создавайте свои компоненты Figma для передачи в разработку. Станьте единорогом UI UX, который разбирается в дизайне и коде.
awwwards.com
Дизайн-системы становятся настолько популярными, потому что они делают продукты более последовательными, улучшают их удобство использования и сокращают время принятия дизайнерских решений. Замечательно! Но знаете ли вы, как их построить? В этом курсе вы узнаете, что такое дизайн-система и почему она так важна, но, что наиболее важно, вы научитесь создавать ее с нуля в Figma.
learn.handlebarlabs.com
Научитесь создавать библиотеку компонентов, которые просты в использовании, самодокументированы и легко проверяются.
frontendmasters
Дизайн-система является горячей темой в мире разработки, и все крупные компании создают ее. Но что такое дизайн-система и как ее создать? На этом семинаре мы углубимся в основополагающую теорию дизайн-систем и создадим кусочки одной от начала до конца. Мы создадим дизайн-систему путем проектирования, разработки, документирования и развертывания нескольких компонентов.
https://github.com/thijssmudde/tailwind-storybook-starter/tree/main