Techlist.io - Korean Tech Blog Curator

figma3 min readCurated summary

The birth of Inter | Figma Blog

Inter began as Rasmus Andersson’s attempt to solve a practical problem at Figma: Roboto was difficult to read at the small sizes common in user interfaces. Designed specifically for computer screens and released as open source in 2017, Inter evolved from a limited Latin character set into a long-term typeface project adopted by organizations including GitHub and Mozilla. Andersson’s experience also illustrates that building a complete type family—especially across many writing systems—is a project measured in years, not months. ## Why Inter Was Created - Figma had used Google’s Roboto as its primary typeface. - Roboto worked for both headings and body text, but its small-size readability was inadequate for Figma’s text-heavy interface. - A month-long research project still identified Roboto as the best available option, prompting Andersson to design a new alternative himself. - Inter was intended exclusively for computer user interfaces and was offered freely to the public. ## A Typeface Project Larger Than Expected - Andersson had only limited prior experience, mostly with hobby and display typefaces. - He initially estimated the project would take about a year. - He later realized that fully developing Inter could require five to ten years of continued work. - A complete typeface family must account for more than 150 recognized writing systems, each with different letterforms, spacing conventions, and structural requirements. ## Starting with Latin Characters - Andersson began with the Latin script because it was the system he knew best. - Within the first year, Inter covered roughly 200 of the most common Latin characters. - Greek, Cyrillic, Arabic, Hangul, and other scripts were recognized as substantially more complex extensions rather than simple additions. ## Using Roboto as a Foundation - To expand Inter quickly, Andersson initially borrowed Cyrillic and many Greek glyphs from Roboto. - This led to Inter being dual licensed during that period. - Over time, he recreated the borrowed characters individually so they matched Inter’s visual style. - Roboto’s relationship between lowercase height and capital-letter height was especially useful as a design reference. ## Proportions for Screen Readability - Andersson examined the proportion between a lowercase letter’s x-height and the height of capital letters. - Roboto’s balance was similar to that found in typefaces such as Apple’s San Francisco, Akkurat, Graphik, Aeonik, and Helvetica. - These proportions had become common in modern grotesque typefaces because they remained effective and readable across interface contexts. Inter’s development demonstrates that successful UI typography depends on deliberate choices about scale, proportions, glyph coverage, and long-term iteration. For teams designing text-heavy software, a typeface optimized specifically for screen use can be more valuable than a general-purpose font, but building one requires substantial ongoing work.

Read original(opens in new tab)
figma3 min readCurated summary

How to run a design sprint | Figma Blog

