{"id":14289,"url":"\/distributions\/14289\/click?bit=1&hash=892464fe46102746d8d05914a41d0a54b0756f476a912469a2c12e8168d8a933","title":"\u041e\u0434\u0438\u043d \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u043b \u043f\u0440\u043e\u0434\u0430\u0436\u0438 \u043d\u0430 5%, \u0430 \u0441\u0440\u0435\u0434\u043d\u0438\u0439 \u0447\u0435\u043a \u2014 \u043d\u0430 20%","buttonText":"","imageUuid":""}

Что важно знать для уверенной работы в фигма?

Статья о функционале фигмы, необходимом для изучения. Когда начинаешь осваивать новый софт, иногда даже не знаешь за что схватиться. Здесь как раз краткая выжимка о ключевых темах

1. Основные инструменты
Это база. Важно понимать как рационально пользоваться возможностями программы. Изучите каждую кнопку на панели инструментов. Узнайте как сделать пятиугольник и чем отличается инструмент Move (v) от Scale (k).

Главная панель инструментов Figma

2. Горячие клавиши

Здесь все просто, это вопрос привычки. Горячие клавиши многократно ускорят вашу работу, когда вы к ним привыкните. Не пугайтесь объема, очевидно в горячих клавишах вы будете использовать в среднем всего 10 популярнейших инструментов

Все горячие клавиши на русском по ссылке 

3. Компоненты и стили

Главное правило IT гласит: не повторяй себя. Если элемент повторяется больше двух раз, сделайте из него шаблон. В чем польза? Внося правки в главный компонент или стиль (текста, цвета, эффекта, etc) будут изменяться все элементы, имеющие эту настройку

Работа с большими проектами становится невыносимой, если своевременно не оформить компоненты и стили

4. Автолэйаут

Это новая функция в Фигме, позволяющая адаптировать элемент под любые размеры макетов. Представьте, что у вас есть календарь и вам нужно сделать его шире на 30 px. Автоскейл позволяет сделать это одним движением, а не через настройки отдельных элементов
Скриншоты из макета под видео о создании календаря через компоненты и статьи о библиотеках

5. Научитесь упорядочивать элементы

Это важно как минимум с иконками. Упорядочивание позволит быстро их заменять при необходимости. Для этого нужно упаковать иконку в компонент и прописать "путь" к ней вида Block name / icon_name (хотя в прочем какого хотите вида)

Скриншот из обучающего видео от Дмитрия Варфоломеева

Порядок в слоях также необходим. Объединяйте элементы в группы (или фреймы), делите макеты по страницам (например, страница для мудборда, еще одна под UI-kit и третья под разработку), давайте корректное название группам и шейпам

Варфреймы одного из заказчиков были оформлены так

6. Прототипирование

Самая интересная и объемная (на мой взгляд) тема в изучении фигмы. Прототипирование позволяет анимировать макет. Почему это важно? Верстальщики должны понимать какую анимацию вы планируете на сайте. Как должна крутиться галерея и откуда выскакивают звездочки. Прототипирование как раз это и показывает

Гифка взята из вводной статьи Skillbox об основных функциях прототипирования

Думаю, путь к сеньору лежит через глубинное изучение каждой из этих тем. Штож... Я в пути.

Рекомендую прочитать статьи-источники. Есть дополнения или замечания? Пиши в комментарии

0
Комментарии
-3 комментариев
Раскрывать всегда