16:9 - Figma — VizHub

100%

16:9 - Figma

✓ Published0🌍 Public

Last edited Oct 13, 2021

Created on Oct 13, 2021

This example demonstrates a Figma plugin that resizes a selected design element to fit a 16:9 aspect ratio. It calculates a multiplier based on the current width, then uses the `resize` method to set the dimensions to 16 times that multiplier and 9 times it, while also enabling `constrainProportions` to maintain the correct ratio. The code reads the selected frame's properties directly from the Figma API and modifies its dimensions accordingly.

AI-generated description

Similar vizzes

Loading thumbnail…

Resize widths of progress bars - Figma

This example shows a Figma plugin script that resizes the segments of a selected progress bar to reflect a set of time intervals. The script uses the Figma API to access the current page selection, reads its padding and item spacing, and calculates new segment widths based on the proportional differences between sequential times in a hardcoded array. It clones the first child element, resizes each clone to the computed width, and appends the new parts to the selection, removing the original extra children first.

KKevinGutowski

73% match

Loading thumbnail…

Create Variants Automatically

This example shows a Figma plugin that automatically converts selected frame children into reusable component variants, organizing them into a vertical layout. The script iterates through each child frame, finds all matching glyphs by name across the page, and clones each into a new component with a renamed hierarchy based on the parent’s name. Using Figma’s `createComponent`, `clone`, and `combineAsVariants` APIs, it builds variant groups and sets their layout mode. The code demonstrates programmatic component creation and variant combination directly from the Figma document model.

KKevinGutowski

62% match

Loading thumbnail…

Reactive Mixins

This example demonstrates how to encapsulate reusable graphical behaviors using Model.js and D3.js, with a focus on dynamic resizing. It shows a margin convention that adjusts an SVG’s width and height, a gray background rectangle, a large diagonal X, and a centered circle, all clipped by a rectangle that follows the inner dimensions. The visualization responds to window resizing by reading the container’s size via `clientWidth` and `clientHeight`, then updating the model’s `box` property, which triggers the reactive `my.when` callbacks to redraw. The code uses D3’s selection and data-join patterns for lines and rects, alongside Model.js’s reactive property tracking to coordinate layout and rendering.

CCurran Kelleher

58% match

Loading thumbnail…

Fullsize.js Prototype

This prototype demonstrates a minimal reusable utility for creating full-screen D3 visualizations that respond to browser resize events. The `fullsize` function appends a fixed-position div, adds an SVG child, and on every resize extracts the div’s dimensions to update the SVG’s width and height attributes, then calls a user-supplied render function. The example renders two diagonal lines forming an X, with coordinates recomputed from the current width and height, using D3 v4’s data join and merge pattern.

CCurran Kelleher

57% match

Loading thumbnail…

Gist 81582

This example demonstrates a code snippet from a Merb global helper function that dynamically scales image dimensions while maintaining an 18-pixel vertical baseline. The function `scaled_image_tag` adjusts an image’s width to a maximum value and proportionally recalculates its height, rounding down to the nearest multiple of 18 to preserve grid alignment. It uses the Ruby `image_tag` helper from the Merb framework’s view layer, relying on standard hash options to pass width and height parameters. The code illustrates a practical rendering approach for responsive image handling in server-side templates, with no client-side visualization or data source involved.

DDylanFM

56% match

Loading thumbnail…

Fork of Responding to Resize

This example demonstrates how a D3.js visualization can automatically resize its SVG output to match the browser window’s dimensions. The code uses CSS to make a container div fill the viewport, then reads `clientWidth` and `clientHeight` to set the SVG’s width and height attributes. It draws an X shape using two green lines with heavy stroke width and opacity, showing the current size. The `redraw` function reapplies these dimensions whenever the window is resized by listening to the `resize` event.

DDaniel

56% match

Loading thumbnail…

Fork of Responding to Resize

This example demonstrates a full-page SVG that dynamically resizes to match its container. It uses D3 v5 to select the chart div and append an SVG element, then defines a redraw function which extracts the container’s CSS-computed `clientWidth` and `clientHeight` to set the SVG’s attributes. A green diagonal cross is drawn with `selectAll` and data-bound `line` elements, merging enter and update selections. The function runs initially and listens for the browser `window` `resize` event, redrawing the graphic to fill the viewport.

AAbdulazizfh

56% match

Loading thumbnail…

Fork of Responding to Resize

This example demonstrates a responsive SVG visualization that fills the entire browser window and redraws its content whenever the viewport size changes. The page uses CSS to stretch a chart container to full screen, then d3.js extracts the container’s clientWidth and clientHeight on each resize event to update the SVG’s width and height attributes. Two diagonal lines form a green X marker whose endpoints adjust to the current dimensions, showcasing how to bind data containing the new coordinates and re-render with a selection merge. The code relies on d3.select, selection.attr, and window.addEventListener for the resize handling.

Ddok0086m

56% match