Design sprints help teams solve complex problems quickly by combining alignment, ideation, prototyping, and user testing within a fixed timeframe, typically five business days. The method emphasizes one clearly defined challenge, a small cross-functional team, and rapid validation of ideas. Effective preparation is essential: the better the brief, research, agenda, and logistics, the more productive the sprint will be. ## What a Design Sprint Is - A structured process for solving major problems through: - Designing - Prototyping - User research - User testing - Usually runs for five business days with clear goals and deliverables. - Follows six phases: - **Understand** - **Define** - **Sketch** - **Decide** - **Prototype** - **Validate** - Teams may adapt the framework based on their existing knowledge, timeline, and goals. ## Origins of the Google Design Sprint - The methodology was developed at Google to strengthen UX culture and design leadership. - It draws from: - Traditional UX practices - IDEO - Stanford’s d.school - Business strategy - Psychology - Its modern form is flexible and can be tailored to different organizations and challenges. ## Preparing the Sprint Preparation should take roughly as much effort as the sprint itself; teams should reserve planning time before the workshop begins. ### Write a Focused Brief - Define the problem, goals, deliverables, agenda, and methods. - Include relevant project background and existing research. - Focus on one major challenge and frame it as a specific question. - For example, replace “Make our homepage more shoppable” with “Redesign a user flow to increase conversion.” ### Assemble the Right Team - Keep the group to approximately five to seven people. - Include people responsible for implementing the outcome afterward. - Typical participants include: - UX designers - User researchers - Product managers - Developers - Relevant leaders - Larger organizations can divide participants into smaller teams working on the same problem. ### Create the Agenda - Use the six sprint phases as the basic structure. - Adjust the time allocation according to the team’s knowledge and objectives. - For example, a team familiar with the problem may shorten **Understand** and spend more time prototyping. ### Prepare Visual References - Gather screenshots, competitor or inspirational examples, data, research summaries, and other relevant material. - Make these references easily accessible throughout the sprint, whether in a presentation or another shared format. ### Compile User Research - Existing and exploratory research gives the team evidence to guide ideas. - Research can reveal: - What users want - How they currently use the product - Which behaviors or experiences need to change - This information provides the foundation for the **Understand** phase. ### Schedule Lightning Talks - Invite internal presenters or outside experts to provide focused perspectives. - Talks should generally last 10–15 minutes. - Useful topics include customer-support findings, competitive analysis, and product-performance data. - Presenters can join remotely by audio or video if necessary. ### Set Up the Workspace - Choose a bright, flexible space that supports creativity and collaboration. - Ensure there is room for whiteboards, visual references, and rearranged furniture. - Changing locations during the week—such as working from a café or park—can add variety. ### Plan an Icebreaker and Supplies - Use an icebreaker to help participants become comfortable and encourage creative thinking. - Prepare all necessary workshop supplies before the sprint begins. A successful design sprint depends on disciplined scope, the right cross-functional participants, useful research, and thoughtful facilitation. Teams should treat planning as a core part of the process rather than an administrative task.

Read original(opens in new tab)
figma3 min readCurated summary

Automate work. Bring in data. Extend what’s possible with Figma Plugins. | Figma Blog

Figma introduced plugins to make the platform more extensible, reliable, and accessible to both designers and developers. The goal was to let anyone with basic HTML and JavaScript skills build tools that automate repetitive work, bring real-world content into designs, and address needs such as accessibility. After six weeks of beta testing, more than 40 community plugins were publicly available, with private distribution also supported for organization customers. ## Why Figma Built a Plugin Platform - Designers already depended on plugins, but many were unreliable or insecure because they used unsupported APIs. - Designers without coding skills had to wait for someone else—or for engineering resources—to build the tools they needed. - Figma designed its plugin architecture to be: - Secure - Stable - Performant - Familiar to web developers - The company’s guiding idea was that anyone who could build a basic webpage should be able to create a Figma plugin. - Building a plugin system for a web-based design tool required significant architectural investment, intended to encourage more creators and experimentation. ## Plugin Availability and Distribution - Plugins became available to the entire Figma community after the beta. - Users could browse plugins within Figma and install them with one click. - Plugins could be launched from a design file’s right-click menu. - Figma Organization customers could: - Build private plugins - Distribute them across their company - Curate approved plugins - Install plugins on behalf of users ## Utility Plugins for Repetitive Tasks - **Similayer**, created by David Williames, selects layers with similar properties so designers can edit them in batches. - **Super Tidy**, created by Ismael González-Nicolás, renames frames and reorganizes them in the layers list. - These tools reduce manual “pixel-pushing” and help designers keep files organized. ## Generative Plugins for Content and Visuals - **Unsplash** lets designers insert Unsplash images directly into Figma files. - **Content Reel**, created by Microsoft, populates designs with searchable text, avatars, and icons. - These plugins help designers work with more realistic and contextual content instead of placeholders. ## Accessibility Plugins - **Contrast Checker**, from Stark, checks whether colors, visuals, and typography have sufficient contrast and readability. - **Color Blind**, created by Sam Mason de Caires, previews designs through eight types of color vision deficiency. - Together, these plugins help designers identify accessibility problems that may otherwise be difficult to notice. Figma’s plugin launch positioned extensibility as a core part of the product: designers could automate workflows, use realistic content, improve accessibility, and create custom tools instead of waiting for platform features or engineering support.

