Resize widths of progress bars - Figma

100%

Resize widths of progress bars - Figma

✓ Published0🌍 Public

Last edited Oct 13, 2021

Created on Oct 13, 2021

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.

AI-generated description

Similar vizzes

Loading thumbnail…

16:9 - Figma

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.

KKevinGutowski

73% match

Loading thumbnail…

Split Rectangle into equal segments with padding

This example demonstrates a Sketch plugin script that splits a selected rectangle into five equal segments with consistent padding between each segment. It shows how to programmatically resize the original shape and duplicate it to create evenly spaced copies. The code uses the Sketch JavaScript API, specifically `sketch.getSelectedDocument()`, `ShapePath`, and the `selection.duplicate()` method, along with frame properties like `frame.width` and `frame.x`. The calculation accounts for the fixed padding of 4 pixels when determining the new width of each segment and the offset for each duplicated copy.

KKevinGutowski

60% match

Loading thumbnail…

Visualizing Percentages

Three SVG progress indicators—a rounded bar, a donut, and a gauge—display the same 35% value in a React-based dashboard. The bar’s fill width and the donut’s arc length are computed by multiplying the total width or circumference by `progress`. The gauge uses a d3 `arc` generator with start and end angles mapped to the progress fraction. All indicators use a shared `VizContainer` SVG wrapper, with D3’s `timeFormat` computing the current day of the year.

IIan Newby

58% match

Loading thumbnail…

progressBarManager

A horizontal bar chart visualizes whether a current value is better, worse, or equal to a prior month, with the bar filling from the left for positive values and from the right for negative values, while a statement below the bar fades in with the verdict. The SVG is rendered with animated transitions using D3 and a custom responsive layout. The code uses d3.scale.linear, d3.dispatch for events, SVG transitions for opacity and positioning, and a custom `responsivefy` function to resize the chart. The bar’s fill color and direction depend on the sign of the parsed integer.

KKevinRourke

58% match

Loading thumbnail…

Responding to Resize

This example demonstrates a simple bar chart built with D3.js that dynamically resizes to fill the browser window. The visualization uses D3’s `d3.select` to append an SVG element to a fixed-position `div` container. On every browser resize event, the `redraw` function retrieves the container’s `clientWidth` and `clientHeight`, updates the SVG’s dimensions, and redraws two green diagonal lines forming an X. The code leverages D3’s `merge` operation to efficiently update existing line elements without removing them.

AAKB

57% match

Loading thumbnail…

Untitled

This interactive progress bar shows three workflow stages—Started, In Progress, and Completed—selectable from a dropdown menu. A gray background rectangle fills progressively with color, width, and hue (yellow to orange to green) changing via a 1000-millisecond D3 transition to reflect the chosen state. The code builds the bar using SVG rectangles and the `d3.scale.ordinal` color scale, with the `progressBar()` function controlling state changes and animated updates through `transition().duration()`.

Mmanidhana90

56% match

Loading thumbnail…

Simple D3 Percentage Gauge Responsive

A responsive percentage gauge displays a semicircular progress arc with a live numeric percentage label, updating automatically through a timed sequence of sample value pairs. The visualization uses D3 v4’s `d3.arc` and `d3.arc` with `startAngle` and `endAngle` to construct the background and foreground arcs, while SVG text shows the computed percentage. The gauge resizes based on the viewport width using jQuery, and its width, radius, and font size scale proportionally. Animation cycles through hardcoded test values, though the update itself is not animated, only redrawn. The rendering relies on SVG paths and standard D3 selection methods.

FFasani

56% match

Loading thumbnail…

Gist 95392bf4a37344793786

This interactive bar chart displays comparative proportions across four categories, rendered as vertical bars (SVG rectangles) with a rotated axis label. Using D3.js v3, users can click and drag on any bar to resize it, with a semi-transparent background bar indicating the current editing area. The visualization distinguishes major and minor gridlines through separate `d3.svg.axis` configurations, while mouse events (`mousedown`, `mousemove`, `mouseup`) update bar heights dynamically based on cursor position. Hardcoded data arrays provide initial values, and all styling is applied via CSS classes.

HHoffmannP

55% match