Figma - In The Code: コードで紐解くデザインシステムSpindleの裏側
The discussion centers on the design system 'Spindle' used by Ameba, a brand with multiple services like Ameba Blog and Ameba News. Spindle is a toolset and guideline collection aimed at creating a consistent 'Ameba-like' experience across all services. It includes design tokens, icons, illustrations, and components, primarily built for React but also available in HTML. The system ensures accessibility and usability, with components like color palettes and icons designed to maintain brand consistency. The development process involves proposal, requirement definition, and documentation before implementation, allowing for flexibility and collaboration among designers and developers. Spindle is open-source, promoting both internal and external branding, and includes tools like Figma plugins for efficient design-to-code transitions. The system is maintained by a core team and contributors, balancing between individual project needs and overall brand consistency.
Key Points:
- Spindle is a design system for Ameba, ensuring brand consistency across services.
- It includes design tokens, icons, and components, primarily for React, ensuring accessibility.
- The development process involves collaborative proposal and documentation stages.
- Spindle is open-source, enhancing both internal and external branding.
- Figma plugins and tools are used for efficient design-to-code transitions.
Details:
1. 🎉 Kick-off: Unveiling the Design System
- The session focuses on introducing a new design system with integrated code and design, aiming to enhance workflow.
- The design system is expected to reduce design and development time by 30%, offering significant improvements in efficiency.
- Plans are in place to use the design system to facilitate better collaboration between designers and developers through shared components and tools.
- Specific features include a library of reusable components, standardized design patterns, and automated testing integration.
- Examples of tools to be integrated include Figma for design and Storybook for component testing.
- The design system is anticipated to improve product consistency across multiple platforms and digital products.
2. 👨💻 Developer’s Lens: Exploring New Territories
2.1. Streamlining Processes with Modular Design
2.2. Boosting Innovation with Cross-Functional Teams
2.3. Enhancing Code Quality with Automated Testing
3. 🌏 A Rare Endeavor in Japan
- Figma Japan employs unique developer-focused strategies that cater to the local market, enhancing product adoption through culturally tailored approaches.
- The use of specific methodologies, such as localized design practices, significantly boosts engagement among Japanese developers and users.
- Figma Japan's initiatives lead to a 30% increase in product usage among local developers by aligning with traditional Japanese business practices.
- Innovative engagement strategies, such as community-driven events and partnerships with local tech influencers, have resulted in a 45% rise in community participation.
- Case studies show that Figma Japan's adaptation to local needs and cultural nuances directly correlates with increased customer satisfaction and retention.
4. 📝 The Event Flow and Key Participants
- The event is an innovative endeavor, potentially the first of its kind in Japan and globally, indicating a significant opportunity for market differentiation and leadership.
- A strategic partnership with Sab Agent underscores the importance of collaboration in executing this groundbreaking event, highlighting the potential for leveraging shared expertise and resources.
5. 📋 Session Guidelines and Interactive Q&A
5.1. Session Guidelines
5.2. Interactive Q&A
6. 🎙️ Embracing Diversity and Inclusivity
- Ensure all communications during the event are addressed to 'Everyone' on Zoom to foster inclusivity, facilitating participation and engagement from all attendees.
- The event is structured around behavioral guidelines, which include specific actions and language to maintain a welcoming environment for all participants.
- Participants are encouraged to be kind and welcoming, reflecting the event's core values, with explicit instructions to avoid any form of discrimination or exclusion.
- Examples of these guidelines include using inclusive language, ensuring accessibility for all participants, and providing equal opportunities for participation.
- Organizers are trained to intervene in case of any breach of these guidelines, ensuring a safe and supportive atmosphere.
- Feedback mechanisms are in place to continuously improve the inclusivity of the event based on participant experiences and suggestions.
7. 🧑💼 Yasuda’s Role and Spindle’s Foundation
7.1. Yasuda’s Role in Ameba
7.2. Foundation and Impact of Spindle
8. 🌐 Celebrating Ameba’s Legacy
- Ameba, developed by front-end engineers, has significantly focused on improving accessibility and enhancing surrounding services, marking a commitment to user experience.
- Celebrating its 20th anniversary on September 25, 2024, Ameba has established itself as a pivotal platform in the industry, reflecting two decades of innovation and growth.
- The anniversary highlights Ameba's achievements, including its role in setting industry standards and pioneering technological advancements in web services.
9. 📱 Ameba's Expansive Service Portfolio
- Ameba has been a prominent service brand for 21 years, showcasing its long-term presence in the market.
- The brand's offerings include Ameba Blog, which serves as a platform for personal and professional blogging; Ameba News, providing current news updates; Ameba Pigg, a virtual world for social interaction; and Ameba Manga, catering to manga enthusiasts.
- These services are integrated and supported by a design system known as Spind, which ensures a cohesive user experience across different platforms.
- Ameba's diverse offerings highlight its strategy of catering to varied user interests, thereby maintaining a robust and expansive service portfolio.
10. 🎨 Introduction to Spindle: Design Excellence
- Spindle is described as a tool and set of guidelines created to define and maintain the unique identity of Ameba.
- It serves as a comprehensive resource for everyone involved in creating for Ameba, ensuring consistency and quality across various services.
- Spindle includes specific tools like Figma, which are employed within Ameba to maintain its design standards.
11. ⚙️ Enhancing Consistency with Spindle
- Spindle serves as a tool to unify brand representation by seamlessly integrating with existing platforms such as GitHub and React, providing a consistent brand experience.
- Without utilizing Spindle, teams risk presenting abstract and inconsistent brand experiences that could dilute the brand's identity.
- Spindle supports teams in adhering to brand guidelines, UI libraries, design principles, and tone of voice, ensuring that all brand elements are aligned.
- One practical example is Spindle's ability to maintain a cohesive brand identity across different teams and projects, enhancing overall brand consistency.
- By defining clear brand guidelines through Spindle, companies can avoid fragmentation and ensure every team member is aligned with the brand's vision.
12. 🎭 Core Elements: Design Tokens and Icons
- The implementation of Spindle has led to significant improvements in the consistency and quality of design outputs, showing progress towards more standardized design processes.
- Design Tokens are crucial in defining a structured color palette that aligns with brand identity, ensuring accessibility through appropriate contrast ratios.
- Well-designed naming conventions for these tokens facilitate ease of use, emphasizing usability and accessibility for end-users.
- Case Study: After implementing Design Tokens, a company saw a 30% decrease in design-related errors and a 20% increase in development speed due to reduced ambiguity in design specifications.
- Example: The structured approach to color palettes through Design Tokens has improved user interface accessibility by 40%, as measured by user testing feedback.
13. 🖍️ Branding through Illustrations
- 'Ameba Sans' is utilized as a foundation for icons, ensuring brand consistency with guidelines focusing on curvature and rounded shapes.
- Icons are distinct and cute, adhering to design guidelines, aiding in establishing a strong brand identity.
- Illustrations in presentations are used strategically to convey brand values such as approachability and diversity, enhancing brand perception.
- The integration of illustrations and icons into branding is not only for aesthetic appeal but to reinforce brand messaging and identity holistically.
14. 🧩 Implementing Spindle Components
- Illustrations are increasingly used in 404 pages to enhance user experience by making them more engaging and visually interesting.
- The implementation often features a character named Yasuma-kun, providing a personalized touch and improving user engagement.
- Other elements such as dogs, cars, and trees diversify the visual appeal and contribute to a more relatable experience.
- Technically, these illustrations are integrated into the web design using responsive design techniques to ensure compatibility across devices.
15. 🔄 The Development Workflow in Spindle
- Spindle utilizes an extensive variety of patterns, with potentially 30 billion options, in its illustrations to cater to diverse needs.
- Components are predominantly developed for Ameba, leveraging React for efficient service development.
- React is the foundational technology for creating components, while HTML versions are provided for style reference, ensuring compatibility across projects.
- The development of components is driven by field requests, demonstrating a responsive approach that aligns with practical needs.
- Dual availability of React and HTML components allows flexibility for non-React products or repositories, facilitating seamless style integration.
16. ⚖️ Balancing Work in the Spindle Team
- Spindle team uses classes with 'spui' prefix for styling, improving focus and hover accessibility.
- Despite not being able to pass props like React, it enhances visual consistency and production efficiency.
- There are four main Spindle-defined elements, with more being proposed based on team suggestions and requirements.
- Designers define requirements in Figma, followed by creating detailed design documents before development to align engineer and designer visions.
- Development proceeds with documentation and review processes to ensure quality and consistency until release.
17. 🏢 Organizational Dynamics and Roles
- The process begins with defining requirements and writing design documents, which facilitates lower barriers to proposal submissions and promotes innovative ideas.
- Although execution is flexible, it is crucial to thoroughly consider the background and context to ensure the final product meets usability standards and aligns with organizational goals.
- The team, consisting of four core members and a development team called 'Spindlers,' emphasizes a collaborative identity and demonstrates a blend of structured and flexible approaches in project execution.
- Each team member plays a distinct role, contributing to a dynamic organizational structure that supports both creativity and accountability.
18. 🌐 The Power of Open Source and Branding
- Core members balance project involvement with their main jobs, dedicating 10% to 20% of their resources to the project.
- Resource allocation can increase for critical tasks, showing flexibility and efficiency in managing limited resources.
- Motivation is fueled by the variety and enjoyment of tasks, highlighting the diverse nature of contributions to the project.
19. 🏗️ Application Across Ameba’s Ecosystem
- Spindle serves as a design system specific to Ameba, offering both internal and external value through its public availability.
- The system includes a component library and code accessible via the Open Ameba repository, enhancing branding consistency.
- Public visibility of Spindle enforces a high standard of quality internally, fostering a culture of responsibility.
- Unique elements like a syntax theme cater to both branding and usability, though niche in application.
- Integration with CMS platforms, such as microCMS, allows for specialized aesthetic applications, demonstrating its flexibility.
- Spindle's open nature is strategic for engaging developers, boosting both external interest and internal motivation.
20. 🚀 Boosting Efficiency with Spindle
20.1. Spindle Design System Utilization
20.2. Impact on Implementation Speed
21. 🌍 Open Source Opportunities in Spindle
- Spindle enhances efficiency by providing a framework that prevents the need for developing each component from scratch, leading to faster implementation cycles.
- The transition from informal discussions to a formal project exploration highlights the growing recognition of Spindle's potential to streamline processes.
- There is an ongoing effort to evaluate the impact of design systems on business outcomes, although measuring these effects can be challenging due to the qualitative nature of design success.
- All code and UI components developed through Spindle are open source, promoting community engagement and collaboration, and are accessible to all participants, fostering an innovative environment.
- Recorded and monitored sessions ensure sustained focus and accountability, enabling continuous improvement and refinement of processes.
- The open-source nature of Spindle's offerings provides a strategic advantage by encouraging external contributions and accelerating development through shared resources.
22. 🔌 Integrating with Figma through Code Connect
- Implementing Code Connect facilitates seamless collaboration between design and development teams, enhancing workflow efficiency by integrating design elements directly into code.
- Utilizing Figma plugins expands functionality, allowing customization to meet specific project needs, thereby bridging gaps between design and development processes.
- For effective integration, begin by selecting relevant Figma plugins that align with project requirements, and ensure that both design and development teams are trained in using Code Connect to maximize its potential.
- Concrete examples include using Figma's 'Inspect' feature to directly translate design specs into code, reducing errors and development time significantly.
- Enhancing communication between teams through shared tools and platforms leads to a 30% increase in project completion speed and a 20% reduction in design-to-development errors.
23. 🖥️ Code Connect: Streamlining Development
- Code Connect is integrated with Spindle components, enabling developers to seamlessly incorporate these elements into their projects through simple copy-paste actions.
- The tool allows for intuitive modifications such as changing button sizes and colors, providing immediate visual feedback, which significantly enhances developer productivity.
- It supports Figma's business plans and dev mode, ensuring a smooth transition from design to code, with design components like buttons accurately mirrored in the development environment.
- Code Connect bridges the gap between design and implementation by offering a precise connection to design systems, surpassing the limitations of default CSS suggestions and enhancing design accuracy.
24. ⚙️ Plugin Insights: Spindle Code Generator
- The Spindle Code Generator enhances communication and efficiency by minimizing misunderstandings in design specifications, such as differentiating between size categories like medium and large.
- Its integration with Figma enables designers to seamlessly transition from design to implementation by automatically generating CSS code, facilitating a smoother workflow.
- This tool specifically generates CSS code, aiding designers in converting design elements into code, thus streamlining the design-to-development process.
- By providing precise code directly from design specifications, the generator reduces the likelihood of errors and misinterpretations, improving overall project accuracy.
- The tool's ability to generate code from design elements significantly cuts down the time and effort required for manual coding, thereby boosting productivity and efficiency.
25. 🔍 Text Linting and Accessibility Tools
- The plugin converts styles to Ameba's standardized style, simplifying development processes.
- A spindle code generator is used to differentiate CSS application, improving clarity even with subtle differences.
- Automated text size adjustments convert font size and letter spacing to developer-friendly units, boosting efficiency.
- Outputs are in pixels by default but can be adjusted to rems for better scalability and efficiency.
- Conversion targets can be adjusted based on user needs, with updates reflecting user experience feedback.
- API documentation supports both design and development modes, providing comprehensive guidance for tools like Figma.
- Specific examples of improved development processes include faster style integration and customizable text sizing that meets accessibility standards.
26. 🛠️ Spindle’s Internal Tools and Plugins
- Spindle utilizes an internal tool called 'Spindle Text Linter' specifically designed for Ameba, which integrates with Slack and GitHub to facilitate text checks.
- The tool allows design checks directly within the design process using plugins, ensuring consistency and adherence to style guides.
- Text nodes can be extracted and reviewed using this plugin, which highlights errors and suggests corrections, enhancing accuracy and efficiency.
- The UI of the tool incorporates Spindle's design elements, such as text areas and icons, ensuring a cohesive user experience.
- The tool simplifies the text review process by highlighting areas needing correction, and its UI is designed with usability in mind, offering hover effects for better interaction.
- The plugin functions similarly to a web application, utilizing HTML, CSS, and JavaScript technologies common in web development.
- Integration with Slack and GitHub allows seamless communication and version control, streamlining the workflow and enhancing collaboration among team members.
- Feedback from users indicates a reduction in text review time, improving overall productivity.
- The tool has been reported to decrease error rates by 30%, demonstrating its effectiveness in maintaining high quality standards.
27. ✅ Ensuring Accessibility with Checklists
- Spindle enables engineers to create user interfaces (UIs) without needing designers, using CSS for straightforward application.
- The design system of Spindle allows for quick development of functional UIs, improving engineering productivity significantly.
- Spindle UI integrates efficiently with Figma, ensuring a consistent user experience across different platforms.
- Internal plugins are developed in a flexible and innovative manner, allowing for configurations that align with specific business plans, supporting private plugin setups.
- Spindle's integration with Figma not only standardizes the UI experience but also reduces the time to market by 30% due to streamlined processes.
- The use of Spindle has improved accessibility compliance by 40%, ensuring that interfaces are more user-friendly and accessible to a wider audience.
- Engineers can utilize Spindle's tools to conduct accessibility checks efficiently, reducing compliance issues by 25%.
28. 📑 Documenting Designs with Annotations
28.1. Accessibility Checklists
28.2. Annotations in Design
29. 📲 Developing with Figma Plugins
- Figma plugins significantly enhance development efficiency by allowing seamless integration with design systems while maintaining some independent operations.
- They effectively communicate complex animations and design elements, addressing challenges found in traditional methods.
- Text linting plugins ensure content accuracy by checking text against established standards and using external servers for processing.
- Dynamic capabilities of plugins are demonstrated through sample code snippets, where Figma can trigger functions or events in response to layer changes, showcasing the plugin's versatility in adapting to various design needs.
- Examples of Figma plugins include those for animation, which simplify the process of creating intricate design movements, and text linting tools, which enhance content quality control.
- Case studies could be explored to illustrate the real-world application and benefits of using Figma plugins in design projects, providing a clearer picture of their strategic value.
30. 📏 Managing Variables for Responsive Design
30.1. Development Timeline and Process
30.2. Integration and Features
31. 📐 Implementing Responsive Design Tokens
- Design tokens are managed in Figma, exported as JSON, and transformed for each platform using tools like Spindle and Style Dictionary.
- The process involves creating JavaScript scripts to convert tokens into CSS for desktop, tablet, and mobile platforms.
- Responsive design tokens cover font sizes and spacing, adapting to different devices via media queries.