Read original(opens in new tab)
figma2 min readCurated summary

Behind the Plugins: Jackie Chui, UX Designer @ Microsoft | Figma Blog

Jackie Chui, a UX designer on Microsoft’s PowerApps team, combines design and coding to build tools that make designers more efficient. After exploring Figma’s API during a 2018 hackathon, he developed numerous plugins, including Find and Replace, Paste to Fill, and Button Resizer. His work reflects Figma’s broader goal of bringing designers and developers closer together through extensible design tools. ## From LEGO Building to UX and Code - Chui’s childhood interest in inventing with LEGO later translated into a passion for UX design. - He learned coding alongside design so he could build and test the products he envisioned. - He finds inspiration by studying other people’s work and connecting ideas across projects. ## Exploring Figma’s API - Chui began experimenting with Figma’s platform more than a year before the interview. - His first plugin project came from Microsoft’s 2018 OneWeek Hackathon, where his team explored accessibility features for design tools. - Discovering API functions that could simulate user actions sparked his interest in plugin development. - He praised Figma’s official API as easy to use and stable. ## Plugins for Faster Design Work - His most anticipated community plugin was **Find and Replace**. - Other projects included: - **Paste to Fill** - **Button Resizer** - Numerous additional productivity tools for Microsoft and the wider Figma community - His goal was to help designers work faster and smarter while encouraging others to build their own tools. ## Building Figma Plus - Chui’s proudest project was **Figma Plus**, which began as browser-only Chrome extensions. - Community feedback revealed that users wanted the tools to work in Figma’s desktop application. - Working with Mirko Santangelo and Ahmad Al Haddad, he expanded the project into a complete platform featuring: - Its own API - A plugin store - A publishing process - The project’s development prepared the team to participate in Figma’s official plugins beta. ## The Future of Design and Development - Chui expects designers and developers to work more closely as design tools increasingly bridge the gap between their workflows. - Because Figma became Microsoft’s primary design tool, building on its platform was a natural way to improve his team’s process and contribute to the broader community. - His plugins were scheduled to become publicly available with Figma’s plugin launch on August 1, 2019. Figma’s plugin ecosystem demonstrates how designers with coding skills can extend their tools, automate repetitive tasks, and create shared solutions for the wider design community.

Read original(opens in new tab)
figma2 min readCurated summary

Behind the Plugins: Matt DesLauriers, Generative Artist & Creative Coder | Figma Blog

Matt DesLauriers combines programming and visual art to create generative systems that produce evolving, often unexpected imagery. He sees code as a creative tool that collaborates with the artist, expanding what humans can imagine and execute. His Figma plugins aim to make generative art and creative coding more accessible while encouraging designers and developers to cross traditional boundaries. ## Discovering Generative Art - DesLauriers developed an interest in both art and programming during childhood, often modifying and redesigning games instead of simply playing them. - In 2014, he began creating JavaScript demos in the browser. - These demos generated images that changed over time, introducing him to emergence—the idea that complex artwork can arise from simple rules and parameters. ## Building Interactive Works - One of his proudest projects is **LUMOS**, an interactive light sculpture created with Jean-Michel Gariepy and Steven Mengin. - The sculpture was displayed in Toronto during Ontario Place Park’s 2018 Winter Light Exhibition. - The project reflects his interest in combining code, physical environments, and public art. ## Code as a Creative Medium - DesLauriers compares code to a brush or pen: a tool for communicating ideas to a machine. - Computers can execute instructions and repeat processes millions of times without tiring. - This collaboration can overcome human limitations and produce surprising results, including unexpected ideas caused by coding errors. - His workshops and writing help others explore the connection between artistic expression and programming. ## Figma Plugins for Creative Exploration - DesLauriers is developing plugins for animation, image palette generation, and parametric design. - He hopes the tools will help designers experiment with code and developers explore design. - His broader goal is to make creative coding and generative art approachable for both programmers and non-programmers. - He particularly appreciates small usability features in Figma, such as evaluating mathematical expressions like `25 / 2` directly in numeric fields. ## A More Open Design Industry - DesLauriers advocates for tools that are open, hackable, and experimental. - He believes the boundaries between designers, coders, artists, and other creative professionals should become less rigid. - His plugins represent that philosophy by bringing computational experimentation into a familiar design environment. His work suggests that creative tools should encourage experimentation rather than separate design from technology. By making generative techniques easier to use, plugins can help more people treat code as a medium for visual expression.

