0
0
Figmabi_tool~15 mins

Style organization and naming conventions in Figma - Real Business Scenario

Choose your learning style9 modes available
Scenario Mode
šŸ‘¤ Your Role: You are a UI/UX designer working with a BI team
šŸ“‹ Request: Your manager wants you to organize and name styles in Figma for a sales dashboard project
šŸ“Š Data: You have a Figma file with multiple text styles, color styles, and effect styles used inconsistently
šŸŽÆ Deliverable: A well-organized style system in Figma with clear naming conventions for colors, typography, and effects
Progress0 / 5 steps
Sample Data
Style TypeCurrent NameUsage
ColorBlue1Primary buttons
Colorblue_darkHeaders
ColorAccentRedAlerts
TextHeadingBigDashboard titles
TextbodytextParagraphs
TextBodyTextBoldLabels
EffectShadow1Cards
Effectshadow_lightButtons
1
Step 1: Group all color styles by purpose and rename them using the format 'Color / Purpose / Shade', e.g., 'Color / Primary / Blue'.
Rename 'Blue1' to 'Color / Primary / Blue', 'blue_dark' to 'Color / Primary / Blue Dark', 'AccentRed' to 'Color / Alert / Red'.
Expected Result
Color styles are clearly grouped and named for easy identification.
2
Step 2: Organize text styles by hierarchy and usage, rename using 'Text / Role / Size / Weight', e.g., 'Text / Heading / Large / Bold'.
Rename 'HeadingBig' to 'Text / Heading / Large / Bold', 'bodytext' to 'Text / Body / Medium / Regular', 'BodyTextBold' to 'Text / Body / Medium / Bold'.
Expected Result
Text styles are consistently named and easy to apply correctly.
3
Step 3: Standardize effect styles naming with 'Effect / Type / Intensity', e.g., 'Effect / Shadow / Light'.
Rename 'Shadow1' to 'Effect / Shadow / Medium', 'shadow_light' to 'Effect / Shadow / Light'.
Expected Result
Effect styles are organized and naming reflects their visual impact.
4
Step 4: Create style folders or sections in Figma for Colors, Text, and Effects to keep styles visually grouped.
Use Figma's style organization features to group styles under 'Colors', 'Text', and 'Effects'.
Expected Result
Styles are easy to find and maintain within the Figma file.
5
Step 5: Document the naming conventions and style organization in a shared file or page for team reference.
Write a simple guide explaining the naming format and grouping rules.
Expected Result
Team members understand and follow consistent style naming and organization.
Final Result
ā”Œā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”
│       Figma Style System       │
ā”œā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”¬ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”¤
│ Colors      │ Text Styles    │
ā”œā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”¼ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”¤
│ Primary     │ Heading Large  │
│   Blue      │   Bold         │
│ Primary     │ Body Medium    │
│   Blue Dark │   Regular      │
│ Alert       │ Body Medium    │
│   Red       │   Bold         │
ā”œā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”“ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”¤
│ Effects                     │
│ Shadow Medium               │
│ Shadow Light                │
ā””ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”˜
Bonus Challenge

Create a Figma plugin or use existing plugins to automatically rename and organize styles based on your naming conventions.

Show Hint
Look for plugins that manage style libraries or batch rename styles to save time.