Curso Figma: 16. Estilos Locales - #jonmircha

Welcome to Class 16 of the Course on Design Software

Introduction and Engagement

• Jonathan Marcha introduces himself as a digital teacher and welcomes viewers to the sixteenth class of his design course.

• He encourages viewers to share, comment, like videos, and subscribe for notifications about new content.

Recap of Previous Lessons

• The previous session covered filters, effects, and various export options in the design software.

• Jonathan highlights an important export feature that allows users to select multiple elements for independent exportation.

Understanding Local Styles in Design

Importance of Local Styles

• Today's lesson focuses on local styles, which are essential for those familiar with HTML/CSS coding.

• Local styles serve as style guides in user interface projects, detailing components such as colors, text sizes, and button types.

Creating Local Styles

• Jonathan demonstrates how to create local styles by drawing rectangles filled with primary colors (red, green, blue).

• He explains how these colors can be inherited when creating other shapes without needing to remember specific color codes.

CSS Classes Analogy

Drawing Parallels with CSS

• The concept of local styles is compared to CSS classes used in coding; they help define properties like color and size for UI elements.

• Jonathan discusses different header levels (H1-H6), emphasizing their importance in structuring web content effectively.

Practical Application

Utilizing Typography and Styles in Design

Introduction to Typography

• The speaker expresses a preference for the Braille Way typography but also mentions exploring other popular fonts like Roboto.

Reusing Styles

• Discusses the importance of reusing styles for colors, borders, and effects (like blur and shadows) to maintain consistency across designs.

Accessing Design Resources

• Introduces the concept of accessing design resources through a platform called "firma," which includes basic wireframe templates.

Project Creation in Firma

• Explains that upon creating an account on firma, users can initiate up to three projects under a free tier, emphasizing project naming conventions.

Understanding Design Systems

• Highlights the significance of design systems in organizing resources and styles effectively within projects, encouraging users not to delete default files provided by firma.

Managing Colors and Styles

Color Management

• Describes how color styles are represented visually in a design system file with examples of color codes (e.g., hexadecimal).

Creating Consistent Style Names

• Emphasizes the need for consistent naming conventions when creating style documents to avoid confusion as projects grow.

Editing Styles Efficiently

• Demonstrates how changing a style's attributes automatically updates all elements using that style, drawing parallels with CSS class functionality.

Best Practices for Naming Styles

Importance of Meaningful Names

• Advises on giving meaningful names to styles, especially for those less familiar with coding; suggests using descriptive terms rather than generic labels like "style 1."

Recommended Naming Conventions

• Suggests using separators like dashes or underscores in style names and introduces camel case as an alternative while stressing clarity over complexity.

Resources for Learning More about Firma

Official Learning Channels

Masterclass on Sigma Tool Features

Introduction to Sigma Tool

• The video discusses the creation of masterclass videos to teach new features of the Sigma tool, emphasizing quick usage through informative capsules.

• The YouTube channel is in English, but language should not be a barrier for learning; the focus is on practical application.

Creating Styles in Sigma

• Users can create styles such as "pure red background" and apply them easily across elements without manual color adjustments.

• Demonstrates creating multiple styles (e.g., diagonal green and blue backgrounds), showcasing how these can be applied to various shapes efficiently.

Benefits of Using Styles

• Discusses the advantage of using styles when client requests changes in color schemes, allowing for quick updates across all elements instead of manual adjustments.

• Highlights that if styles are not used, users would need to change colors individually, which is time-consuming.

Editing and Managing Styles

• Explains how to edit existing styles and unlink elements from their assigned styles if needed.

• Shows how changing a style affects all linked elements simultaneously, demonstrating efficiency in design management.

Cascading Style Concept

• Compares style management in Sigma with cascading style sheets (CSS), where changes propagate through linked components.

• Introduces header styling options (H1, H2, H3), detailing size specifications for each type while maintaining consistency across designs.

Typography Management

• Discusses setting typography sizes for different text types (e.g., headers vs. body text), ensuring uniformity throughout the project.

• Emphasizes creating specific text styles based on typography choices to streamline future edits and maintain design coherence.

Nomenclature and Style Management in Team Projects

Importance of Consistent Naming Conventions

• Emphasizes the necessity for a leader to establish a consistent nomenclature when working in teams, as inconsistent naming can lead to confusion.

• Discusses how naming conventions apply to HTML elements, such as paragraphs, and the importance of adhering to established styles like "rally way" for uniformity.

Text Styling Techniques

• Introduces the concept of applying text styles (e.g., headers h1, h2, h3) within a design framework, showcasing how these styles are recognized by the system.

• Demonstrates how easily one can apply different text styles to interface elements using predefined styles like "rally way" for paragraphs.

Border and Stroke Customization

• Explains how to create borders in CSS visually by adjusting stroke properties on shapes or rectangles.

• Details various border thickness options (thin, medium, thick), comparing them with CSS terminology for clarity.

Creating and Managing Styles

• Highlights the process of creating new style definitions (e.g., border colors and thicknesses), stressing the importance of using English terms for consistency.

• Encourages users to develop habits around naming conventions that align with industry standards (e.g., "border black thin").

Visual Effects Application

• Discusses local style detection based on selected elements within a design frame and emphasizes managing these local styles effectively.

• Illustrates how visual effects can be applied consistently across different elements while maintaining clarity in style management.

Advanced Effects: Blur Techniques

• Introduces blur effects as an advanced styling option, demonstrating its application through practical examples with images.

• Shows how previously created styles can be reused or modified without losing their integrity even if original elements are deleted.

Conclusion and Next Steps