Read original(opens in new tab)
figma2 min readCurated summary

Behind the Plugins: Yitong Zhang, Product Designer @ Coinbase | Figma Blog

Yitong Zhang, a product designer at Coinbase, discusses how design can shape product strategy and address problems earlier in development. He is building a Figma plugin that quickly connects objects with lines to create user flows. His broader view is that designers should move beyond execution, contribute to defining problems, and focus increasingly on systems, strategy, and ethical outcomes. ## Building an Auto Flow Plugin - Zhang’s plugin uses the Figma API to connect any two objects with a line. - The goal is to make drawing user flows faster and easier. - He chose Figma because he enjoys the platform, considers its API strong, and sees Figma as the future of collaborative design. ## From Founder to Product Designer - Zhang entered technology as a startup founder who handled many different responsibilities. - After the startup failed, he pursued design work to support himself. - Design appealed to him because it preserved his favorite part of founding a company: imagining useful products into existence. - His prior experience with design tools came partly from creating anime fan art. ## Design as a Strategic Partner - Zhang is proud that Coinbase moved design beyond simply executing product requirements documents. - Designers now participate as equal partners in shaping product strategy. - He argues that designers should help define the problems they are asked to solve. - Strong execution cannot compensate for a fundamentally bad problem statement. - Early design involvement can lead to more effective, ethical, and impactful products. ## The Future of the Design Industry - Product designers will spend less time on pixel-level production. - Their work will increasingly involve system building and strategic definition. - Brand design is likely to become more distinct and important as technology companies recognize brand as a competitive advantage. - Zhang finds inspiration outside technology, recently looking to architecture for ideas about systems-level design. Designers can increase their impact by joining product discussions early, helping frame the right problems, and developing skills in systems thinking and strategy—not just visual execution.

Read original(opens in new tab)
figma2 min readCurated summary

Behind the Plugins: Tiffany Chen, UX Designer @ Microsoft | Figma Blog

Tiffany Chen, a Microsoft UX designer, is developing an accessibility-focused Figma plugin that automates the manual work of annotating designs for accessibility. She sees plugins as a way to fill gaps in design tools, make inclusive design more accessible, and encourage people from diverse backgrounds to enter the design field. Her broader work combines technical feasibility with creative experimentation. ## Accessibility-Focused Plugin - Chen’s plugin is an “accessibility-focused order annotator.” - It automates much of the manual process involved in creating accessibility annotations for designs. - The plugin was planned for release to the Figma community on August 1, 2019. ## Why Chen Builds for Figma - Figma’s plugin system and APIs are easy to use, allowing her to focus on creating rather than debugging setup issues. - Plugins let designers build missing features themselves instead of waiting for design-tool companies to add them. - She describes the Figma community as supportive and enjoyable. ## Expanding Access to Design - Chen wants to help people begin nontraditional design careers, including those from psychology, anthropology, international relations, and computer science. - She believes diverse professional backgrounds bring valuable perspectives and knowledge to design. - Her computer science background influences her designs by balancing technical feasibility with novelty. - She views accessible, powerful tools such as Figma as a way to lower barriers to becoming a designer. ## Combining Technical and Creative Work - Chen’s proudest project began by asking people unusual questions, such as what lies they were told as children. - She transformed their responses into illustrated stories for an art-directed website. - Layering and parallax effects helped her combine storytelling, visual design, and technology. ## Designing with Broader Impact in Mind - Chen admires the principles of B Corporations, which require companies to consider effects on workers, customers, suppliers, and the environment. - She believes the design industry needs both greater awareness of inclusive product experiences and more accessible paths into the profession. Chen’s work demonstrates how plugins can support accessibility while also empowering designers to customize their tools. Her recommendation in practice is clear: use approachable, flexible design technology to make inclusive design easier and broaden participation in the field.

Read original(opens in new tab)
figma2 min readCurated summary

Behind the Plugins: Sam Mason de Caires, UX Engineer at Cloudflare | Figma Blog

Figma’s early plugin beta highlighted how community-built tools could expand the possibilities of design software. Sam Mason de Caires, a UX Engineer at Cloudflare, sees plugins as a way to automate repetitive work and give designers more time for meaningful creative decisions. He also anticipates a future where generative design tools create many variations from data, with designers refining the best results. ## Sam’s Background and Motivation - Sam became a developer because he enjoys building things from scratch and seeing people use them. - His interest in design overlaps with his development experience, allowing him to contribute to design projects at Cloudflare. - He believes developers can support the design community by creating tools that improve speed and confidence. ## Plugins Sam Is Building - Sam had already created four Figma community plugins. - His projects include: - Translation tools - Data replacement - Theme UI generation - Graph creation - Color references designed to support color-blind users - He is particularly interested in using Figma’s API to automate tasks normally completed manually. ## The Role of Automation in Design - Figma’s plugin API gives creators access to the underlying tool and enables custom workflows. - Automating tedious tasks allows designers to focus on higher-value parts of the process. - Sam views plugins as a bridge between development and design, helping users work more efficiently without leaving their design environment. ## The Future of Design Tools - Sam expects major advances in generative design over the next five years. - Instead of designing every possible state individually, designers may provide data describing the desired output. - Design tools could then generate multiple variations, leaving designers to select and refine the strongest elements. - He recommends Adam Morse’s writing on “Chaos Design” for deeper thinking about the evolution of design tools. ## Contribution to the Design Community - Sam plans to continue creating tools and processes that help designers work faster and with greater confidence. - He is inspired by Stripe, praising both its visual quality and its success in making payment processing feel like a desirable product. - He also admires Stripe’s efforts to support broader communities through initiatives such as Stripe Press. Sam’s plugins were scheduled to become publicly available in Figma on August 1, 2019, reflecting Figma’s broader effort to build its plugin ecosystem around community innovation.

Read original(opens in new tab)
figma2 min readCurated summary

A step-by-step guide to using Figma for retrospectives | Figma Blog

Figma can make agile retrospectives more inclusive and collaborative than a traditional whiteboard. Its multiplayer editing, comments, components, and remote-friendly workflow let everyone contribute simultaneously and clearly. The article recommends using retrospectives as both a practical meeting format and a low-pressure way to introduce a team to Figma. ## Sharing and Permissions - Create a Figma file or duplicate the provided retrospective template. - Use the blue **Share** button to invite teammates by email or generate a link. - Ensure anyone with the link has editing permission if the whole team should participate. ## Organizing Feedback with Frames - Divide the canvas into three frames: - What should we continue doing - What should we stop doing - What should we start doing - Apply constraints to headers, backgrounds, and other child elements. - When a frame is resized to provide more writing space, constrained elements adjust automatically. ## Using Sticky Note Components - Provide sticky note components so participants can quickly add feedback. - Duplicate notes with **Command + D** or by holding **Option/Alt** while dragging. - Component instances support overrides, allowing users to change text, colors, and effects without altering the master component. - Multiplayer cursors and shared visibility make the process engaging for in-person and remote participants. - Remote teammates can follow the discussion directly in the file instead of relying on a camera pointed at a physical whiteboard. ## Customizing the Template - Add the company logo and customize Figma styles with brand colors. - Create components for common interactions, such as “+1” markers for agreement or items needing further discussion. - Design themed cover pages when creating a new file for each retrospective. - Export completed frames for documentation or sharing. Figma’s collaborative canvas provides a flexible alternative to physical whiteboards, especially for distributed teams. Starting with the template and adapting its frames, components, and visual styling can make retrospectives more accessible while encouraging broader adoption of Figma.

Read original(opens in new tab)
figma3 min readCurated summary

Product design portfolio tips from a Figma recruiter | Figma Blog

A strong product design portfolio should be built around the needs of its audience: busy design leaders who may spend only seconds or minutes reviewing it. The goal is to make your abilities, experience, and approach immediately clear through focused project selection, simple navigation, and consistent presentation. Tailoring the portfolio to the role is more effective than trying to represent every project in your career. ## Understand Your Audience and Goal - Portfolios are commonly reviewed by design managers, creative directors, heads of design, or VPs of design. - These reviewers quickly look for: - The type of design you do - Your talents and interests - Relevant experience for the role - How you approach design problems - Your overall design ability - The portfolio should emphasize information relevant to the specific position rather than requiring reviewers to search through extensive content. ## Make the Landing Page Easy to Scan - Use a cohesive system for project thumbnails: - Keep logos or screenshots consistent in size. - Apply similar styling, such as matching backgrounds or drop shadows. - Label projects consistently with details like company, role, and medium. - A clear, orderly layout reduces the mental effort required to understand the portfolio and encourages reviewers to explore more projects. - Creative layouts are acceptable when differences are intentional and help communicate priorities rather than appearing arbitrary. - Put project previews directly on the landing page so visitors can reach the work in one click. - Avoid unnecessary navigation steps such as separate “About” pages, work icons, or project-selection screens before showing the portfolio. ## Choose Projects Strategically - Select projects according to your career goals: - Highlight mobile, web, or virtual-reality work when targeting those fields. - Emphasize relevant industries, such as fintech or healthcare, when changing sectors. - Do not attempt to include the full breadth of your career; hiring managers may not have time to review everything. - Older work from prestigious brands should not automatically be included if it no longer represents your current abilities. - Use the résumé to show the range of companies you have worked with. - Include older work only when it remains especially notable or relevant. - If you lack experience in the medium or sector you want to enter, create side projects to build targeted examples. - For example, a mobile designer seeking web work should develop web-focused projects. - Similar transitions apply to print designers moving into UX/UI, visual designers pursuing research, or engineers moving toward front-end ideation. ## Practical Recommendation Treat the portfolio like a design challenge: identify the audience, define the goal, and present only the clearest evidence that you are suited to the role.

Read original(opens in new tab)
figma2 min readCurated summary

Bring your Figma prototypes to life with GIFs | Figma Blog

Figma introduced animated GIF support in prototypes, allowing designers to add motion, video elements, and subtle animations without leaving the prototyping workflow. GIFs remain static in the editor but animate when users click “Present.” The update also adds customizable cover frames, improved momentum scrolling, and touch cursors for mobile prototypes. ## Using GIFs in Figma Prototypes - Add a GIF to a Figma file using tools such as ScreenFlow, LICEcap, Principle, or After Effects. - Click **Present** to view the animation in the prototype. - GIFs appear as static images in the editor. - Designers can open the GIF properties modal and scrub to select a representative cover frame. - Custom cover frames are useful for GIFs with blank opening frames or multiple similar animations. ## Improvements for Mobile Prototypes - Mobile prototypes now include OS-aware momentum scrolling. - New touch cursors make interactions feel more like a real mobile device. ## Design Inspiration The article highlights several effective uses of animation: - **Uber:** Animated splash screens serve as both welcome moments and loading states. - **Slack:** Rotating loading quotes make waiting more engaging. - **Material Design:** Simple linear and circular progress indicators communicate activity clearly. - **Headspace:** Illustrative onboarding animations help explain the product and maintain user attention. - **Hyperlapse:** Video-based onboarding demonstrates practical product scenarios. - **Mapbox:** A looping hero animation shows the capabilities of its location technology. - **Mailchimp:** Subtle animated illustrations add texture and personality to web pages. Designers can experiment with Figma’s starter file or consult the support article for setup instructions.

Read original(opens in new tab)
figma2 min readCurated summary

What’s new on DesignSystems.com: June roundup | Figma Blog

DesignSystems.com’s June 2019 roundup highlights the growing depth and diversity of design-systems practice. The featured articles cover icon creation, agency collaboration, accessible React architecture, and white-label customization. Together, they show how design systems can support consistency while remaining adaptable to different products, teams, and users. ## Iconography from Creation to Handoff - Bonnie Kate Wolf’s guide explains how to create, organize, and implement icons within a design system. - Topics include: - Strokes and fills - Boolean operations - Icon organization - Preparing assets for developer handoff - The guide is intended for both beginners and experienced icon designers. ## Building Design Systems with Clients - Instrument shares an agency perspective based on work with companies such as Nike, Google, Airbnb, Sonos, and LinkedIn. - The agency emphasizes complete, scalable systems rather than one-off design solutions. - Its process depends on close collaboration with clients to establish a shared understanding of: - What a design system should provide - How reusable components will work - How the system can support multiple applications ## Accessible React Containers - Zendesk’s Garden design system introduced “containers” to share keyboard and accessibility behavior across React components. - These containers: - Render no user interface - Handle keyboard and mouse interactions - Support right-to-left layouts - The new open-source `react-containers` library separates these behaviors from Garden’s styling package. - The containers were rewritten to be smaller, more efficient, and more closely aligned with WAI-ARIA Authoring Practices 1.1. ## White-Labeling and User Customization - Dawn Labs developed a system that lets third-party users customize an application while preserving overall consistency. - Its implementation combines: - `styled-components` - `styled-system` - A GraphQL backend - Because users needed more control, the team created a styling escape hatch using global CSS injection and CSS variables. - This approach allows end users to customize the interface without requiring intervention from the original client. The roundup demonstrates that effective design systems must balance structure with flexibility. Teams can use shared standards, accessible component patterns, and controlled customization to create systems that scale across products and audiences.

Read original(opens in new tab)
figma2 min readCurated summary

What's new in Figma recap | Figma Blog

Figma’s spring 2019 updates focused on making everyday design work faster and more scalable. The biggest improvements expanded component workflows and introduced the public beta of the plugin API, enabling the community to build custom tools. The company also highlighted bug fixes and broader product refinements released over the previous three months. ## Component Improvements for Design Systems - Users can select multiple objects and convert them into Components in a single action. - Right-clicking a component instance now reveals related Components in the context menu, making swaps easier. - The **Return to Instance** button lets designers jump to a master component for reference or editing, then return to the instance they were working on. - For local components, instance overrides can be pushed back to the master component, supporting faster iteration and maintenance. ## Public Beta of the Plugin API - Figma launched the public beta of its plugin API after extensive development. - Early community experiments demonstrated how plugins could extend Figma beyond its built-in features. - Examples included: - Generative design tools that repeat text elements radially. - Image-analysis plugins that extract color palettes from selected images. - The strong early response suggested that plugins could support highly specialized creative workflows. ## Quality and Workflow Improvements - Figma dedicated a “quality week” to addressing and fixing a large number of bugs. - The spring release cycle also included rapid improvements to features such as Smart Selection and other frequently used tools. Figma’s spring updates strengthened its core component system while opening the platform to community-built extensions. Designers working with reusable systems could benefit from the component workflow improvements immediately, while the plugin beta offered a foundation for more customized and experimental processes.

Read original(opens in new tab)
figma2 min readCurated summary

Plugins are coming to Figma | Figma Blog

Figma announced the beta of its plugin platform, inviting developers to build tools that extend and improve design workflows. The initiative follows the success of Figma’s HTTP API and aims to make plugins powerful while preserving platform stability, security, performance, and compatibility. Figma initially planned a limited beta, with broader access and community-created plugins to follow. ## Opening the Figma Platform - Figma had previously launched an HTTP-based API for exporting design data and connecting Figma with other tools. - Customers used the API to: - Export icons through custom Slack commands. - Push design updates into development environments. - Maintain and distribute GitHub’s Octicons SVG library. - Independent designers and developers had also begun creating spaces for sharing Figma-related functionality. ## Designing a Stable Plugin System Figma recognized that plugins can create compatibility, security, and performance challenges. Rather than exposing internal APIs—which may change frequently—it designed dedicated third-party APIs intended to remain stable as Figma evolves. The company established several principles: - Plugins should be intuitive for all designers. - Anyone capable of building a website should be able to create a plugin. - Developers should be able to use popular programming languages. - Plugins should not harm Figma’s performance or user experience. - Figma would fully support and maintain the APIs used by plugins. ## What Plugins Could Do During the beta, developers could create plugins to: - Automate repetitive design tasks. - Speed up design workflows. - Import real-world data into Figma files. - Share plugins with teammates. Because Figma is web-based, the company expected plugins to be relatively easy to build and maintain for developers familiar with HTML and JavaScript. ## Beta Access and Future Availability - The beta was limited to a selected group of users. - Applicants were prioritized based on the ideas they wanted to build. - Figma intended to use the beta to stress-test and refine its plugin APIs. - Broader access was planned for the future. - Non-coders would eventually be able to use community-built plugins. Developers with basic web-development skills and a plugin idea were encouraged to apply for the beta.

Read original(opens in new tab)
datadog3 min readCurated summary

Secure publication of Datadog Agent integrations with TUF and in-toto

Datadog built a compromise-resilient CI/CD system to publish Agent integrations independently of full Agent releases. It combines in-toto for end-to-end supply-chain verification with TUF for secure key and metadata distribution. Together, these technologies ensure that users install only integrations derived from developer-approved source code, even if parts of the infrastructure are compromised. ## Independent Integration Publishing - Agent integrations were traditionally bundled into full Agent releases. - This delayed important integration updates and prevented users from trying new integrations immediately. - Datadog wanted automation to build and publish integrations on demand without fully trusting the automation itself. ## End-to-End Verification with in-toto - TLS and GPG package signatures help prevent man-in-the-middle attacks but do not protect against compromised build or publishing infrastructure. - in-toto defines the software supply chain as a fixed sequence of signed steps. - Each step records the inputs it received and the outputs it produced, allowing the Agent to verify that only authorized parties performed the required work. - The integration pipeline includes: - Developers signing Python and YAML source files. - CI/CD packaging the source into Python wheels without modifying existing wheels. - A signing step applying TUF signatures to the wheels. - The Datadog Agent verifying that the downloaded wheel matches the developer-signed source. ## Secure Distribution with TUF - in-toto does not itself provide a secure way to distribute, revoke, or replace verification keys. - TUF supplies signed, compromise-resilient metadata for: - The root of trust for wheels and supply-chain metadata. - The in-toto-defined workflow. - Public keys used to verify the workflow. - TUF protects against tampering, rollback attacks, and indefinite replay of outdated metadata. - Offline trust bootstrapping and protected developer keys are essential to the overall security model. ## Hardware-Protected Developer Signing - Developers use Yubikeys to generate and store GPG signing keys. - Private keys cannot be exported from the device, assuming correct firmware. - Signing requires both a secret PIN and physical interaction with the Yubikey. - A command-line tool integrates in-toto and GPG, preserving a convenient developer workflow while reducing key-compromise risk. ## Transparent Verification for Users - The Datadog Agent automatically invokes TUF and in-toto when downloading or updating integrations. - Users need no workflow changes under normal conditions. - If metadata, signatures, or supply-chain steps fail verification, installation is blocked and the Agent reports the failure. Datadog’s approach demonstrates that secure automated publishing requires layered controls: in-toto verifies how software was produced, while TUF securely manages the trust and distribution mechanisms needed to validate it.

Read original(opens in new tab)